タイトル: meter要素 / meter
SEOタイトル: HTML <meter> 要素の使い方と progress との違い（CSS でのスタイル）
| この記事の要点 |
|
の基本
HTML5 の
70%
70 / 100
3 属性一覧
| 属性 | 意味 | 既定 |
|---|---|---|
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 より上 | 赤 | 黄 | 緑（最適に近い） |
気温（最適 22 度）
10°C
22°C
35°C
テスト点数（最適 100 点 = high より上が良い）
40 点
90 点 | 項目 | ||
|---|---|---|
| 用途 | 既知の範囲内の現在値 | タスクの進捗 |
| 例 | ディスク使用率、点数、燃料残量 | ファイル DL 率、フォーム送信中 |
| 不確定状態 | 無し | あり（value 省略） |
| low / high / optimum | あり | 無し |
| ARIA role | meter | progressbar |
SSD 62% 使用中
CSS でのスタイル
残念ながら
/* 共通: サイズや角丸など */
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); // 値 + 関連 アクセシビリティ
meter を持ち、スクリーンリーダーが現在値・最大値を読み上げます。ただし古いリーダーは未対応のことも多いので、ラベルやテキスト説明を併用しましょう:
62%
[ゲージ非対応のため: 50%] 使うべき場面・避けるべき場面
| 用途 | 適切？ |
|---|---|
| ディスク / メモリ使用率 | ★ ピッタリ |
| 燃料残量、バッテリー | ★ ピッタリ |
| テスト点数 / スコア | ★ 適切 |
| パスワード強度 | ○ 使える |
| ファイルダウンロード進捗 | ✕ |
| 装飾的なバーグラフ | ✕ |
FAQ
Q: ブラウザ対応は？
A: Chrome / Firefox / Safari / Edge いずれも対応済。IE は非対応 → フォールバックテキストでしのいでください。
Q: 色を完全に統一したい Q: 単位を付けたい
A: ブラウザ間で擬似要素が違うのでフルカスタマイズは大変。妥協できないなら + CSS で自前バーを作る方が早いです。
A: