“meter”要素:計測値｜HTML－havin' a coffee break

＃

要素について

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、ラベル付け可能要素、パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	フレージング・コンテンツ(ただし、“meter”要素を子孫要素に持つことはできない)
タグの省略	不可

“meter”要素は既知の範囲の中での計測値や割合を表します。

計測値はゲージとして表示され、最小値は“min”属性、最大値は“max”属性で指定することができます。

スクリプトを使用して何らかの計測値を随時計算して表示するために使用することができます。

“meter”要素の内容には計測値を表したテキストなどの対応していないブラウザで表示される代替内容を配置することが推奨されます。

計測値が進捗状況を表す場合は“progress”要素の方が適切です。また、上限や下限がない計測値を表すのに使用するのも適切ではありません。

サンプルコード

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
value=""	現在の値	数値	現在の値
任意属性
グローバル属性
min=""	計測の最小値	数値	計測の最小値
max=""	計測の最大値	数値	計測の最大値
low=""	低いとする値の最大値	数値	低いとする値の最大値
high=""	高いとする値の最低値	数値	高いとする値の最低値
optimum=""	最適値	数値	最適値

＃

仕様書

“meter”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<meter>


value=""
min=""
max=""
low=""
high=""
optimum=""

DOMインターフェース



[Exposed=Window]

interface HTMLMeterElement : HTMLElement {


  [HTMLConstructor] constructor();



  [CEReactions] attribute double value;

  [CEReactions] attribute double min;

  [CEReactions] attribute double max;

  [CEReactions] attribute double low;

  [CEReactions] attribute double high;

  [CEReactions] attribute double optimum;

  readonly attribute NodeList labels;


};

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




meter {


 display: inline-block;

 height: 1em;

 width: 5em;

 vertical-align: -0.2em;

 
}