HTML5における＜meter＞タグの使い方

<meter>タグは、下限や上限が決まっている範囲内で、一定の測定値を示す際に使用するタグです。今回は、HTML5における<meter>タグの使い方をご紹介します。

HTML5における<meter>タグの使い方

<meter>タグは、HTML5で初めて登場した要素で、一定の範囲の中での容量を示す際に使用します。例えば、ディスクの使用容量などを示す時などに使われています。下限や上限などのはっきりとした範囲が決まっていない場合には、<meter>要素はふさわしくありません。

以下のように記述して使用します。

また、必須属性であるvalue属性を必ず記述します。以下が基本形のサンプルコードです。

デフォルトの値が０%なので、value属性を記述していなくても同じ表示になりますが、value属性は必須属性なので、省略しないほうが望ましいでしょう。

表示サンプル

デフォルトではmax属性が１、min属性が０の状態になっているため、50%に指定したい時は、値に0.5と記述します。

表示サンプル

max属性とmin属性を好きな値に指定すると、値の入れ方も変化します。デフォルトでは、最小値が０、最大値が１だったので、50%を指定するときに0.5と記述しましたが、下記のように、最小値が０、最大値を100に定めて、50%を指定したい場合は、値が50になります。