<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.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

<meter> は HTML の要素で、既知の範囲内のスカラー値、または小数値を表します。

試してみましょう

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

属性

他のすべての要素と同様に、この要素にはグローバル属性があります。

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

html

<p>オーブンの温度: <meter min="200" max="500" value="350">350 度</meter></p>

結果

「高」の範囲と「低」の範囲の使用例

この例では min 属性が省略されています。よって、下限値は 0 となっています。

HTML

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`meter`
`high`
`low`
`max`
`min`
`optimum`
`value`

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support

HTML

結果

HTML

結果

Legend