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>要素は、数値が特定の範囲内におけるどの位置にあるのかを視覚的に示すための要素です。たとえば、アプリケーションのスコアや、残りバッテリー容量、検索件数に対するヒット数、パフォーマンス指標など、「最大値・最小値が分かっている状態で値を示す」ケースに便利です。
例 : 「点数が0点から100点の間でいま70点」「ストレージ容量が500GB中300GB使用中」といった状況を示したい時に使う。
同じように進捗を表す要素として<progress>要素も存在しますが、<progress>は「処理がどこまで進んでいるか」を示すのに対し、<meter>は「既知の範囲のどこにあるのか」を示すのに向いている、という違いがあります。
以下は、<meter>要素の最も基本的な例です。たとえば「スコア」が100点満点中70点だと仮定します。
HTML
<p>現在のスコア: <meter value="70" min="0" max="100">70</meter></p>現在のスコア:
コード解説
<meter>内のテキスト（上記例では70）は、要素がブラウザで正しくレンダリングされない環境向けのフォールバックテキストとして使われます。
<meter>内のテキスト（上記例では70）は、要素がブラウザで正しくレンダリングされない環境向けのフォールバックテキストとして使われます。主要ブラウザではすでに対応しているため、実用上は表示されないことがほとんどです（念のため入れておくと安心）。
この例では、スコアが0～100の範囲にあり、70が現在の値であることを表しています。ブラウザはこの範囲を解釈して、ゲージ状のUIを描画します。
<meter>要素の主な属性<meter>要素には、いくつかの属性が用意されています。ここでは、それぞれの属性と使い所を解説します。
min と max の範囲内に収めてください。value="70"min="0"max="100"low="30" とすると、30以下でゲージの描画が通常と異なるスタイルになることがある（ブラウザ依存）。high="80" とすると、80以上でゲージの描画が変化する可能性があります。optimum="90"<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：
試験スコアB：
試験スコアC：
上記の例では、low="50", high="90", optimum="90" を指定しています。ブラウザによっては、以下のような表示がなされる場合があります。
ただし、ブラウザごとに実装状況が異なるため、必ずしもすべてのブラウザで思った通りの見た目になるわけではありません。
<meter>要素の見た目をカスタマイズする<meter>は、ブラウザ既定のスタイルが当たっているため、widthやheightなどのCSSプロパティでサイズ変更が可能です。また、特定の疑似クラスを用いて、ゲージのバー部分をカスタマイズすることもできます。ただし、ブラウザごとのサポート状況・挙動に差があるので注意が必要です。
HTML
<p>現在のスコア: <meter value="70" min="0" max="100">70</meter></p>CSS
meter {
width: 300px;
height: 30px;
}現在のスコア:
一部のブラウザでは、::-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><meter>要素を紐付け場合によっては、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>という具合です。もし値の範囲が明確であって、その区間内の具体的な位置を示したい場合には<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程度に抑えるようにできます。
<meter>要素のmin, max, valueなどは動的に変更可能です。外部データソース(API等)から値を取得してメーターバーを更新することで、リアルタイムダッシュボードのようなインタラクティブ表示も実現できます。
たとえば、株価を取得してそれが日中に上下する様子を<meter>で可視化するなど、使い方次第で多彩な表現が可能です。
<meter>要素をサポートしていないブラウザは近年では少ないですが、もしサポート外の環境が想定されるならば、メーターの内部テキスト（フォールバックテキスト）を「70/100」のように入れておくと安心です。必要に応じて、JavaScriptでサポート可否を見て別表現に切り替えるのも有効です。
<meter>と<progress>は何が違う？<meter>は上限・下限が決まっている値の位置、<progress>は処理の進み具合を表します。low/high/optimumは何に使うの？optimumが高ければ高いほど良い、低ければ低いほど良い、中間なら真ん中が良い。<meter>自体は送信されないので、<input type="hidden">に同期して送る方法が簡単。minやmaxのスケールに合わせて小数のまま扱えます。valueがmin/maxの範囲外min > maxmin ≤ max。low/high/optimumの相対関係が矛盾min ≤ low ≤ high ≤ maxを守る。%は書かず数値で。0.7なら70%の意味。