<meter> - メーター

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

• 概要
• 説明
• 属性
• 使用例
• リンク

概要

形式

<meter>～</meter>

サポート

https://caniuse.com/meter

カテゴリ

フローコンテンツ, フレージングコンテンツ, ラベラブル, パルパブルコンテンツ

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

フレージングコンテンツ (ただし、meter要素を子孫にもつことはできない)

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

value

min

max

low

high

optimum

説明

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

min ～ max の領域は、low と high により「低領域」「中間領域」「高領域」に分けられます。「中間領域」は緑、「低領域」と「高領域」は黄色で表示されます。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 は現在の値を示します。

<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>

リンク

• https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element
• https://developer.mozilla.org/ja/docs/HTML/Element/meter
• https://caniuse.com/meter

---