meter要素は特定の範囲にある数値や割合を表す【HTML】

meter要素は、下限や上限があらかじめ決められている特定の範囲にある数値を表します。

たとえば、ディスク使用量だったり、候補者の得票、人口割合などです。

meter要素と似ている要素でprogress要素がありますが、『progress要素は作業の進捗状況を表す【HTML】』でも書いているように、progress要素は進捗状況を表す要素なので、ディスク使用量などを表す際にはmeter要素の方を使います。

progress要素と同じように、対応しているブラウザ環境では、メーターが表示されるのでわかりやすいですが、対応していない環境では表示されないので、代替コンテンツとなるテキストをmeter要素内に記述するようにしましょう。

meter要素で使える属性

meter要素では以下のような属性を指定できます。

• value（バリュー）
• min（ミニマム）・max（マックス）
• low（ロー）
• high（ハイ）
• optimum（オプティマム）

最小と最大の値、現在の値に加えて、低いと判断される値や高いと判断される値、最適とされる値なども指定が可能となっています。

value（バリュー）

value属性には現在の数値を指定します。

min（ミニマム）・max（マックス）

min属性とmax属性で値の最小値と最大値を決めます。

low（ロー）

low属性では、value属性で指定した数値が低いと判断される基準となる値を指定することができます。

high（ハイ）

high属性では、value属性で指定した数値が高いと判断される基準となる値を指定することができます。

optimum（オプティマム）

optimum属性では、value属性で指定した数値が最適だと判断される基準となる値を指定することができます。

以下、meter要素の使用例です。

2つのメーターの色が違うのが見てわかると思いますが、下のメーターはlow属性（値が低いと判断される基準）で指定した「20」よりもvalue属性で指定した数値が「16」と低いので、黄色くなっています。