このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

meter”要素:計測値HTML5で追加

記事Sep. 26th,2020
計測値を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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

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

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

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

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

サンプルコード

<p><label>猫が好きな度合い:<meter min="0" max="100" value="90">90%</progress></label></p>

属性と値

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

仕様書

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

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<meter>
定義なし

定義あり

定義あり

定義あり

定義あり
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;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク