meter

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.未対応~ ver.14~ ver.未対応~ ver.11.5~
意味 割合
読み方 メーター

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
リスト化/ラベル付け可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

フレージング・コンテンツ
ただし、子孫にprogress要素が存在してはならない

<meter 属性="値">~</meter>

属性 概要
value 数値
min 数値 下限
max 数値 上限
low 数値 低いとされる範囲の下限
high 数値 高いとされる範囲の上限
optimum 数値 最適な値
form 文字列 所属先フォームを明示

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 meter要素は、ある範囲の量の中での、個々の量の割合を表示します。フォーム関連の要素に分類されますが、ユーザーからの入力を受け付ける要素ではありません。

 min・max属性で、範囲の下限と上限を指定します。そして、value属性で、範囲の中での値を指定します。min・max属性を省略した場合、標準値はそれぞれ0・1.0です。

 max属性は、0以上の値でなければなりません。maxを指定した場合、value属性の値はmax属性以下である必要があります。一方、max属性を省略した場合、value属性の値は1.0以下である必要があります。

 low、optimum、high属性で、範囲の中で低い、最適、高いと考えられる値を指定することができます。

 min、max、low、high、optimum、valueの各属性の間には、以下の関係が成り立っている必要があります。

  • min ≦ value ≦ max
  • min ≦ low ≦ high ≦ max
  • min ≦ optimum ≦ max

 なお、optimumはlowとhighの間でなくても構いません。例えば、範囲の中で高い値を取るほど最適であれば、highよりもoptimumが大きくなります。

 meter要素に対応していない古いWebブラウザーのために、meter要素の中にフォールバックコンテンツを入れられます。

 執筆時点では、Intenret Explorer 8/9、Firefox 7、Safari 5.1ではmeter要素が実装されていません。

サンプル

(body要素の内部のみ掲載)

<p>
使用済み容量:<meter min="0" low="100" high="900" max="1000" value="600">
600/1000
</meter>
</p>

サンプル実行画像

 Internet Exlorer 9での表示例です。meter要素が実装されていないので、フォールバックコンテンツが表示されます。

 Google Chrome 14での表示例です。

よくある間違い、勘違い

 meter要素は、ある範囲の中での割合を示す要素です。範囲を限定しない使い方は、正しくありません。

 また、作業の進捗度を表す場合は、meter要素ではなくprogress要素を使うようにします。

Powered by Web Professional

目次