HTML <meter> 要素の使い方と progress との違い（CSS でのスタイル）

の基本

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

70%


70 / 100


ディスク使用率
  62%



3

属性一覧

low / high / optimum と色

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

気温（最適 22 度）
10°C
22°C
35°C

テスト点数（最適 100 点 = high より上が良い）
40 点
90 点

との違い

SSD 62% 使用中


30%

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);  // 値 + 関連  NodeList

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

アクセシビリティ

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

SSD 使用率
62%


[ゲージ非対応のため: 50%]

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

FAQ

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

Q: 色を完全に統一したい
A: ブラウザ間で擬似要素が違うのでフルカスタマイズは大変。妥協できないなら