meter要素

meter要素は、使用料や得票数など、特定の範囲内の計測を表す要素。

カテゴリー フロー・コンテンツフレージング・コンテンツ、パルパブル・コンテンツ、ラベル付け可能フォーム関連要素
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツ。 ただし、meter要素を子孫要素に持つことはできない。
属性 グローバル属性
必須属性: value属性
任意属性: min属性max属性low属性high属性optimum属性
ブラウザ対応

構文

<meter value="実際値"></meter>

value属性だけを指定

<meter value="実際値"></meter>

min属性max属性も指定しない場合、value属性には、0から1までの実際の数値(浮動小数点数)を指定する。

value属性、min属性、max属性を指定

<meter value="実際値" min="最小値" max="最大値"></meter>

min属性max属性を指定した場合、value属性には、min属性に指定した最小値から、max属性に指定した最大値まで範囲の、実際の数値を指定する。

value属性、low属性、high属性を指定

<meter value="実際値" low="低い範囲との境界" high="高い範囲との境界"></meter>

value属性の実際値が、low属性に指定した低い範囲との境界を示す数値を下回ると低いと判定する。

value属性の実際値が、high属性に指定した高い範囲との境界を示す数値を上回ると高いと判定する。

value属性、low属性、high属性、optimum属性を指定

<meter value="実際値" low="低い範囲との境界" high="高い範囲との境界" optimum="最適点"></meter>

low属性(低い範囲)や、high属性(高い範囲)を設定し、2つもしくは3つの範囲に分けた場合、optimum属性に指定した最適点を含む範囲が、最適な範囲となる。

代替コンテンツ

<meter value="実際値">代替コンテンツ</meter>

meter要素で括った内容は、meter要素に未対応のブラウザのための代替コンテンツとなる。

要点

  • meter要素は、使用料や得票数など、特定の範囲内の計測を表す要素である。
  • JavaScriptなどのプログラムと共に使うことが多い。
  • meter要素は、HTML5にて新たに導入された要素である。
  • 進捗度を表す場合は、progress要素を使う。

属性

必須属性

属性 説明
value属性 実際値を指定する属性。

任意属性

属性 説明
min属性 最小値を指定する属性。
max属性 最大値を指定する属性。
low属性 低い範囲との境界を指定する属性。
high属性 高い範囲との境界を指定する属性。
optimum属性 最適点(最適である値)を指定する属性。

サンプルコード

value属性だけを指定

<meter value="0.5">0.5</meter>

最小値と最大値を設定

<meter value="50" min="0" max="100">50/100</meter>

低い範囲を設定

<meter value="50" min="0" max="100" low="20">50/100</meter>

高い範囲を設定

<meter value="50" min="0" max="100" high="80">50/100</meter>

低い範囲と高い範囲を設定

<meter value="50" min="0" max="100" low="20" high="80">50/100</meter>

サンプル

HTMLソースコード

<p>
	0~1の範囲: 
	<meter value="0.5">0.5</meter>
</p>
<p>
	0~500の範囲(実際値は50): 
	<meter value="50" min="0" max="500">50/500</meter>
</p>
<p>
	0~500の範囲(実際値は250): 
	<meter value="250" min="0" max="500">250/500</meter>
</p>
<p>
	0~500の範囲(実際値は450): 
	<meter value="450" min="0" max="500">450/500</meter>
</p>
<p>
	0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は50):<br>
	<meter value="99" min="0" max="500" low="100" high="400" optimum="250">50/500</meter>
</p>
<p>
	0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は250):<br>
	<meter value="250" min="0" max="500" low="100" high="400" optimum="250">250/500</meter>
</p>
<p>
	0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は450):<br>
	<meter value="401" min="0" max="500" low="100" high="400" optimum="250">450/500</meter>
</p>

実際の表示

0~1の範囲: 0.5

0~500の範囲(実際値は50): 50/500

0~500の範囲(実際値は250): 250/500

0~500の範囲(実際値は450): 450/500

0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は50):
50/500

0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は250):
250/500

0~500の範囲のうち、99以下を低い範囲、401以上を高い範囲に設定(実際値は450):
450/500