ITコラム

プログラミングノウハウ

2017.03.02

#HTML入門

HTML【フォーム】13～数量や割合のゲージ（meter）

HTML5からの新要素にmeter要素があります。meter要素は、特定の量（範囲）に対する現在量（位置）を表示する要素です。
今回は、このmeter要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

１．meter要素
２．ゲージの作成
３．optimum属性で最適領域を決定

１．meter要素

meter要素は、特定の範囲内で現在の分量を表示する要素です。
全体に対する割合を、位置で示します。
output要素と同じく、データの送信は行わず、ただ表示することが目的の要素です。

meter要素で作られる部品は、次のように表示されます。
現在量を示している部分をゲージと言います。
30%

同じような表示ですが、ダウンロードを行う時等、進捗状況を表示する場合は、その目的のためのprogress要素があるので、meter要素ではなくprogress要素で作成します。

また、meter要素は、確定している全体量に対する現在量を表示するための要素なので、全体量（範囲）が定まっていない場合には使えません。

使用する要素　：　<meter>～</meter>

meter要素の属性	value属性	指定が必須現在の位置を指定
	min属性	最小値を指定
	max属性	最大値を指定
	low属性	低い値の境界点を指定
	high属性	高い値の境界点を指定
	optimum属性	最適な値を指定
	form属性	親のform要素のid名を呼び出して関連付ける
	グローバル属性	id属性、class属性、title属性、style属性など

▲目次へ戻る

２．ゲージの作成

●何の属性も指定しない場合、次のような表示になります。

ゲージの表示がなく、バーだけが表示されました。

上の表示に対するhtmlコードは、以下の通りです。

<meter></meter>

value属性はデフォルト値が0ですが、value属性は指定が必須ですので、実際には、value値が0の場合でも略さずに指定した方が良いです。
　
　
●value属性のみを指定して、ゲージを作成します。

30%

上の表示に対するhtmlコードは、以下の通りです。

<meter value="0.3">30%</meter>

meter要素が未対応のブラウザ対策として、<meter>と</meter>の間に表示したい現在量（位置）がわかるテキストを書いています。
meter要素に対応しているブラウザでは、このテキストは表示されません。

min属性のデフォルト値が0、max属性のデフォルト値が1のため、value=”0.3″という指定の仕方をしています。

　
　
●min属性とmax属性を指定して、ゲージを作成します。

40%

上の表示に対するhtmlコードは、以下の通りです。

<meter min="0" max="100" value="40">40%</meter>

min属性のデフォルト値は0なので、上の例では、min属性を指定しなくても結果は同じになります。

　
　
●属性にはマイナスの数値を指定することもできます。

-50%

上の表示に対するhtmlコードは、以下の通りです。

<meter min="-100" max="100" value="-50">-50%</meter>

　
　
●low属性、high属性、optimum属性で低領域、高領域、最適領域を指定します。

low属性は、低い領域の上限を指定します。
high属性は、高い領域の下限を指定します。
optimum属性は、最適な領域のある１点を指定します。

low属性のデフォルト値は、min属性値と同じです。
high属性のデフォルト値は、max属性値と同じです。
optimum属性のデフォルト値は、minからmaxまでの範囲のど真ん中です。
value属性以外の属性を指定しない場合は、それぞれのデフォルト値で、minは0、maxは1、lowは0、highは1、optimumは0.5、になります。

optimum属性は、ピンポイントで１点を指定しますが、ブラウザでは１点がある領域全体が表示されます。
optimum属性がある領域は、最適領域（optimum）として扱われ、ゲージの色はグリーンで表示されます。

この最適領域の隣の領域は、準最適領域（suboptimal）として、ゲージの色はイエローで表示されます。

このまた隣の最適領域から遠い領域は、非最適領域（less good）として、ゲージの色はレッドで表示されます。

●low属性とhigh属性を指定しないと、次のような表示になります。

10%
50%
90%

htmlコードは、以下の通りです。

<meter max="100" value="10">10%</meter>
<meter max="100" value="50">50%</meter>
<meter max="100" value="90">90%</meter>

上の例では、lowが0、highが100になるため、ゲージ全体が１つの領域になっています（領域が分けられていません）。
この場合optimumは50なので、この50がある最適領域は全体ということになり、３本とも全部最適領域のグリーンで表示されました。

