★HTML Living Standard リファレンス

<meter> …… 既知の範囲内の測定値を表す
graph75.png

<meter>タグは、既知の範囲内の測定値を表す際に使用します。

meter要素は、既知の範囲内の数量の測定値、または、分数値を表します。
例えば、ディスク使用量、クエリ結果の関連性、特定の候補者を選択した投票人口の割合などです。

meter要素は、任意の範囲の測定値を表すものではありません。
例えば、体重や身長のように既知の最大値がない値を表すのにmeter要素を使用するのは誤りです。

また、meter要素は、タスクの進行状況を表すものではありません。
このような目的には、progress要素のほうが適切でしょう。

meter要素の内容には、テキストなどでゲージの状態の説明を含めることが推奨されています。
これにより、meter要素をサポートしていない旧いブラウザのユーザーにもゲージの状態を伝えられるようになります。

■使用例

以下のサンプルは、ディスク容量に対する使用状況をmeter要素で表しています。
meter要素をサポートしていないブラウザを利用しているユーザーに向けて、
要素内容としてテキストによる説明を記述しています。

<p>
 ディスクの使用状況:
 <meter min=0 value=170261928 max=233257824>容量233257824バイトのうち、170261928バイト使用</meter>
</p>

■属性

meter要素を決定する6つの属性

value属性は、ゲージに測定値として表示する値を指定します。
meter要素には、value属性を指定する必要があります。
value属性に無効な値を指定すると、0に設定されます。

min属性は、範囲の下限（最小値）を指定します。
min属性値が指定されている場合はその値が最小値となり、それ以外の場合は0が最小値となります。

max属性は、範囲の上限（最大値）を指定します。
max属性値が指定されている場合はその値が最大値となり、それ以外の場合は1.0が最大値となります。

low属性は「低」とみなされる部分を指定します。
high属性は「高」とみなされる部分を指定します。
optimum属性は「最適」なゲージ位置を指定します。

6つの属性の使用ルール

min属性値とmax属性値を指定しない場合、その範囲は0から1とみなされます。

low属性、high属性、optimum属性は、ゲージの範囲を「低」「中」「高」に分けて「最適」な位置を示すために使用します。

low属性、high属性、optimum属性を指定する場合、
low属性値、high属性値、optimum属性値は、min属性値以上max属性値以下である必要があります。

optimum属性値がlow属性値よりも低い場合、値が低いほうが良いことを示します。
optimum属性値がhigh属性値よりも高い場合、値が高いほうが良いことを示します。
optimum属性値がlow属性値とhigh属性値の中間にある場合、値が高過ぎても低過ぎても良くないことを示します。

■使用例

以下のサンプルは、いずれも75%（4分の3）を表しています。

<p>使用量:<meter value=6 max=8>8​​ブロック中、6ブロックを使用</meter></p>
<p>投票率:<meter value=0.75></meter></p>
<p>満足度:<meter min="0" max="100" value="75"></meter></p>

■使用例

以下のサンプルは、meter要素のtitle属性を使用して、単位を記載しています。
meter要素で単位を指定する明示的な方法はありませんが、
このような目的には自由形式のテキストのtitle属性を使用できます。

<dl>
 <dt>直径: <dd> <meter min=0 max=20 value=12 title="センチメートル">12cm</meter>
 <dt>高さ: <dd> <meter min=0 max=10 value=2 title="センチメートル">2cm</meter>
</dl>

■使用例

以下のサンプルは、meter要素の誤った使い方です。
meter要素の範囲を指定しない場合には最大値がデフォルトの1に設定されますが、
どちらのゲージも最大値であるかのように表示されてしまっています。
（ゲージの役割を果たしていません。）

<!-- 誤った使い方（ゲージの役割を果たしていません） -->
<p>
 この丸皿は、
 直径<meter value=12>12cm</meter>、
 高さ<meter value=2>2cm</meter>です。
</p>

■使用例

以下のサンプルは、上記使用例の修正案です。
meter要素にmin属性とmax属性を指定して範囲を定義することで、
他の丸皿のサイズと比較したコンテキストで寸法を提供しています。

<!-- 上記使用例の修正案 -->
<p>この丸皿は、直径12cm、高さ2cmです。</p>
<dl>
 <dt>直径: <dd> <meter min=0 max=20 value=12>12cm</meter>
 <dt>高さ: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

■関連項目