HTML

The <meter> element shows how much something is, like a test score or battery level, by displaying it as a little gauge bar within a set range.

meter 要素

<meter>要素とは？
基本的な使い方
<meter>要素の主な属性
- low・high・optimumを使った例
<meter>要素の見た目をカスタマイズする
ラベル付けとアクセシビリティ
- <label>要素との併用
- ARIA属性との併用
<meter>と<progress>の違い
上級者向けヒント
まとめ

`<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）は、要素がブラウザで正しくレンダリングされない環境向けのフォールバックテキストとして使われます。

<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"

設定時のコツ

min ≤ value ≤ max を守る
low / high / optimum は min〜max の範囲に収める
意味づけ（「低い」「高い」「最適」）は表示色に直結する可能性があるため、値の関係を崩さない

`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%

for="battery"で、id="battery"を持つ<meter>要素を紐付け
ユーザーや支援技術が読み上げる際に、ラベルとして「バッテリー残量」という文言が適切に認識される

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>

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

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

<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でサポート可否を見て別表現に切り替えるのも有効です。

まとめ

<meter>の用途

範囲が明確にわかっている数値を表示し、値がその範囲のどこに位置しているかを視覚的に示す。

主要属性

value, min, max, low, high, optimumなどがあり、ブラウザによってゲージの色やスタイルが変化することがある。

カスタマイズ

簡単なCSS調整はできるが、ブラウザ実装が異なるため、高度なカスタマイズはベンダープレフィックスやJavaScriptとの併用が必要。

アクセシビリティ

<label>やARIA属性を適切に使うことで、スクリーンリーダーへの対応を強化できる。

<progress>との違い

progress: 処理の進捗（最終値が不確定な場合も含む）
meter: 明確な範囲のどこかを示す

応用的な使い方

フォーム入力とリアルタイムで連動したり、動的に値を更新するなど、多彩なユースケースに対応可能。

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

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

Home

サイトのトップページ

HTML (HyperText Markup Language)

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

aria-label 属性

画面上に表示されないテキストラベルを要素に付与してスクリーンリーダーなどの支援技術に正しい情報を伝え、アイコンボタンなど可視テキストのない要素でも意味や機能を明確に示すための属性です。

div 要素

特定の意味（セマンティクス）を持たない汎用的なブロック要素で、ページのレイアウトやコンテンツのグループ化に利用される「区切りの箱」のような存在です。

form 要素

サブミット・フォーム

id 属性