HTML progressタグ：進行率と未確定状態の切り替え

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <progress>はタスクの完了度を示します。進行率が確定している場合はvalueとmaxを設定し、作業の総量が不明ならvalue属性を省略します。この要素がアップロードやダウンロードを自動測定するわけではありません。

値と最大値で進行状況を計算する

valueは完了した量、maxは合計量です。valueが20でmaxが100の場合は20％を意味し、maxが200の場合は10％を意味します。maxが省略された場合、デフォルトは1なので、20％はvalue="0.2"と書きます。maxには0より大きい有効な数値を、valueには0からmaxの間の値を使用してください。

最小値は常に0です。progressはmin属性を使用しません。ストレージ使用量やスコアなど、範囲内の測定にはmeterを、進行中のタスクの完了度にはprogressを使用してください。

完全な例：進行状況を更新し、不確定状態に切り替える

このコードをprogress-demo.htmlとして保存し、ブラウザで開いてください。ボタンは表示される値を変更するだけで練習用であり、ファイルを転送することはありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>進行率と未確定状態</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>進行状態の練習</h1>
  <label for="work">例のタスクの進行率</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20%完了</p>
  <button type="button" id="advance">80%に変更</button>
  <button type="button" id="unknown">総量不明</button>
  <button type="button" id="reset">初期化</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = '進行中';
        status.textContent = '進行中：作業の総量は不明です。';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '%完了';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

初期状態は20%完了です。バーとその説明を両方とも80%に変更するには、80%に変更をクリックしてください。
総量不明をクリックして、value属性を削除します。ブラウザは不確定の進行状況を表示し、合計が不明であることを説明する文章が添えられます。
初期化をクリックして、value属性を復元し、20%に戻します。

value="0"は作業が完了していない確定した進行状況を示します。不確定ではありません。既存の進行状況要素を不確定に切り替えるには、例のように属性を削除してください。不確定の進行状況の見た目やアニメーションは、ブラウザ、オペレーティングシステム、ユーザー設定によって異なる場合があります。

タスク名とステータスの文章を提供してください

進行状況内の「20%」というテキストは、古いブラウザ向けのフォールバックテキストであり、タスク名の代わりではありません。for と id の値を一致させてラベルを関連付けるか、適切な ARIA アクセシブル名を提供して、タスクを識別してください。色やバーの長さだけでなく、現在の状態を言葉でも表示します。

実際のタスクでは、サーバーから提供された情報や転送イベントに基づいて値を更新してください。タイマーでバーを埋めても、作業が完了したことにはなりません。エラー、キャンセル、完了のために別々のメッセージとアクションを設計し、ステータス更新が過剰に繰り返されないよう、アナウンスの頻度を制御してください。MDN の進行状況リファレンスでは、構文とアクセシビリティ要件について説明しています。

HTMLリファレンス