Yugien - 遊戯苑
テーマ

HTML

この記事では、決まった範囲の中で値がどの位置にあるかをゲージで示す<meter>要素と、処理の進み具合を示す<progress>との違いを初心者向けに説明します。

A handy bar that shows where a value sits inside a fixed range (like 0–100), great for things like scores or battery level; it’s different from progress, which shows how far a task has moved.

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（必須）
現在の値を数値で指定します。これは必須です。min と max の範囲内に収めてください。
例 : value="70"
min
値が取りうる最小値を指定します。デフォルトは0です。
例 : min="0"
max
値が取りうる最大値を指定します。デフォルトは1です。
例 : max="100"
low
値が「低い」と見なされる範囲を設定するための境界値。
例 : low="30" とすると、30以下でゲージの描画が通常と異なるスタイルになることがある（ブラウザ依存）。
high
値が「高い」と見なされる範囲を設定するための境界値。
例 : high="80" とすると、80以上でゲージの描画が変化する可能性があります。
optimum
推奨・適正と見なされる値。ブラウザによっては、この値に近いときにゲージの色などが変わることがあります（サポート状況はまちまち）。
例 : optimum="90"
form
メーターをフォーム要素に関連付けるための属性。<form>要素のidを指定できますが、<meter>自体はユーザー入力用のコントロールではないため、その値が自動でフォーム送信されることはありません。送信したい場合は、JavaScriptで<input type="hidden">等に値を同期してください。
例 : 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">30</meter></p>
	<p>試験スコアB：<meter value="60" min="0" max="100" low="50" high="90" optimum="90">60</meter></p>
	<p>試験スコアC：<meter value="95" min="0" max="100" low="50" high="90" optimum="90">95</meter></p>

試験スコアA：30

試験スコアB：60

試験スコアC：95

上記の例では、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>はネイティブに適切なロールとプロパティを持つため、原則としてroleを上書きしないでください。可視ラベルが無い場合は、aria-label などで名前付けを補うと良いです。

HTML

<!-- 可視ラベルが無い場合に名前を補う例 -->
		<meter aria-label="スコア" value="70" min="0" max="100">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>
		<input type="hidden" id="scoreHidden" name="scoreMeterValue" value="50">
	</form>
	
	<script>
		const input = document.getElementById('scoreInput');
		const meter = document.getElementById('scoreMeter');
		const hidden = document.getElementById('scoreHidden');
	
		input.addEventListener('input', () => {
			const min = Number(meter.min);
			const max = Number(meter.max);
			let val = Number(input.value);
			if (!Number.isFinite(val)) val = min;         // NaN対策
			val = Math.max(min, Math.min(max, val));      // 範囲にクランプ
			meter.value = val;
			hidden.value = String(val);                   // 送信したい場合はhiddenへ同期
		});
	</script>
50

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

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

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

CSS

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

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

JavaScriptで動的に属性を変更

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

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

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

<meter>要素をサポートしていないブラウザは近年では少ないですが、もしサポート外の環境が想定されるならば、メーターの内部テキスト（フォールバックテキスト）を「70/100」のように入れておくと安心です。必要に応じて、JavaScriptでサポート可否を見て別表現に切り替えるのも有効です。

FAQ

<meter>と<progress>は何が違う？
<meter>は上限・下限が決まっている値の位置、<progress>は処理の進み具合を表します。
low/high/optimumは何に使うの？
色分けなど“良さ”の目安をブラウザに伝えます。optimumが高ければ高いほど良い、低ければ低いほど良い、中間なら真ん中が良い。
フォールバックテキストは必要？
可能なら実値を入れておくのが安全。非常時や非対応環境で意味が通ります。
フォームで送信したいときは？
<meter>自体は送信されないので、<input type="hidden">に同期して送る方法が簡単。
色が思い通りに変わらないのはなぜ？
ブラウザ依存の疑似要素が関係します。WebKit系・Firefoxでセレクタが異なります。
小数は使える？
使えます。minやmaxのスケールに合わせて小数のまま扱えます。

よくあるエラー早見表

valueがmin/maxの範囲外
期待通りの描画にならない。範囲にクランプするか入力値をチェック。
min > max
定義がおかしい。必ず min ≤ max。
low/high/optimumの相対関係が矛盾
色分けが想定外に。min ≤ low ≤ high ≤ maxを守る。
小数とパーセンテージの混同
%は書かず数値で。0.7なら70%の意味。
色指定が効かない
ベンダー疑似要素の指定漏れを確認。
ブラウザ差が大きい
最小限の装飾＋重要箇所はテキストで補助。