【HTML】progress と meter の使い方｜進捗バー・割合ゲージを表示する方法

ファイルのダウンロード状況を示すバーや、ディスクの空き容量を表すゲージのように、「どれくらい進んだか」「全体のうちどれくらいか」を視覚的に見せたい場面があります。HTML には、こうした表示のために用意された専用の要素 <progress> と <meter> があります。<div> と CSS で似たものを自作することもできますが、専用要素を使えば短いコードで意味が伝わり、スクリーンリーダーにも正しく認識されます。この記事では、2つの要素の違いと使い分け、属性の意味、JavaScript で進捗を動かす方法までを初心者向けに解説します。

progress と meter の違い

名前も見た目も似ていますが、2つの要素は表すものが異なります。ざっくり言うと、<progress> は「作業の進み具合」、<meter> は「ある範囲の中での今の値」を表します。下の表で役割の違いを整理しておきましょう。

判断に迷ったら「ゴールに向かって一方向に進むものか？」を考えてみてください。進んでいく作業なら <progress>、単に「今いくつか」を示すゲージなら <meter> が適しています。

progress で進捗バーを作る

<progress> は、max（全体の量）と value（現在の量）の2つの属性で進み具合を表します。たとえば全体を100として現在が30なら、30%まで満たされたバーが表示されます。

<progress max="100" value="30">30%</progress>

タグの内側に書いた 30% は、<progress> に対応していない古いブラウザで表示される代替テキストです。今のブラウザではバーが表示されるため見えませんが、書いておくと安心です。

value を書かずに <progress> だけにすると、進捗が不明な状態（インデターミネート）になり、多くのブラウザでは「処理中」を示すアニメーションが表示されます。完了までの時間が読めない処理に使えます。

<!-- value がないと「処理中」を表すアニメーションになる -->
<progress max="100"></progress>

meter で割合ゲージを作る

<meter> は、min〜max の範囲の中で value がどの位置にあるかを示します。さらに low・high・optimum を指定すると、値が「低い／普通／高い」のどのゾーンにあるかをブラウザが判断し、ゲージの色（緑・黄・赤など）を自動で変えてくれます。

<!-- 0〜100 のうち 92。high=80 を超えているので警告色になる -->
<meter min="0" max="100" low="30" high="80" optimum="20" value="92">92%</meter>

各属性の意味は次のとおりです。色分けは optimum がどのゾーンにあるかを基準に決まる仕組みで、「良い状態から離れているほど警告色になる」と覚えると分かりやすいです。

上の例ではディスク使用量を表しており、optimum="20"（使用量は少ないほどよい）に対して現在値が 92 と高いため、警告を示す色で表示されます。逆にテストの点数のように「高いほどよい」場合は optimum を大きめの値にします。

実際に動かして確かめる

下のサンプルでは、<progress> の進捗バーと <meter> のゲージを並べています。「進捗を進める」ボタンを押すと、JavaScript で value を少しずつ増やしてバーが伸びていきます。<meter> のほうは使用量が高いため、警告を示す色になっているはずです。実際に操作して動きを確かめてみましょう。

<div class="demo">
  <p>ダウンロード進捗（progress）</p>
  <progress id="bar" max="100" value="0"></progress>
  <span id="pct">0%</span>

  <p>ディスク使用量（meter）</p>
  <meter min="0" max="100" low="30" high="80" optimum="20" value="92"></meter>
  <span>92 / 100 GB</span>

  <button id="run" type="button">進捗を進める</button>
</div>

.demo {
  font-family: sans-serif;
  max-width: 340px;
  margin: 24px auto;
  line-height: 1.6;
}
.demo p {
  margin: 12px 0 4px;
  font-weight: bold;
}
progress, meter {
  width: 220px;
  height: 16px;
  vertical-align: middle;
}
button {
  margin-top: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

const bar = document.getElementById('bar');
const pct = document.getElementById('pct');

document.getElementById('run').addEventListener('click', () => {
  bar.value = 0;
  // 0.2 秒ごとに value を増やして進捗バーを動かす
  const timer = setInterval(() => {
    bar.value += 10;
    pct.textContent = bar.value + '%';
    if (bar.value >= 100) clearInterval(timer); // 100 になったら止める
  }, 200);
});

JavaScript で進捗を更新する

実際のダウンロードや処理に合わせてバーを動かすには、JavaScript で value プロパティを書き換えます。HTML の属性と同じ名前のプロパティに数値を代入するだけで、表示がすぐに更新されます。次の例は、一定時間ごとに少しずつ進めて100%で止める基本パターンです。

const bar = document.querySelector('progress');

const timer = setInterval(() => {
  bar.value += 10;                 // 現在値を10ずつ増やす
  if (bar.value >= bar.max) {      // max に達したら
    clearInterval(timer);          // 繰り返しを止める
  }
}, 200);

現在の進捗を割合（パーセント）で取り出したいときは、value を max で割って100を掛けます。たとえば「bar.value / bar.max * 100」で 0〜100 の数値が得られるので、別の場所に「45%」のように表示する用途に使えます。

label と紐づけて分かりやすくする

バーやゲージが何を表しているかは、<label> を添えると伝わりやすくなります。<label> の for 属性と要素の id を同じにして結び付けると、スクリーンリーダーが「ダウンロードの進捗、45パーセント」のように読み上げてくれます。視覚だけに頼らない、アクセシブルな表示になります。

<label for="dl">ダウンロードの進捗</label>
<progress id="dl" max="100" value="45">45%</progress>

意図したバーにならないとき

progress と meter を取り違えている

「色が変わらない」「アニメーションしない」といった戸惑いの多くは、要素の取り違えが原因です。low・high・optimum による色分けは <meter> だけの機能で、<progress> にはありません。逆に、value を省いたときの「処理中」アニメーションは <progress> の挙動で、<meter> にはありません。表したいものが「進む作業」か「現在値のゲージ」かをもう一度確認してください。

value が範囲を超えている

value が max より大きい、あるいは min より小さいと、ブラウザは範囲内に丸めて表示します（max を超えれば満タン表示）。思ったゲージにならないときは、min・max と value の数値の関係を見直してください。<meter> では value が必須で、省略すると正しく表示されません。

バーの色を変えたい

バーの色や高さは CSS で調整できますが、<progress>・<meter> はブラウザごとに内部構造が異なり、::-webkit-progress-bar や ::-webkit-progress-value といったベンダー固有の擬似要素を使う必要があります。細かなデザインを統一したい場合は、見た目を <div> と CSS で自作し、要素の意味（アクセシビリティ）のために role="progressbar" と aria-valuenow などを付ける方法もあります。

まとめ

<progress> は「進んでいく作業の完了度」、<meter> は「決まった範囲の中での現在値」を表す専用要素です。<progress> は max と value で進捗を示し、value を省くと「処理中」表示になります。<meter> は min〜max の中の value を示し、low・high・optimum でゾーンに応じた色分けができます。どちらも <label> を添えるとアクセシビリティが向上します。表したいものに合わせて使い分けてみてください。

各要素の詳しい仕様は、MDN の公式ドキュメントも参考にしてください。

• <progress>: 進捗表示要素 – MDN
• <meter>: メーター要素 – MDN