ウェブランサー

<meter> 規定範囲内の数量や測定値を表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 フレージング・コンテンツが期待される場所
子にできる要素 フレージング・コンテンツ
対応ブラウザ <meter>の対応状況を確認する

<meter>タグの説明

<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>タグの使い方とサンプル

<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)
表示確認
Vote 0 point (Max30)

<meter>に関連するHTMLタグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する