目次に戻る

meter要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • value→計測済みの値として表示する値。浮動小数点数必須
  • min→範囲の最低値。浮動小数点数デフォルト0
  • max→範囲の最大値。浮動小数点数デフォルト1
  • low→これ以下は「低」とみなす値。浮動小数点数デフォルトは、min属性値(指定なき場合はそのデフォルト値)。
  • high→これ以上は「高」とみなす値。浮動小数点数デフォルトは、max属性値(指定なき場合はそのデフォルト値)。
  • optimum→最適とみなす値。浮動小数点数デフォルトは、min属性値(指定なき場合はそのデフォルト値)とmax属性値(指定なき場合はそのデフォルト値)の中間値。
  • 上記の各属性値(指定がない場合でデフォルトがある場合は、そのデフォルト)の大小関係は、「min属性値low属性値high属性値max属性値」、「min属性値optimum属性値max属性値」、「min属性値value属性値max属性値」でなければならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • roleは指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • {height:1em; width:5em; vertical-align:-0.2em}(縦方向の場合はこれを縦に変換)のゲージを、inline-blockボックスで表示。
  • 最小値は、横方向ゲージの場合は左端(ただし、当該要素書字方向が右から左の場合は、右端)、縦方向ゲージの場合は下端。
  • ゲージは、value属性値の最大値・最小値との関係における相対的な位置、及び、value属性値と高域・低域・中間域との関係性を示すように描写する。
  • 最適域は、最適値が、低域にある場合は低域の範囲、高域にある場合は高域の範囲、低域と高域の中間にある場合はその中間域である。最適値が低域又は高域にある場合においては、value属性値が最適域の近接域にある場合と、最適域でもその近接域でもない部分にある場合とで、表示を区別する。
  • その他の詳細は、原則として、プラットフォーム(オペレーティングシステムとかブラウザとか)のルールによることが期待される。
  • 必須のはずのvalue属性がない場合(非準拠)、又は、value属性値浮動小数点数でない場合(非準拠)は、value属性値0とみなす。
  • value属性値min属性値(のデフォルト)より小さい場合(非準拠)は、value属性値min属性値(のデフォルト)と同値とみなす。
  • value属性値max属性値(のデフォルト)より大きい場合(非準拠)は、value属性値max属性値(のデフォルト)と同値とみなす。
  • low属性値min属性値(のデフォルト)より小さい場合(非準拠)は、low属性値min属性値(のデフォルト)と同値とみなす。
  • low属性値max属性値(のデフォルト)より大きい場合(非準拠)は、low属性値max属性値(のデフォルト)と同値とみなす。
  • high属性値low属性値(のデフォルト)より小さい場合(非準拠)は、high属性値low属性値(のデフォルト)と同値とみなす。
  • high属性値max属性値(のデフォルト)より大きい場合(非準拠)は、high属性値max属性値(のデフォルト)と同値とみなす。
  • optimum属性値min属性値(のデフォルト)より小さい場合(非準拠)は、optimum属性値min属性値(のデフォルト)と同値とみなす。
  • optimum属性値max属性値(のデフォルト)より大きい場合(非準拠)は、optimum属性値max属性値(のデフォルト)と同値とみなす。
  • max属性値min属性値(のデフォルト)より小さい場合(非準拠)は、max属性値min属性値(のデフォルト)と同値とみなす。
意味・用法

既知の範囲の中にあるスカラー量又は小数の値などを表す。

範囲が明確でないものには用いるのは正しくない。

進捗状況を表すには、meter要素ではなく、progress要素を用いる。

アクセシビリティ関連

私見・補足

最大値・最小値が決まっている範囲内での特定の値・割合を示す。

単位を明示する方法はないので、title属性で補足説明として入れるか、前後のテキストで説明する。

value属性値がビジュアル的に表示されるゲージとしてレンダリングされることが想定されている。

視覚系ブラウザにおいては、value属性値が、最適域の場合は緑、最適域の近接域の場合は黄、それ以外は赤とするのが、一般的なようである。

表示確認

ソース

  <div><label>最大値10のうち4:<meter value="4" min="0" max="10" low="2" high="8" optimum="5">4/10</meter></label></div>
  <div><label>最大値10のうち1:<meter value="1" min="0" max="10" low="2" high="8" optimum="5">1/10</meter></label></div>
  <div><label>最大値10のうち9:<meter value="9" min="0" max="10" low="2" high="8" optimum="5">9/10</meter></label></div>
  <div><label>最大値10のうち4:<meter value="4" min="0" max="10" low="2" high="8" optimum="1">4/10</meter></label></div>
  <div><label>最大値10のうち1:<meter value="1" min="0" max="10" low="2" high="8" optimum="1">1/10</meter></label></div>
  <div><label>最大値10のうち9:<meter value="9" min="0" max="10" low="2" high="8" optimum="1">9/10</meter></label></div>
  
表示結果

未対応ブラウザでは、内容テキストが表示される。

IE6表示のスクリーンショット
IE6表示:代替コンテンツが表示されている

IE7からIE11も同様。