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

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

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

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

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

<meter>〜</meter>

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

<meter value="0">0%</meter>

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

スクリーンショット 2016-06-27 13.56.18

表示サンプル

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

<meter value="0.5">50% 
  </meter>
スクリーンショット 2016-06-27 14.25.27

表示サンプル

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

<meter min="0" max="100" value="50">50%</meter>

イベント

2017/12/05(火)
Design Thinking Square