<meter> - メーター

トップ > HTMLリファレンス > <meter>

概要

形式
<meter>~</meter>
サポート
LS / H5 / Ch8 / Fx16 / Ed13 / Op11 / Sa5.2
カテゴリ
フローコンテンツ, フレージングコンテンツ, ラベラブル, パルパブルコンテンツ
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
フレージングコンテンツ (ただし、meter要素を子孫にもつことはできない)
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
value
min
max
low
high
optimum

説明

meter は HTML5 で追加された要素で、ディスク使用量などの測定値を示します。最大値を max とした現在の値 value を棒グラフなどで表します。

minmax の領域は、lowhigh により、「低い領域」、「中間の領域」、「高い領域」に分けられ、「中間の領域」は緑、「低い領域」と「高い領域」は黄色で表示されます。optimum が指定され、その値が「高い領域」にある場合、「高い領域」が「最適な領域」とみなされ、「高い領域」が緑、「中間の領域」が黄色、「低い領域」が赤色で表示されます。逆に、optimum が指定され、その値が「低い領域」にある場合、「低い領域」が「最適な領域」とみなされ、「低い領域」が緑、「中間の領域」が黄色、「高い領域」が赤色で表示されます。緑、黄色、赤などの表現方法は、ブラウザによって異なるかもしれません。

<meter>~</meter> の間には、<meter> に対応していないブラウザのためのメッセージや代替内容などを記述します。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
max=n
LS/H5
棒グラフの最大値を指定します。省略時は 1 とみなされます。
min=n
LS/H5
棒グラフの最小値を指定します。省略時は 0 とみなされます。
value=n
LS/H5
棒グラフ上の現在の値を指定します。0.1 などの小数も利用可能です。
low=n
LS/H5
低いとみなす値を指定します。
high=n
LS/H5
高いとみなす値を指定します。
optimum=n
LS/H5
最適とみなす値を指定します。

使用例

min は最小値、max は最大値、value は現在の値を示します。

HTML
<meter min=0 max=100 value=70>70 / 100</meter>
表示
70 / 100

low, high を指定した場合、min より低い領域、max より高い領域は黄色で表示されます。

HTML
<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>
表示
70 / 100 70 / 100 70 / 100

optimum=90 を指定すると、90 が正常値とみなされ、高い領域(正常域)が緑、中間の領域(正常域からひとつ下)が黄色、低い領域(正常域から2つ下)が赤で表示されます。

HTML
<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>
表示
70 / 100 70 / 100 70 / 100

optimum=10 を指定すると、10 が正常値とみなされ、低い領域(正常域)が緑、中間の領域(正常域からひとつ上)が黄色、高い領域(正常域から2つ上)が赤で表示されます。

HTML
<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>
表示
70 / 100 70 / 100 70 / 100

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年12月17日
http://www.tohoho-web.com/html/progress.htm