仕様

METER要素は、
既知の範囲内の
スカラー測定値
または小数値を
表します。

meter計器 (meter)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • パルパブルコンテンツ
  • ラベル付け可能な要素
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。しかし、meter要素の子孫があってはなりません。
属性グローバル属性,
value
要素の現在の値
max
範囲の上限
min
範囲の下限
high
高域の下限
low
低域の上限
optimum
ゲージの最適値
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		対応する役割なし
DOM
インター
フェイス
HTMLMeterElement
  1. [Exposed=Window]
  2. interface HTMLMeterElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute double value;
  6. [CEReactions] attribute double min;
  7. [CEReactions] attribute double max;
  8. [CEReactions] attribute double low;
  9. [CEReactions] attribute double high;
  10. [CEReactions] attribute double optimum;
  11. readonly attribute NodeList labels;
  12. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
meter要素は、既知の範囲内のスカラー測定値または小数値を表します。

  1. <meter id="imt01" value="20" min="0" max="100" low="30" high="50" optimum="60">
  2. <span>20</span>%
  3. </meter>
  4. <script>
  5. var leMeter = document.getElementById('imt01');
  6. function lfvUpdateMeter(anValue) {
  7. leMeter.value = anValue;
  8. leMeter.getElementsByTagName('span')[0].textContent = anValue;
  9. }
  10. </script>
20%
参照元
  1. HTML Living Standard. 4.10.14 The meter element
  2. HTML 5.2 W3C 勧告. 4.10.14 The meter element
  3. MDN Web Docs. HTML <meter>:

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

meter要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

  1. <pre>
  2. <meter value="0.5">meter</meter>
  3. </pre>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、meter要素を配置できます。

meter

配置できるコンテンツ

フレージングコンテンツを
配置できます。

meter要素は、meter要素の子孫がないフレージングコンテンツを配置できます。配置された内容は、meter要素に対応していない場合に表示されます。

  1. <meter value="0.5">
  2. <span>meter</span>
  3. </meter>

meter要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

meter

属性

value属性

  1. <meter value="">meter</meter>

value属性は、ゲージが「測定された」値として示す値を指定します。value属性は、設定する必要があります。値は最小値以上の最大値以下の範囲で設定します。 候補の実際の値が最小値より小さい場合、実際の値は最小値です。それ以外の場合、候補の実際の値が最大値より大きい場合、実際の値は最大値になります。

meter

max属性

  1. <meter value="50" max="">meter</meter>

max属性は、範囲の上限を指定します。max属性が指定されていない場合は 1 を、指定されている場合はその値を最大値とします。 候補の最大値が最小値以上の場合、最大値は候補の最大値です。それ以外の場合、最大値は最小値と同じです。

meter

min属性

  1. <meter value="-2" min="">meter</meter>

min属性は、範囲の下限を指定します。min属性が指定されていない場合は 0 を、指定されている場合はその値を最小値とします。

meter

high属性

  1. <meter value="0.9" low="0.7" high="">meter</meter>

high属性は、「高」範囲の下限を指定します。(「中」範囲の上限でもあります。)

meter

low属性

  1. <meter value="0.2" low="" high="0.5">meter</meter>

low属性は、「低」範囲の上限を指定します。(「中」範囲の下限でもあります。)

meter

optimum属性

  1. <meter value="0.2" low="0.3" high="0.5" optimum="">meter</meter>

optimum属性は、「低」「中」「高」範囲の「最適」な位置を指定します。

meter

id属性

  1. <meter id="imtA" value="20" min="0" max="100" low="30" high="50" optimum="60">
  2. <span>20</span>%
  3. </meter>
  4. <form oninput="lfvUpdateMeter(iipJsA47.value);">
  5. <label>値を入力
  6. <input type="number" value="20" max="100" min="0" step="1" id="iipJsA47">
  7. </label>
  8. </form>
  9. <script>
  10. var leMeter = document.getElementById('imtA');
  11. function lfvUpdateMeter(anValue) {
  12. leMeter.value = anValue;
  13. leMeter.getElementsByTagName('span')[0].textContent = anValue;
  14. }
  15. </script>

id属性は、要素の一意の識別子（ID）を指定するグローバル属性です。
HTML要素で指定する場合、id属性値は要素のツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字が含まれている必要があります。 値には、ASCII空白を含めないでください。 IDの形式には他の制限はありません。特に、IDは数字のみで構成することも、数字で開始することも、アンダースコアで開始することも、句読点のみで構成することもできます。
要素の一意の識別子は、さまざまな目的に使用できます。特に、フラグメントを使用してドキュメントの特定の部分にリンクする方法として、スクリプトで要素をターゲットにする方法として、 およびCSSから特定の要素のスタイルを設定する方法として使用できます。
スクリプトが meter要素の id属性の値を用いて要素を特定します。

20%

気を付ける点

meter要素は、任意の範囲のスカラー値を表しません。 既知の最大値(最小値)がない限り、報告することは誤りです。