meter 要素特定の範囲にある数値を表す

meter 要素は特定の範囲にある数値を表します。例えばディスクの使用量や人口割合などを表すことが可能です。対応するブラウザでは、ゲージなど、直観的な形式で表示されます。

ただし、meter 要素は、進捗を表す (プログレスバーなど) ために使うべきではありません。進捗を表す要素として、別途 progress 要素が定義されています。また、値の範囲が明確でない数値を表すことはできません。例えば最大値が定められていない数値を表すためにこの要素を使用することは適切ではありません。

meter 要素の内容は、対応していない環境への代替コンテンツとなります。

さらに詳細な説明を見る

サンプルソースを見る

meter 要素の仕様

カテゴリ
コンテンツモデル

ただし、meter 要素を子孫に持つことはできません

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLMeterElement : HTMLElement {
           attribute double value;
           attribute double min;
           attribute double max;
           attribute double low;
           attribute double high;
           attribute double optimum;
  readonly attribute NodeList labels;
};

詳細説明

meter 要素に指定可能な属性とその値は下記の通りです。

属性値 概要
value 属性(必須) 値を指定します。指定した値が現在の数値になります。指定できる数値は浮動小数点数ですが、max 属性値以下、min 属性値以上でなければなりません。
max 属性 値の最大値を指定します。指定できる数値は浮動小数点数ですが min 属性、および low 属性が指定されている場合はその値以上である必要があります。省略された場合の初期値は 「1」 です。
min 属性 値の最大値を指定します。指定できる数値は浮動小数点数ですが max 属性、および high 属性が指定されている場合はその値以下である必要があります。省略された場合の初期値は 「0」 です。
high 属性 その数値が高いと判断される閾値を指定します。指定できる数値は浮動小数点数ですが max 属性値以下、かつ min 属性、および low 属性が指定されている場合はその値以上である必要があります。
low 属性 その数値が低いと判断される閾値を指定します。指定できる数値は浮動小数点数ですが min 属性値以上、かつ max 属性、および high 属性が指定されている場合はその値以下である必要があります。
optimum 属性 その数値が最適だと判断される数値を指定します。指定できる数値は浮動小数点数ですが max 属性値以下、min 属性値以上である必要があります。

指定する値は、下記の不等式が成り立つようにしなければなりません。

  • min ≤ value ≤ max
  • min ≤ low ≤ max (もし low 属性が指定されている場合)
  • min ≤ high ≤ max (もし high 属性が指定されている場合)
  • min ≤ optimum ≤ max (もし optimum 属性が指定されている場合)
  • low ≤ high (もし low 属性と high 属性が同時に指定されている場合)

対応しているブラウザでは下記のように表示されます。

meter 要素の表示例

meter 要素のサンプルソース

<p>
 投票率: <meter value="67" min="0" max="100">67%</meter>
</p>
<p>
 ハードディスク使用率: <meter value="60" min="0" max="100" law="20" height="80">60%</meter>
</p>

W3C HTML5 仕様書

4.10.17 The meter element