タイトル: meter要素 / meter
SEOタイトル: HTML <meter> 要素の使い方と progress との違い（CSS でのスタイル）
| この記事の要点 |
|
の基本
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>| 項目 | ||
|---|---|---|
| 用途 | 既知の範囲内の現在値 | タスクの進捗 |
| 例 | ディスク使用率、点数、燃料残量 | ファイル 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。