<meter>: HTML メーター要素
HTML の <meter>
要素は、既知の範囲内のスカラー値、または小数値を表します。
試してみましょう
属性
他のすべての要素と同様に、この要素はグローバル属性を持ちます。
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">
の範囲を表示するようなものでのみ使用されます。
例
シンプルな例
HTML
<p>オーブンの温度: <meter min="200" max="500"
value="350">350 degrees</meter></p>
結果
Google Chrome での表示結果は以下のようになります。
「高」の範囲と「低」の範囲の使用例
この例では min
属性が省略されています。よって、下限値は 0
となっています。
HTML
<p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
結果
Google Chrome では、 meter の結果は次のように見えます。
仕様書
Specification |
---|
HTML Standard # the-meter-element |
ブラウザーの互換性
BCD tables only load in the browser