progressとmeterは何を表す？作業の進み具合と範囲内の値を分けよう

どちらも横長のバーに見えるprogressとmeter。見た目が似ていても、HTMLでは異なる意味を持つ要素だよ。

ここでは、作業の完了までの進み具合と、決まった範囲の測定値を分ける。準備はブラウザだけ。作例の数字は架空で、実際のアップロードや容量の計測は行わない。

作業がどこまで進んだか

progressは、作業の進捗を表す要素。完了の最大値をmax、現在値をvalueで指定する。

<label for="task">作業の進み具合</label>
<progress id="task" max="100" value="25">25%</progress>

この例の100は「100件の作業」と決まっているわけではなく、定めた尺度。完了率なら25%として扱えるし、maxを別の総数にする設計もあるよ。

進捗がまだ分からない場合は、value属性を省くと未確定の状態になる。0を入れた状態は、値が0と分かっている場合であり、未確定とは違う。

範囲の中で今どの程度か

meterは、既知の範囲の中の量や測定値を表す。たとえば容量の使用量なら、次のように範囲を指定できる。

<label for="usage">容量の使用量</label>
<meter id="usage" min="0" max="100" value="25">25%</meter>

作業が完了へ向かう進捗をmeterで表す、という使い方とは分けよう。low・high・optimumなどの属性もあるけれど、まずは値と範囲の意味をそろえることが出発点だよ。

動かしてみよう

記事下の作例で値を25から70へ変えると、進捗と容量が同じ数で更新される。続けて「進捗を未確定にする」を選ぶと、progressだけvalue属性がなくなり、meterの測定値は70のままになる。

1. 二つのラベルと25/100の結果を読む。
2. スライダーを動かし、両方の値を比べる。
3. 未確定へ切り替え、0とは違う状態になることを確認する。
4. リセットで25・確定状態へ戻す。

ブラウザやOSでバーの見え方は異なる。色の形だけで意味を伝えず、名前と数値も一緒に示そう。

読み上げにも関わる項目名はlabelと入力欄の関連、状態の伝え方は文字と形を足す方法へ。

参照した公式資料

• MDN：progress
• MDN：meter

確認日：2026年10月24日。