サイト制作
progressとmeterの違い｜完了までの進み具合か、範囲内の数値か
2026-11-01
この記事には広告・アフィリエイトリンクが含まれます。
似た棒状の表示でも、進捗と測定値では意味が違います。HTMLのprogressとmeterを、アップロードと容量表示の例で使い分けます。
終わりへ進む処理ならprogress
ファイルのアップロードや一括変換など、作業がどこまで終わったかを表すのがprogressです。一方、一定の範囲にある測定値を表すのがmeter。ストレージの使用量のように、数値が大きくても作業完了を意味しないものはこちらです。棒の色や形から決めるのではなく、何を伝える数値なのかを先に決めます。残容量とアップロード進捗を同じ画面に置く場合も、役割は分けられます。
0％と、進み具合が不明な状態を分ける
progressではmaxが全体量、valueが完了量です。全10件のうち3件ならmaxを10、valueを3にします。maxは正の数で、省略時は1。最小値は常に0なのでminは付けません。まだ完了量を測れない処理ではvalue属性を省略します。valueを0にするのは、全体に対して完了量が0だと分かっている状態です。見た目を動かすために架空の割合を増やすと、本当の完了状況と食い違います。件数で測るなら、その値が件数であることも添えましょう。
棒だけに説明を任せない
進捗にはlabelやaria-labelなどで名前を付けます。MDNが説明するように、progress要素の内側に書いた文字だけではアクセシブルなラベルになりません。「画像を送信中」など処理名と、「3件／10件」のような現在値を画面でも読める形にすると、意味が追いやすくなります。エラーや完了の通知は棒の長さだけで表さず、状態を言葉で示します。処理が止まったときに、利用者が待つべきか再試行すべきか判断できる表示まで考えるのが大切です。
