HTML5でゲージを表示する方法-meterタグ-

記事内に広告が含まれています。

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

HTML5で進捗状況を表示する「プログレスバー(progress)」タグの使い方
よくWEBページなどでファイルをダウンロードしたり、何かの処理を待っている間に表示される「プログレスバー」ですが、HTM...

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

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

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

meterタグの主な属性

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タグの使い方

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

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

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

65/100

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

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

meterタグとprogressタグの違い

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

<progress>0%</progress>
<br>
<meter></meter>
progressは左右に動くアニメーションします。
meterは左右に動くアニメーションしません。

まとめ

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

HTMLタグ一覧
HTML5を中心としたHTMLタグ一覧です。

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

タイトルとURLをコピーしました