<meter value="">～</meter>で規定範囲内の容量を示すこと ができます。ハードディスクの容量など全体に対する割合を表示できます。 meterタグには以下の属性を指定できます。

■ 最小値～最大値

下の例では1番目は最小値0～最大値100までの範囲で50の値を表示しています。 2番目はmax、min属性の指定がないので0～1の範囲で0.5の位置が表示されています。

【ブラウザ表示】

0100

01

<p>0<meter value="50" min="0" max="100"></meter>100</p>
<p>0<meter value="0.5"></meter>1</p>

■ 低い値～高い値

下の例では1番目は最小値0～最大値1までの範囲で低い値が0.2、高い値が0.8で指定してあり 0.9の位置で表示しています。

2番目は0～100までの範囲で低い値が10、高い値が80で指定してあり60の位置が最適値として 表示されているため70は緑色になっています。

3番目は0～100までの範囲で低い値が10、高い値が80で指定してあり60の位置が最適値として 表示されているため5は黄色になっています。

4番目は0～100までの範囲で低い値が10、高い値が80で指定してあり95の位置が最適値として 表示されているため90は高い領域80～最適値の95の間に位置するため緑色になっています。

【ブラウザ表示】

01

0100

0100

0100

<p>0<meter value="0.9" low="0.2" high="0.8"></meter>1</p>
<p>0<meter value="70" low="10" high="80" min="0" max="100" optimum="60"></meter>100</p>
<p>0<meter value="5" low="10" high="80" min="0" max="100" optimum="60"></meter>100</p>
<p>0<meter value="90" low="10" high="80" min="0" max="100" optimum="95"></meter>100</p>

■ その他の項目

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