<meter>: HTML メーター要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
<meter>
は HTML の要素で、既知の範囲内のスカラー値、または小数値を表します。
試してみましょう
属性
他のすべての要素と同様に、この要素にはグローバル属性があります。
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>
を明示的に設定するために使用されます。省略された場合は、<meter>
は祖先の<form>
要素、または存在すれば祖先の他の要素 (<fieldset>
など) のform
属性で関連付けられたフォームに関連付けられます。指定する場合、値は同じツリーにある<form>
のid
でなければなりません。
例
シンプルな例
HTML
<p>オーブンの温度: <meter min="200" max="500" value="350">350 度</meter></p>
結果
「高」の範囲と「低」の範囲の使用例
この例では min
属性が省略されています。よって、下限値は 0
となっています。
HTML
<p>
彼は試験で
<meter low="69" high="80" max="100" value="84">B</meter> を取りました。
</p>
結果
技術的な概要
コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, ラベル付け可能コンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 |
記述コンテンツ。ただし他の
<meter> 要素の子孫要素として配置してはならない。
|
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール |
meter
|
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLMeterElement |
仕様書
Specification |
---|
HTML # the-meter-element |
ブラウザーの互換性
BCD tables only load in the browser