目次に戻る

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は、meter。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • aria-valuemin属性を指定すべきではない。
  • min属性が指定されている場合は、aria-valuemin属性を指定してはならない。
  • aria-valuemax属性を指定すべきではない。
  • max属性が指定されている場合は、aria-valuemax属性を指定してはならない。
視覚系ブラウザのデフォルトとして期待されるCSS

  meter {appearance: auto;}
視覚系ブラウザにおいて期待されるレンダリング
  • {block-size: 1em; inline-size: 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>
表示結果