HTML5タグ虎の巻

meterタグ

HTML5

meterは、メーターを表示するタグです。

解説

meterタグは、メーターは割合を視覚的に表すのに使用します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
フレージング・コンテンツ

属性

meterタグには以下の属性が指定できます。

【属性】
属性説明
value値を指定する
(例)value="0.5"
min下限値を指定する
(例)min="1"
 ※デフォルト値は0です
max上限値を指定する
(例)max="100"
 ※デフォルト値は1です
low低いとされる値
(例)low="20"
 ※この値をvalue値が下回ると色が変わります。
high高いとされる値
(例)high="80"
 ※この値をvalue値が上回ると色が変わります。
optimum最適とされる値
(例)optimum="60"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

80%を表すメーターを表示する

<meter value="0.8"></meter>

30%を表すメーターを表示する

<meter value="30" min="0" max="100"></meter>

high値="80"で、value値="90"を表すメーターを表示する

<meter value="90" min="0" max="100" low="20" high="80"></meter>

highとした値を上回った場合はメーターの色が黄色(Chromeの場合)になります。

low値="30"で、value値="10"を表すメーターを表示する

<meter value="20" min="0" max="100" low="20" high="80"></meter>

lowとした値を下回った場合はメーターの色が黄色(Chromeの場合)になります。

備考

  • meterはHTML5で新規に追加された要素です。
  • 要素内に文字列を指定した場合は、meterタグが未対応の場合のみ表示されます。
     (例)<meter>未対応です。</meter> → meterタグ未対応ブラウザの場合「未対応です。」という文字が表示される