<meter>
~</meter>
meter は HTML5 で追加された要素で、ディスク使用量などの測定値を示します。最小値を min、最大値を max とした現在の値 value を棒グラフで表します。
min
~ max
の領域は、low
と high
により「低領域」「中間領域」「高領域」に分けられます。「中間領域」は緑、「低領域」と「高領域」は黄色で表示されます。optimum
が指定され、その値が「高領域」にある場合、「高領域」が「最適な領域」とみなされ、「高領域」が緑、「中間領域」が黄色、「低領域」が赤色で表示されます。逆に、optimum
が指定され、その値が「低領域」にある場合、「低領域」が「最適な領域」とみなされ、「低領域」が緑、「中間領域」が黄色、「高領域」が赤色で表示されます。緑、黄色、赤などの表現方法は、ブラウザによって異なるかもしれません。
<meter>
~</meter>
の間には、<meter> に対応していないブラウザのためのメッセージや代替内容などを記述します。
min
は最小値、max
は最大値、value
は現在の値を示します。
<meter min=0 max=100 value=70>70 / 100</meter>
low
, high
を指定した場合、value
が low
より低い場合や high
より高い場合は黄色で表示されます。
<meter max=100 value=10 low=20 high=80>70 / 100</meter> <meter max=100 value=50 low=20 high=80>70 / 100</meter> <meter max=100 value=90 low=20 high=80>70 / 100</meter>
optimum
=90 を指定すると、90 が正常値とみなされ、高領域(正常域)が緑、中間領域(正常域からひとつ下)が黄色、低領域(正常域から2つ下)が赤で表示されます。
<meter max=100 value=10 low=20 high=80 optimum=90>70 / 100</meter> <meter max=100 value=50 low=20 high=80 optimum=90>70 / 100</meter> <meter max=100 value=90 low=20 high=80 optimum=90>70 / 100</meter>
optimum
=10 を指定すると、10 が正常値とみなされ、低領域(正常域)が緑、中間領域(正常域からひとつ上)が黄色、高領域(正常域から2つ上)が赤で表示されます。
<meter max=100 value=10 low=20 high=80 optimum=10>70 / 100</meter> <meter max=100 value=50 low=20 high=80 optimum=10>70 / 100</meter> <meter max=100 value=90 low=20 high=80 optimum=10>70 / 100</meter>