<meter>タグの解説
<meter>は、あらかじめ最大値や最小値が分かっているような、規定の範囲がはっきりしている物事の分量を表します。例えば、ハードディスクの使用量、有権者の母数が分かっている選挙の投票率、達成条件が明確な作業の進捗状況などを表すのに適しています。
作業の進捗状況やタスクの進行具合を表す場合は<progress>を採用して下さい。
<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属性の範囲が最適と見なされます。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<meter>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。通常は最小値と最大値が定義されており、その間に収まる現在値が挿入されます。この要素の間に配置される文字は、対応していないブラウザ用の代替テキストです。
<meter min="0" max="10" value="5">5</meter>
low属性とhigh属性でしきい値を定義する
<meter>で定義される範囲の中で、「低め」にあたるしきい値と、「高め」にあたるしきい値を設定できます。この基準をまたぐ数が現在値に挿入されると、対応しているブラウザではインジケーターの色が変わります。
<meter min="0" max="100" low="20" high="80" value="15">50</meter>
<meter min="0" max="100" low="20" high="80" value="50">50</meter>
<meter min="0" max="100" low="20" high="80" value="75">50</meter>
optimum属性で最適値を定義する
<meter>で定義された範囲の中で、最適な数値を指定することができます。対応しているブラウザでは、この値から大きく乖離した現在値が挿入されると異常を示す色に変わります。
上記の属性を組み合わせて、投票ボタンと<meter>を組み合わせた仕組みを作ってみましょう。JavaScriptを使ってユーザーの操作をカウントし、対象の要素に反映させています。
<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)
<script>
function voteButton() {
var getpoint = document.getElementById('vote');
getpoint.value++;
var outPut = document.getElementById('rpp');
outPut.value = getpoint.value;
}
</script>