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

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

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

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

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

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

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

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

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

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

他の3つの属性は、ゲージの範囲を「低」、「中」、「高」の部分に分割して「最適」な位置を示すために使用します。 low属性は「低」とみなされる部分、 high属性は「高」とみなされる部分、 optimum属性は「最適」なゲージ位置を指定します。

optimum属性で指定した「最適」値が「高」値よりも高い場合は、値が高いほど良いことを示します。 optimum属性で指定した「最適」値が「低」値よりも低い場合は、値が低いほど良いことを示します。 optimum属性で指定した「最適」値が中間にある場合は、高い値も低い値も良くないことを示します。

low属性、high属性、optimum属性を指定する場合、それらの値はmin値以上max値以下の範囲内である必要があります。 min値やmax値が指定されていない場合、範囲は0から1とみなされ、 low値、high値、optimum値はその範囲内にある必要があります。

■属性

■使用例

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

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

■使用例

以下のサンプルは、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>

■使用例

以下のサンプルは、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要素をサポートしていないブラウザを利用しているユーザーに向けて、 要素内容としてテキストによる説明を記述しています。

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

Sponsors