<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)
表示確認

<meter>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する