HTML

HyperText Markup Language meter element.

meter 要素

　meter要素は、下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用する HTML5から新たに追加された要素です。例えば、ディスク使用量、検索結果の関連性、候補者の得票などです。測定値は、必須属性のvalue属性で指定します。

　value属性以外にも、下限・上限・低い・高い・最適とされる値を指定する属性が用意されています。これらの属性は必須属性ではありませんが、下限と上限を指定しない場合には範囲が0～1と見なされます。この場合、value属性で指定する値を0～1の範囲内にする必要があります。

　測定値は meter要素の value属性で指定しますが、meter要素をサポートしていないブラウザを使用しているユーザーにも分かるように、<meter>～</meter> の中にも、測定状況をテキストで記述することが推奨されています。

　尚、meter要素は、進行状況を示すのに使用するべきではありません。そのような目的には progress要素を使用してください。また、最大値が分かっていない場合の体重や身長など、範囲がはっきりしない値に meter要素を使用するのも誤りです。

meter 要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」

Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」

ラベル付け可能コンテンツ

Content model 「コンテンツ･モデル」

Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

利用可能な場所

フレージング・コンテンツ。ただし他の meter要素の子孫要素として配置してはならない。

タグの省略

不可。開始と終了タグの両方が必要。

Attribute 「属性」

value

　測定された実際の値。

　min属性と max属性が指定されている場合、これらの表す範囲内に収まる値でなくてはなりません。この value属性が未定義、あるいは不正な値であった場合は、その値は 0 となります。指定されている値が min属性と max属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。

注意: value属性の値が 0 を下限、1 を上限とするものでない限り、min属性および max属性で value属性の下限および上限を定義しなくてはなりません。

min

　範囲全体の下限の値。

　max属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は 0 となります。

max

　範囲全体の上限の値。

　min属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は 1 となります。

low

　「低い」とされる境界（範囲全体の上限値）。

　属性値は、min属性の値より大きく、かつ high属性および max属性の値より小さいものでなくてはなりません（※これらが定義されている場合）。low属性が未定義、もしくはその値が min属性の値より小さい場合、low属性の値は最小値と同じです。

high

　「高い」とされる境界（範囲全体の下限値）。

　属性値は、max属性の値より小さく、かつ low属性や min属性の値より大きいものでなくてはなりません（※これらが定義されている場合）。high属性が未定義、もしくはその値が max属性の値より大きい場合、high属性の値は最大値と同じです。

optimum

　「最適」とされる数値の範囲を表します。

　min属性と max属性によって定義される範囲内の値でなくてはなりません。low属性と high属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が min属性と low属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザは optimum属性の値以下であるかどうかでメーターのバーの色を変更することがあります。

form

　meter要素と関連付ける form要素（フォームオーナー）です。この属性の値は同じ文書内の form要素の id である必要があります。この属性が設定されていなかった場合、その meter要素の祖先に form要素があれば、それに関連付けられます。この属性は meter要素がフォーム関連要素として使用されている場合、例えば対応する <input type="number"> の範囲を表示するようなものでのみ使用されます。

グローバル属性

DOMインターフェイス

HTMLMeterElement(en-US)

Example of use

　以下のサンプルでは、３つの meter要素が使用されています。それぞれ、value属性で指定されている数値は異なりますが、いずれも全体の3/4であることを示しています。

<p>
残りは
<meter value="6" max="8">全８個中６個</meter>
です。<br>
割合では
<meter value="75" min="0" max="100">七割五分</meter>
となります。<br>
グラフでもご確認いただけます。<br>
<meter value="0.75"><img alt="75%" src="images/graph75.png"></meter>
</p>