トップページ  > HTML Living Standard  > <meter>

★HTML Living Standard リファレンス

<meter> …… 既知の範囲内の測定値を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

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

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

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

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

■使用例

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

HTMLソース

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

ブラウザ上の表示

ディスクの使用状況: 容量233257824バイトのうち、170261928バイト使用

■属性

value属性
要素の現在値を指定します。
min属性
範囲の下限を指定します。
max属性
範囲の上限を指定します。
low属性
低域の上限を指定します。
high属性
高域の下限を指定します。
optimum属性
ゲージの最適値を指定します。

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)を表しています。

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

使用量:8​​ブロック中、6ブロックを使用

投票率:75%

満足度:

■使用例

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

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

直径:
12cm
高さ:
2cm

■使用例

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

HTMLソース(誤)

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

ブラウザ上の表示

この丸皿は、 直径12cm、 高さ2cmです。

■使用例

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

HTMLソース(正)

<!-- 上記使用例の修正案 -->
<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>
↓↓↓

ブラウザ上の表示

この丸皿は、直径12cm、高さ2cmです。

直径:
12cm
高さ:
2cm

■関連項目

  • <progress> …… タスクの進行状況を表す
  • <meter> …… 既知の範囲内の測定値を表す
  • <output> …… 実行結果の出力を表す
  • <samp> …… コンピューターからの出力サンプルを表す
  • <data> …… 何らかのデータを表す
  • <time> …… 日付や時刻に関連するデータを表す
  • <mark> …… 参照目的で強調表示されたテキストを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