最終更新日

meter要素

meter要素は、特定の範囲内の測定値を示します。meter要素では、測定値の範囲を示すために、6つの属性を使用します。

min属性は、範囲の下限を指定します。省略時の既定値は「0」です。

max属性は、範囲の上限を指定します。省略時の既定値は「1.0」です。

value属性は、「測定値」として示す値を指定します。value属性の指定は必須です。

low属性は、「低め」と見なされる測定値を指定します。値の省略時には最小値と同じ値に設定されます。

high属性は、「高め」として見なされる測定値を指定します。値の省略時には最大値と同じ値に設定されます。

optimum属性は、最適と見なされる測定値を指定できますが、それがhigh属性の値より高い場合は、より高い値がより良い、ということを示し、low属性の値より低い場合は、より低い値がより良いことを示します。値の省略時には、最小値と最大値の中間の値に設定されます。

min、max、value、low、high、optimumの各属性は、有効な浮動少数点数で指定します。

測定値は最小値以上、最大値以下でなければなりません。

low属性の値、high属性の値、optimum属性の値が指定されている場合はそれぞれ、最小値以上、最大値以下でなければなりません。指定されている場合、low属性の値はhigh属性の値以下でなければなりません。

meter要素は、重さや高さなど、最大値を持たない任意の範囲の測定値には使用されません。また、meter要素は、タスクなどの進捗率を示すためには使いません。進捗率を示すには、progress要素を使用します。

meter要素に対応していないブラウザのために、meter要素のコンテンツ内には、測定値に関する説明を記述しておくことが推奨されています。

HTML5での変更点
・meter要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
フォーム関連要素
省略不可 Phrasingコンテンツを子にできる要素 Phrasingコンテンツ(子孫にmeter要素を入れてはいけない)
属性 説明
min 数値 最小値を指定します。初期値は「0」です。
max 数値 最大値を指定します。初期値は「1.0」です。
value 数値 実際に測定された値を指定します。
low 数値 値が低すぎると判断される閾値を指定します。
high 数値 値が高すぎると判断される閾値を指定します。
optimum 数値 最適とされる値を指定します。
form ID form要素のid属性の値を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <h1>ハンバーガー10円キャンペーン!</h1>
  <p>先着100名様に、ハンバーガーを10円でご提供させて頂きます。</p>
  <p><meter min="0" max="100" value="73">残り73名様です。</meter></p>
</body>
参考文献:W3C HTML5「4.10.17 The meter element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。