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

コンテンツカテゴリ フローコンテンツ記述コンテンツ、ラベル付け可能コンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ。ただし他の <meter> 要素の子孫要素として配置してはならない。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール なし
DOM インターフェイス HTMLMeterElement

属性

他のすべての要素と同様に、この要素はグローバル属性を持ちます。

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 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば optinum 属性の値が min 属性と low 属性の間のいずれかである場合、「低」の範囲が最適な数値となります。
form
meter 要素の属するフォーム (form owner) の id を指定します。例えばフォームの input 要素 (<input type="number" />) の範囲を表す用途で meter 要素を用いている場合、このフォームの id を指定します。対象がフォーム関連要素である場合にのみこの属性を使用可能です。meter 要素が関連するフォームの子孫要素として配置されているのなら、そのメーターは自動的にそのフォームに属するものとなり、この属性は省略可能です。

シンプルな例

HTML コンテンツ

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

結果

Google Chrome での表示結果は以下のようになります。

meter1.png

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

この例では、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 の結果は次のように見えます。

meter2.png

仕様書

仕様書 状態 備考
HTML Living Standard
<meter> の定義
現行の標準  
HTML5
<meter> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
formChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
highChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
lowChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
maxChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
minChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
optimumChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?
valueChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 16IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, yyss, ethertank
最終更新者: mfuji09,