HTML

HTML’s <meter> element is used to visually indicate, in a gauge-like interface, the position of a given value within a specific range (for example, battery level or rating scores).

meter 要素

<meter>要素とは？

<meter>要素は、数値が特定の範囲内におけるどの位置にあるのかを視覚的に示すための要素です。たとえば、アプリケーションのスコアや、残りバッテリー容量、検索件数に対するヒット数、パフォーマンス指標など、「最大値・最小値が分かっている状態で値を示す」ケースに便利です。

例 : 「点数が0点から100点の間でいま70点」「ストレージ容量が500GB中300GB使用中」といった状況を示したい時に使う。

同じように進捗を表す要素として<progress>要素も存在しますが、<progress>は「処理がどこまで進んでいるか」を示すのに対し、<meter>は「既知の範囲のどこにあるのか」を示すのに向いている、という違いがあります。

基本的な使い方

以下は、<meter>要素の最も基本的な例です。たとえば「スコア」が100点満点中70点だと仮定します。

HTML

<p>現在のスコア: <meter value="70" min="0" max="100">70</meter></p>

現在のスコア: 70

コード解説

value
現在の値（実際の数値）
min
取りうる最小値
max
取りうる最大値

<meter>内のテキスト（上記例では70）は、要素がブラウザで正しくレンダリングされない環境向けのフォールバックテキストとして使われます。

この例では、スコアが0～100の範囲にあり、70が現在の値であることを表しています。ブラウザはこの範囲を解釈して、ゲージ状のUIを描画します。

<meter>要素の主な属性

<meter>要素には、いくつかの属性が用意されています。ここでは、それぞれの属性と使い所を解説します。

value (必須)
現在の値を数値で指定します。必須ではありませんが、実質これがないとメーターバーは意味を成しません。
例 : value="70"
min
値が取りうる最小値を指定します。デフォルトは0です。
例 : min="0"
max
値が取りうる最大値を指定します。デフォルトは1です。
例 : max="100"
low
値が「低い」と見なされる範囲を設定するための境界値。
例 : low="30" とすると、30以下でゲージの描画が通常と異なるスタイルになることがある（ブラウザ依存）。
high
値が「高い」と見なされる範囲を設定するための境界値。
例 : high="80" とすると、80以上でゲージの描画が変化する可能性があります。
optimum
推奨・適正と見なされる値。ブラウザによっては、この値に近いときにゲージの色などが変わることがあります（サポート状況はまちまち）。
例 : optimum="90"
form
メーターをフォーム要素に紐付けるための属性。<form>要素のidを指定することで、フォームの一部としてサーバーに送信するよう設定できます。
例 : form="myForm"

low, high, optimumを使った例

以下は、ある試験合格ラインを70点、優秀ラインを90点とし、最小値は0点、最大値は100点の場合です。

HTML

<p>試験スコアA：<meter value="30" min="0" max="100" low="50" high="90" optimum="90">70</meter></p>
<p>試験スコアB：<meter value="60" min="0" max="100" low="50" high="90" optimum="90">70</meter></p>
<p>試験スコアC：<meter value="95" min="0" max="100" low="50" high="90" optimum="90">70</meter></p>

試験スコアA：70

試験スコアB：70

試験スコアC：70

上記の例では、low="50", high="90", optimum="90" を指定しています。ブラウザによっては、以下のような表示がなされる場合があります。

50点以下
ゲージが注意を促すカラー(例：赤っぽい色)
50点超～90点未満
標準的なカラー(例：黄色っぽい色)
90点以上
推奨範囲のカラー(例：緑っぽい色)

ただし、ブラウザごとに実装状況が異なるため、必ずしもすべてのブラウザで思った通りの見た目になるわけではありません。

<meter>要素の見た目をカスタマイズする

基本的なスタイルの変更

<meter>は、ブラウザ既定のスタイルが当たっているため、widthやheightなどのCSSプロパティでサイズ変更が可能です。また、特定の疑似クラスを用いて、ゲージのバー部分をカスタマイズすることもできます。ただし、ブラウザごとのサポート状況・挙動に差があるので注意が必要です。

HTML

<p>現在のスコア: <meter value="70" min="0" max="100">70</meter></p>

CSS

meter {
	width: 300px;
	height: 30px;
}

現在のスコア: 70

ブラウザ依存の疑似要素

一部のブラウザでは、::-webkit-meter-barや::-moz-meter-bar、::-webkit-meter-optimum-value、::-webkit-meter-suboptimal-value、::-webkit-meter-even-less-good-valueなどのベンダープレフィックス付き疑似要素が使えます。これらを用いると、ゲージの背景色や塗り色を変更できます。

CSS

/* ChromeやSafariなどWebKit系ブラウザ向けの例 */
meter::-webkit-meter-bar {
	background: #ccc;
}
meter::-webkit-meter-optimum-value {
	background: #0f0; /* 範囲内でoptimalと判定される値 */
}
meter::-webkit-meter-suboptimal-value {
	background: #ff0; /* suboptimalな値（通常の範囲） */
}
meter::-webkit-meter-even-less-good-value {
	background: #f00; /* lowを下回った値など */
}

ただし、これらのベンダープレフィックス付きCSSは将来的に変更される可能性があり、ブラウザ間の互換性に注意が必要です。どの程度のカスタマイズが必要なのかを考えた上で使用を検討しましょう。

独自のスタイルを適用したい場合

