この記事の要点

<meter> は既知の範囲内の現在値を表すゲージ（ディスク使用率、進捗ではない既知の量） 基本: <meter value="0.7" min="0" max="1"></meter> low / high / optimum 属性で「低すぎ・高すぎ・最適」のしきい値を指定 → ブラウザが色を変える <progress> はタスクの進捗用（不確定状態あり）。<meter> とは用途が違う スタイルは Webkit (::-webkit-meter-*) と Firefox (::-moz-meter-bar) で別々の擬似要素を持つ

<meter> の基本

HTML5 の <meter> 要素は、ディスク使用量、テストの点数、室温、株価のレンジ内など、既知の範囲内での現在値を視覚的に表すための要素です。

<!-- もっとも単純 -->
<meter value="0.7">70%</meter>

<!-- min / max を明示 -->
<meter value="70" min="0" max="100">70 / 100</meter>

<!-- ラベル付き -->
<label>ディスク使用率
  <meter value="62" min="0" max="100">62%</meter>
</label>

<!-- low / high / optimum で色を変える -->
<meter value="3" min="0" max="10" low="3" high="7" optimum="5">3</meter>

属性一覧

属性	意味	既定
value	現在値（必須）	0
min	下限	0
max	上限	1
low	「低すぎ」と見なすしきい値	min
high	「高すぎ」と見なすしきい値	max
optimum	最適値（low/high の関係で色決定）	中央
form	所属するフォーム ID	-

low / high / optimum と色

ブラウザは value がどのゾーンに入るかで色を変えます:

optimum の位置	value < low	low ≤ value ≤ high	value > high
low より下	緑（最適に近い）	黄	赤
low ≤ optimum ≤ high	黄	緑（最適）	黄
high より上	赤	黄	緑（最適に近い）

<p>気温（最適 22 度）</p>
<meter value="10" min="0" max="40" low="18" high="26" optimum="22">10°C</meter>
<meter value="22" min="0" max="40" low="18" high="26" optimum="22">22°C</meter>
<meter value="35" min="0" max="40" low="18" high="26" optimum="22">35°C</meter>

<p>テスト点数（最適 100 点 = high より上が良い）</p>
<meter value="40" min="0" max="100" low="50" high="80" optimum="100">40 点</meter>
<meter value="90" min="0" max="100" low="50" high="80" optimum="100">90 点</meter>

<progress> との違い

項目	<meter>	<progress>
用途	既知の範囲内の現在値	タスクの進捗
例	ディスク使用率、点数、燃料残量	ファイル DL 率、フォーム送信中
不確定状態	無し	あり（value 省略）
low / high / optimum	あり	無し
ARIA role	meter	progressbar

<!-- meter: 既に決まっている値を見せる -->
<meter value="62" min="0" max="100">SSD 62% 使用中</meter>

<!-- progress: 何かを処理中 -->
<progress value="30" max="100">30%</progress>

<!-- progress: 不確定（アニメーション） -->
<progress></progress>

CSS でのスタイル

残念ながら <meter> のスタイルはブラウザごとに別々の擬似要素を使います。

/* 共通: サイズや角丸など */
meter {
  width: 240px;
  height: 1em;
}

/* WebKit / Chrome / Safari / Edge */
meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 0.5em;
  border: 1px solid #ccc;
}
meter::-webkit-meter-optimum-value { background: #4caf50; }
meter::-webkit-meter-suboptimum-value { background: #ff9800; }
meter::-webkit-meter-even-less-good-value { background: #f44336; }

/* Firefox */
meter::-moz-meter-bar {
  background: #4caf50;
}
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #ff9800; }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #f44336; }

JavaScript API

const m = document.querySelector('meter');

m.value = 80;
m.min = 0;
m.max = 100;
m.low = 30;
m.high = 70;
m.optimum = 50;

// 値の確認
console.log(m.value, m.labels);  // 値 + 関連 <label> NodeList

// リアルタイム表示
setInterval(() => {
  m.value = navigator.connection?.downlink ?? 0;
}, 1000);

アクセシビリティ

<meter> はネイティブで ARIA role meter を持ち、スクリーンリーダーが現在値・最大値を読み上げます。ただし古いリーダーは未対応のことも多いので、ラベルやテキスト説明を併用しましょう:

<label for="disk">SSD 使用率</label>
<meter id="disk" value="62" min="0" max="100"
       aria-valuetext="62 パーセント使用中">62%</meter>

<!-- フォールバックテキスト (古いブラウザで表示) -->
<meter value="50" min="0" max="100">[ゲージ非対応のため: 50%]</meter>

使うべき場面・避けるべき場面

用途	適切？
ディスク / メモリ使用率	★ ピッタリ
燃料残量、バッテリー	★ ピッタリ
テスト点数 / スコア	★ 適切
パスワード強度	○ 使える
ファイルダウンロード進捗	✕ <progress> を
装飾的なバーグラフ	✕ <div> + CSS で

FAQ

Q: ブラウザ対応は？
A: Chrome / Firefox / Safari / Edge いずれも対応済。IE は非対応 → フォールバックテキストでしのいでください。

Q: 色を完全に統一したい
A: ブラウザ間で擬似要素が違うのでフルカスタマイズは大変。妥協できないなら <div> + CSS で自前バーを作る方が早いです。

Q: 単位を付けたい
A: <meter> 自体には単位属性は無いので、隣にテキストとして書きます: <meter ...></meter> 62 GB。