Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<meter>

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

フォーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<meter>
6
13
16
6
18
10.3
HTML 属性
high
6
13
16
6
18
10.3
low
6
13
16
6
18
10.3
max

max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が存在していても、指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。
6
13
16
6
18
10.3
min

min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 (value) がこれより小さい場合、その要素は制約検証に失敗します。この値は、max 属性の値以下でなければなりません。
6
13
16
6
18
10.3
optimum
6
13
16
6
18
10.3
value
6
13
16
6
18
10.3
DOM API
HTMLMeterElement

HTML の meter 要素は HTMLMeterElement インターフェイスを公開します。これは（継承によって利用できる HTMLElement オブジェクトのインターフェイス以外に）meter 要素のレイアウトや表現を操作するためのプロパティやメソッドを提供します。
6
13
16
6
18
6
high

HTMLMeterElement インターフェースの high プロパティは、meter 要素の高さの境界を浮動小数点数で表します。要素の high 属性、または定義されていない場合は max の値が反映されます。highの値は、lowとmaxの値によってクランプされます。
6
13
16
6
18
6
labels

HTMLMeterElement.labels は読み取り専用プロパティで、この meter 要素に関連付けられている label 要素の NodeList を返します。
6
18
56
6
18
6
low

HTMLMeterElement インターフェースの low プロパティは、meter 要素の低さの境界を浮動小数点数で表します。要素の low 属性、または定義されていない場合は min の値が反映されます。low の値は min と max の値でクランプされます。
6
13
16
6
18
6
max

HTMLMeterElement インターフェースの max プロパティは、meter 要素の最大値を浮動小数点数で表します。要素の max 属性、または max が設定されていない場合は min 値、min も max も定義されていない場合は 1 を反映します。
6
13
16
6
18
6
min

HTMLMeterElement インターフェースの min プロパティは、meter 要素の最小値を浮動小数点数で表します。要素の min 属性が反映され、min が定義されていない場合は 0 になります。
6
13
16
6
18
6
optimum

HTMLMeterElement インターフェイスの optimum プロパティは、meter 要素の最適な境界を浮動小数点数で表します。これは、要素のoptimum属性、または定義されていない場合はmin値とmax値の中間値を反映します。optimumの値は、min値とmax値によってクランプされます。
6
13
16
6
18
6
value

HTMLMeterElement インターフェースの value プロパティは、meter 要素の現在の値を浮動小数点数で表します。これは、要素の value 属性を反映します。値が設定されていない場合は、HTMLMeterElement.min の値か 0 のどちらか大きい方になります。
6
13
16
6
18
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<label>Disk usage:
  <meter value="70" min="0" max="100" low="30" high="80" optimum="50">70%</meter>
</label>

ライブデモ

basic me-ta-

Meter element in. rangeinside. scol-value ge-jdisplay.

プレビュー全画面表示

value. settings

Low / high / optimum attribute in value. color in representationationation.

プレビュー全画面表示

practical me-ta-display

stre-j or skillevell. Display to me-ta- usage.

プレビュー全画面表示

実務での使いどころ

  • <meter> の活用

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

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク