<meter> 規定範囲内の数量や測定値を表す
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | フレージング・コンテンツ |
対応ブラウザ | caniuseで確認 |
<meter>タグの説明
<meter>
は、あらかじめ最大値や最小値が分かっているような、規定の範囲がはっきりしている物事の分量を表す際に使用します。
例えば、ハードディスクの使用量、有権者の母数が分かっている選挙の投票率、達成条件が明確な作業の進捗状況などを表すのに適しています。
<meter>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として横長のグラフィカルなメーターが表示されます。これはブラウザの既定のスタイルによるものです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<meter>に指定できる主な属性
- value
- 現在の数値。必須属性です。
min
属性とmax
属性が指定されている場合、その範囲内に収まる値でなくてはなりません。この属性が未定義、あるいは不正な値であった場合、その値は0
となります。また、指定された値がmin
属性とmax
属性が示す範囲の外にある場合は、その範囲内の最も近い値が適用されます。 - min
- 範囲全体の下限。未設定の場合は
0
が適用されます。max
属性が指定されている場合は、それより小さい値でなくてはなりません。 - max
- 範囲全体の上限。未設定の場合は
1
が適用されます。min
属性が指定されている場合は、それより大きい値でなくてはなりません。 - low
- 「低い」とされる境界を表します。未設定の場合は
0
が適用されます。この属性値は、min
属性の値より大きく、high
属性およびmax
属性の値よりも小さい値でなければなりません。 - high
- 「高い」とされる境界を表します。未設定の場合は
1
が適用されます。この属性値は、max
属性の値より小さく、low
属性およびmin
属性の値よりも大きい値でなければなりません。 - optimum
- 「最適」とされる値を表します。未設定の場合は
0.5
が適用されます。min
属性とmax
属性によって定義される範囲内の値でなくてはなりません。low
属性とhigh
属性が指定されている場合、low
属性以上high
属性以下の範囲内にoptimum
属性を指定した場合には、low
属性からoptimum
属性までの範囲内が最適な値となります。optimum
属性の値をhigh
属性以上に設定した場合は、high
属性からoptimum
属性の範囲が最適と見なされます。
<meter>の使い方とサンプル
このタグを使ったマークアップのサンプルです。ボタンを押すごとに数が増える投票の仕組みと連動させています。
HTML
<script>
function voteButton() {
var getpoint = document.getElementById('vote');
getpoint.value++;
var outPut = document.getElementById('rpp');
outPut.value = getpoint.value;
}
</script>
<input type="button" value="Vote" onclick="voteButton()">
<meter id="vote" value="0" min="0" max="30" low="10" high="20" optimum="30">Vote</meter>
<output id="rpp">0</output> point (Max30)
表示確認