<meter>要素のビルトインのUIを完全に置き換えることは、現時点ではCSSのみで完璧に行うのは難しい場合があります。高度なカスタマイズを行いたいときは、HTMLとCSSを組み合わせて、<meter>の代わりに<div>とJavaScriptなどでメーターを再現することも検討してください。

ラベル付けとアクセシビリティ

<label>要素との併用

<meter>を使う場合も、視覚的・技術的に何を表しているかを明示することが重要です。たとえば、スクリーンリーダーなどで正しく読み上げられるように、<label>と組み合わせる方法があります。

HTML

<label for="battery">バッテリー残量:</label>
<meter id="battery" value="0.7" min="0" max="1">70%</meter>
70%

ARIA属性との併用

場合によっては、ARIA属性（Accessible Rich Internet Applications）を用いることで、さらに明確な意味を補足できることがあります。しかし、<meter>は標準でアクセシビリティをある程度サポートしているため、基本的にはARIAを過度に追加する必要はありません。ただし、サポートの薄いブラウザやスクリーンリーダーとの組み合わせで不具合を回避したい場合には、role="meter"やaria-valuenow="70"などを加えて明示するケースもあります。

HTML

<meter role="meter" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="スコア">70</meter>

<meter>と<progress>の違い

よく似た要素として<progress>要素がありますが、両者には明確な違いがあります。

<meter>要素
<progress>要素

例として、

HTML

<!-- これはファイルアップロードの進捗を示すprogress要素 -->
<progress value="30" max="100">30%</progress>
30%

という具合です。もし値の範囲が明確であって、その区間内の具体的な位置を示したい場合には<meter>を選びましょう。

上級者向けヒント

フォーム送信との組み合わせ

<meter>要素は、数値入力フォームと組み合わせて、ユーザーの入力値が範囲内でどの程度なのかをリアルタイムで示す用途にも使えます。たとえば、入力された数値をJavaScriptで取得して<meter>のvalueに代入すれば、ユーザーに視覚的なフィードバックを与えられます。

HTML

<form id="myForm">
	<label for="scoreInput">スコア(0～100):</label>
	<input type="number" id="scoreInput" name="score" min="0" max="100" value="50">
	<meter id="scoreMeter" value="50" min="0" max="100">50</meter>
</form>

<script>
	const input = document.getElementById('scoreInput');
	const meter = document.getElementById('scoreMeter');
	
	input.addEventListener('input', () => {
		const val = parseInt(input.value, 10);
		meter.value = val;
	});
</script>
50

ユーザーが値を入力し直すと、即座にメーター表示が更新され、フォーム送信時には入力値を送ると同時にメーターがその状態を視覚的に示してくれます。

レスポンシブデザインでの考慮

<meter>要素はブラウザ固有の表現に任せている部分が多いため、デバイス幅が小さいときにメーターバーが想定より小さく表示される場合があります。CSSで幅を指定すると良いですが、可変幅でレイアウトが崩れないようにするには、例えば以下のような工夫が必要です。

CSS

meter {
	width: 100%;
	box-sizing: border-box;
	max-width: 300px; /* 必要に応じて最大幅を設定 */
}

こうすることで、小さい画面では横幅を自動的に縮小し、大きい画面では最大幅300px程度に抑えるようにできます。

JavaScriptで動的に属性を変更

<meter>要素のmin, max, valueなどは動的に変更可能です。外部データソース(API等)から値を取得してメーターバーを更新することで、リアルタイムダッシュボードのようなインタラクティブ表示も実現できます。

たとえば、株価を取得してそれが日中に上下する様子を<meter>で可視化するなど、使い方次第で多彩な表現が可能です。

非対応ブラウザへのフォールバック

<meter>要素をサポートしていないブラウザは近年では少ないですが、もしサポート外の環境が想定されるならば、メーターの内部テキスト（フォールバックテキスト）をしっかり定義しておくとよいでしょう。例えば<meter>内の文字を「70/100」と書いておく、などです。また、JavaScriptでサポートを確認し、サポート外の場合は別の表現に切り替える工夫も考えられます。

まとめ

<meter>の用途
範囲が明確にわかっている数値を表示し、値がその範囲のどこに位置しているかを視覚的に示す。
主要属性
value, min, max, low, high, optimumなどがあり、ブラウザによってゲージの色やスタイルが変化することがある。
カスタマイズ
簡単なCSS調整はできるが、ブラウザ実装が異なるため、高度なカスタマイズはベンダープレフィックスやJavaScriptとの併用が必要。
アクセシビリティ
<label>やARIA属性を適切に使うことで、スクリーンリーダーへの対応を強化できる。
<progress>との違い
progress
処理の進捗（最終値が不確定な場合も含む）
meter
明確な範囲のどこかを示す
応用的な使い方
フォーム入力とリアルタイムで連動したり、動的に値を更新するなど、多彩なユースケースに対応可能。

HTML5で追加された<meter>要素は、ビジュアル的にもわかりやすいメーターバーを簡単に組み込める便利な要素です。初心者の方はまずシンプルに値と最小・最大を指定するところから始め、慣れてきたらlow・high・optimumで色の変化を試してみてください。さらに上級者の方は、アクセシビリティを考慮しつつJavaScriptを組み合わせて、インタラクティブでリアルタイムなメーターバーを作ってみると理解がより深まるでしょう。

ぜひ、<meter>要素を活用してユーザーにわかりやすい数値表示や状況提示を行い、Webページの情報伝達力を向上させてみてください。