＜meter要素＞ - 既知の範囲内の測定量

公開日: 2017/02/09

meter要素は、既知の範囲内の測定量を表す要素です。上限、下限が判明していない範囲の測定量を表現することはできません。テストの点数やディスクの容量など、様々な測定値を表現できます。

概要

名前

meter

カテゴリー

Flow content

Phrasing content

Palpable content

Labelable element

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。ただし、別のmeter要素の先祖になってはいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLMeterElement

デフォルトのスタイル

meter {
	-webkit-appearance: meter;
	box-sizing: border-box;
	display: inline-block;
	height: 1em;
	width: 5em;
	vertical-align: -0.2em;
	-webkit-user-modify: read-only;
	-webkit-writing-mode: horizontal-tb;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-meter-element

属性

value

測定値。

min

下限値。省略した場合、0を指定したのと同じ扱いになる。

max

上限値。省略した場合、1.0を指定したのと同じ扱いになる。

low

低の領域の上限値。省略可能。max属性、high属性よりも低い値を指定すること。min属性より低い場合、min属性と同じ値だと解釈される。

high

高の領域の下限値。省略可能。min属性、low属性よりも高い値を指定すること。max属性より高い場合、max属性と同じ値だと解釈される。

optimum

最適値。省略した場合、min属性とmax属性の中間値を指定したのと同じ扱いになる。min属性より低い場合はmin属性、max属性より高い場合はmax属性と同じ値だと解釈される。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

meter要素は測定量を表す要素です。下限、または上限が決まっていないものを扱うことはできません。下限値をmin属性、上限値をmax属性、そして測定値をvalue属性で指定しましょう。min属性を省略した場合は0が下限値、max属性を省略した場合は1.0が上限値と設定される点にご注意下さい。value属性は下限と上限の間で指定します。

HTML

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

meter要素に対応していません。

meter要素に対応してないブラウザはゲージを表示できません。ゲージを表示できない場合、代わりにmeter要素内のコンテンツが表示されます。代替となる表示、または注意書きなどを追加しておきましょう。

HTML

<!-- ゲージの代わりに値を表示 -->
<meter value="0.5">0.5</meter>

<!-- ゲージの代わりに注意書きを表示 -->
<meter value="0.5">ゲージの表示に対応していません…。</meter>

<!-- 非対応なら何も表示されなくていい -->
<meter value="0.5"></meter>

3種類の領域

meter要素の測定値が良い値なのか、それとも悪い値なのか、という情報を追加することができます。例えば、100点満点のテストでは、0点は悪い点、100点は良い点ですよね。low属性とhigh属性を利用して、「低」「中」「高」の3つの領域を作ることができます。

例えば下記は、0〜60点を「低」、80〜100点を「高」の領域に設定した例です。61〜79点が「中」の領域ということになります。領域を設定した場合、一般的なブラウザでは測定値によってゲージの色が変わります。

HTML

<meter
	min="0"
	low="60"
	high="80"
	max="100"
	value="65"
></meter>

meter要素に対応していません。

ゲージの色

領域を設定した場合、ブラウザは測定値によってゲージの色を振り分けます。この振り分けはどのように行なわれているのかを説明します。まず、色は下記の3段階で分けられます。

最適な色: 最適な領域と、同じ領域に測定値がある。
惜しい色: 最適な領域の、隣の領域に測定値がある。
ダメな色: 最適な領域にも、その隣の領域にも、測定値がない。

最適な領域とは何でしょうか。ここで登場するのが、optimum属性です。この属性は最適な値を指定するための属性です。この属性値がある領域が、最適な領域となります。下記の例でその性質を確認して下さい。

HTML

<!-- 低の領域(0〜60)が最適な領域となる -->
<meter
	value="65"
	min="0" low="60" high="80" max="100"
	optimum="40"
></meter>

<!-- 高の領域(80〜100)が最適な領域となる -->
<meter
	value="65"
	min="0" low="60" high="80" max="100"
	optimum="90"
></meter>

<!-- 中の領域(61〜79)が最適な領域となる -->
<meter
	value="65"
	min="0" low="60" high="80" max="100"
	optimum="70"
></meter>

注意しなければいけないのは、optimum属性を省略した時です。省略時はmin属性とmax属性の中間値が、暗にoptimum属性値に設定されます。そのため、下記の例では50点が最適な点となり、それと同時に「低」が最適な領域と設定されてしまいます。

HTML

<!-- 省略したからoptimum=50に設定され、低(0〜60)が最適な領域となる -->
<meter
	value="100"
	min="0" low="60" high="80" max="100"
></meter>

そのため、100点満点の測定値(高の領域)は、最適な領域(低の領域)にはなく、かつ、その隣の領域にもないため、ダメな領域を表す色になってしまうでしょう。100点満点のテストを想定している場合、これは意図した色ではないはずです。

meter要素に対応していません。

optimum属性に100を指定することで、修正してみましょう。想定した色になったでしょうか？

HTML

<!-- 高の領域(80〜100点)が、最適な領域となる -->
<meter
	value="100"
	optimum="100"
	min="0" low="60" high="80" max="100"
></meter>

meter要素に対応していません。

一応、惜しい領域であることを表す色も確認しておきましょう。このように、low属性とhigh属性で調整できる3つの領域を意識することで、ゲージの色を振り分けることができます。

HTML

<!-- 中の領域(61〜79点)が、最適な領域となる -->
<meter
	value="100"
	optimum="75"
	min="0" low="60" high="80" max="100"
></meter>

meter要素に対応していません。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜meter要素＞ - 既知の範囲内の測定量</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/meter/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>meter要素は、下限と上限が判明している範囲の、測定量を表す要素です。</p>

<h2>テストの成績(100点満点)</h2>
<p>75〜90点が一般的な点数です。</p>
<p>山田: 87点 <meter min="0" max="100" low="75" high="90" value="87" optimum="100">B</meter></p>
<p>鈴木: 45点 <meter min="0" max="100" low="75" high="90" value="45" optimum="100">D</meter></p>
<p>田中: 92点 <meter min="0" max="100" low="75" high="90" value="92" optimum="100">A</meter></p>

<h2>カラーコード</h2>
<p>紫のカラーコードです。</p>
<p>R: 128 <meter min="0" max="255" value="128"></meter></p>
<p>G: 0 <meter min="0" max="255" value="0"></meter></p>
<p>B: 128 <meter min="0" max="255" value="128"></meter></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/662/"> <meta charset="utf-8"> <title>【デモ】＜meter要素＞ - 既知の範囲内の測定量</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/meter/"> </head> <body>

<p>meter要素は、下限と上限が判明している範囲の、測定量を表す要素です。</p> <h2>テストの成績(100点満点)</h2> <p>75〜90点が一般的な点数です。</p> <p>山田: 87点 <meter min="0" max="100" low="75" high="90" value="87" optimum="100">B</meter></p> <p>鈴木: 45点 <meter min="0" max="100" low="75" high="90" value="45" optimum="100">D</meter></p> <p>田中: 92点 <meter min="0" max="100" low="75" high="90" value="92" optimum="100">A</meter></p> <h2>カラーコード</h2> <p>紫のカラーコードです。</p> <p>R: 128 <meter min="0" max="255" value="128"></meter></p> <p>G: 0 <meter min="0" max="255" value="0"></meter></p> <p>B: 128 <meter min="0" max="255" value="128"></meter></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>