●low属性を20、high属性を80に指定すると、次のような表示になります。

10%
50%
90%

htmlコードは、以下の通りです。

<meter max="100" low="20" high="80" value="10">10%</meter>
<meter max="100" low="20" high="80" value="50">50%</meter>
<meter max="100" low="20" high="80" value="90">90%</meter>

lowとhighで領域が３つに分けられました。
この場合optimumは50なので、この50がある最適領域はグリーンで表示されました。
その両隣の、低い領域（0～20）と高い領域（80～100）は準最適領域になったのでイエローで表示されました。

●high属性は80のまま、low属性を60に指定すると、次のような表示になります。

10%
20%
50%
80%
90%

htmlコードは、以下の通りです。

<meter max="100" low="60" high="80" value="10">10%</meter>
<meter max="100" low="60" high="80" value="20">20%</meter>
<meter max="100" low="60" high="80" value="50">50%</meter>
<meter max="100" low="60" high="80" value="80">80%</meter>
<meter max="100" low="60" high="80" value="90">90%</meter>

optimumはデフォルト値の50で、この１点がある領域が最適領域なので、低い領域（1～60）が最適領域になりました。
その隣の中間の領域が準最適領域でイエローで、そのまた隣の高い領域は非最適領域になったのでレッドで表示されました。

▲目次へ戻る

３．optimum属性で最適領域を決定

optimum属性は、low属性値とhigh属性値の範囲の真ん中の１点がデフォルト値となります。
そして、optimum属性値、low属性値、high属性値をそれぞれ指定すると、グリーン、イエロー、レッドで表示される領域を自由に決めることができます。

meter要素を使って「何を表示させるのか」によって、「どこが最適な領域なのか」も変わります。
ディスクの使用量等は少ない方が最適領域になりそうですし、投票率等は多い方が最適領域になりそうです。
このように、最適領域を自由に指定するためにoptimum属性があります。

●min=0、max=100、low=20、high=80として、optimum属性を90に指定すると、次のような表示になります。

10%
20%
50%
80%
90%
optimum属性で指定した90がある領域が最適領域となり、そこから離れるほど、イエロー、レッドと色が変わって表示されました。

htmlコードは、以下の通りです。

<meter max="100" low="20" high="80" optimum="90" value="10">10%</meter>
<meter max="100" low="20" high="80" optimum="90" value="20">20%</meter>
<meter max="100" low="20" high="80" optimum="90" value="50">50%</meter>
<meter max="100" low="20" high="80" optimum="90" value="80">80%</meter>
<meter max="100" low="20" high="80" optimum="90" value="90">90%</meter>

●min=0、max=100、low=20、high=80として、optimum属性を10に指定すると、次のような表示になります。

10%
20%
50%
80%
90%
optimum属性で指定した10がある領域が最適領域となり、そこから離れるほど、イエロー、レッドと色が変わって表示されました。

htmlコードは、以下の通りです。

<meter max="100" low="20" high="80" optimum="10" value="10">10%</meter>
<meter max="100" low="20" high="80" optimum="10" value="20">20%</meter>
<meter max="100" low="20" high="80" optimum="10" value="50">50%</meter>
<meter max="100" low="20" high="80" optimum="10" value="80">80%</meter>
<meter max="100" low="20" high="80" optimum="10" value="90">90%</meter>

●携帯電話の電池残量を表示してみました。

AM6:00～AM9:00：90%　90%
AM9:00～PM0:00：70%　70%
PM0:00～PM3:00：50%　50%
PM3:00～PM6:00：30%　30%
PM6:00～PM9:00：20%　20%

htmlコードは、以下の通りです。

AM6:00～AM9:00：90%　<meter max="100" low="30" high="70" optimum="80" value="90">90%</meter>
AM9:00～PM0:00：70%　<meter max="100" low="30" high="70" optimum="80" value="70">70%</meter>
PM0:00～PM3:00：50%　<meter max="100" low="30" high="70" optimum="80" value="50">50%</meter>
PM3:00～PM6:00：30%　<meter max="100" low="30" high="70" optimum="80" value="30">30%</meter>
PM6:00～PM9:00：20%　<meter max="100" low="30" high="70" optimum="80" value="20">20%</meter>

▲目次へ戻る