<meter>タグは、下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用します。
例えば、ディスク使用量、検索結果の関連性、候補者の得票などです。測定値は、必須属性のvalue属性で指定します。
value属性以外にも、下限・上限・低い・高い・最適とされる値を指定する属性が用意されています。これらの属性は必須属性ではありませんが、下限と上限を指定しない場合には範囲が0～1と見なされます。
この場合、value属性で指定する値を0～1の範囲内にする必要があります。
測定値は<meter>タグのvalue属性で指定しますが、<meter>タグをサポートしていないブラウザを使用しているユーザーにも分かるように、
<meter>～</meter>の中にも、測定状況をテキストで記述することが推奨されています。
尚、<meter>タグは、進行状況を示すのに使用するべきではありません。
そのような目的には<progress>タグを使用してください。また、最大値が分かっていない場合の体重や身長など、範囲がはっきりしない値に<meter>タグを使用するのも誤りです。
meter要素は、HTML5から新たに追加された要素です。
以下のサンプルでは、３つの<meter>タグが使用されています。
それぞれ、value属性で指定されている数値は異なりますが、いずれも全体の3/4であることを示しています。
<p>
残りは
<meter value=”6″ max=”8″>全８個中６個</meter>
です。
割合では
<meter value=”75″ min=”0″ max=”100″>七割五分</meter>
となります。
グラフでもご確認いただけます。
<meter value=”0.75″><img alt=”75%” src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/graph75.png”></meter>
</p>
残りは
です。
割合では
となります。
グラフでもご確認いただけます。
