HTML5でmeterタグを使ってゲージを表示する方法

HTML5では前回紹介したprogressタグと同じような機能を持ったmeterタグがあります。

meterはprogressタグと同様に横棒に指定した割合で中が塗られるタグで、Javascriptと併用してファイルのダウロードや、処理の進捗を視覚的に見せることができます。

meterタグでゲージを表示する

meterタグを利用するとゲージ（メーター）をWEBページ上に表示することができます。

meterタグの主な属性は以下ものです。

属性	意味
value	現在の値。 min属性とmax属性が指定されている場合はmin属性とmax属性の間に収まる値でなくてはなりません。
min	範囲の最小値。未設定の場合は0になります。max属性が設定されている場合は、それより小さい値でなくてはなりません。
max	範囲の最大値。未設定の場合は1になります。min属性が設定されている場合は、それより大きい値でなくてはなりません。
low	「低」とされる範囲全体の上限値。 min属性の値より大きく、かつhigh属性およびmax属性の値より小さいものでなくてはなりません。
high	「高」とされる範囲全体の下限値。 max属性の値より小さく、かつlow属性やmin属性の値より大きいものでなくてはなりません。
optimum	最適な数値の範囲。 min属性とmax属性によって定義される範囲内の値でなくてはなりません。
form	meter要素と関連付けるform要素 (フォームオーナー)｡属性の値は同じ文書内のformのidである必要があります。

meterタグを使ってゲージ（メーター）を表示するには「value（現在の値）」「min（範囲の最小値）」「max（範囲の最大値）」などを指定して使用します。

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

実際には以下のように表示されます

65/100

タグの間に書かれている「65/100」はHTMLフォールバックコンテンツです。

HTMLフォールバックコンテンツとは
指定したタグをサポートしていないブラウザで表示された際に描画される値のこと。

HTML5にはmeterタグとprogressタグと似たようなタグがありますが、meterタグは属性を指定しなければ、塗りつぶし部分は表示されないのに対して、progressタグは左右に動くアニメーションで表示されます。

<progress>0%</progress>
<br>
<meter></meter>

progressは左右に動くアニメーションします。

meterは左右に動くアニメーションしません。

HTML5でゲージを表示するにはmeterタグを利用すると簡単に表示することができます。

以上HTML5でmeterタグを使ってゲージを表示する方法でした。