progressタグ -進行状況を視覚的に示す｜HTML辞典

<progress>タグとは？

<progress> タグは、タスクの進行状況を視覚的に示すためのタグです。
例えば、ファイルのアップロード状況や処理の進捗状況を表示する際に使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<progress> は開始タグ（<progress>）と閉じタグ（</progress>）の両方が必要です。

基本的な記述方法

<progress value="70" max="100"></progress>

使用できる主な属性

<progress> タグにはいくつかの重要な属性があります。

属性名	説明	例
value	現在の進行状況（数値）	<progress value="50">
max	最大値（デフォルトは1）	<progress max="100">
form	関連付けるフォームの id を指定	<progress form="uploadForm">

CSSを使ったデザイン変更

デフォルトのデザインを変更したい場合は、CSSを活用できます。

progress {
    width: 100%;
    height: 20px;
    border-radius: 5px;
}

適切な使用例

✅ シンプルな進捗バー

<progress value="40" max="100"></progress>

✅ JavaScript を使ってリアルタイム更新

<progress id="fileProgress" value="0" max="100"></progress>
<button onclick="updateProgress()">進捗を更新</button>

<script>
function updateProgress() {
    let progress = document.getElementById("fileProgress");
    let value = progress.value;
    if (value < 100) {
        progress.value = value + 10;
    }
}
</script>

✅ form 属性を使用して特定のフォームに関連付ける

<form id="taskForm">
    <progress value="20" max="100" form="taskForm"></progress>
</form>

適切でない使用例（誤った使い方）

❌ value を指定しないと進捗状況が表示されない

<!-- NG: value 属性なし -->
<progress max="100"></progress>

✅ 正しい書き方（value を指定）

<progress value="50" max="100"></progress>

❌ max の値を value より小さくすると誤動作する

<!-- NG: max の値が小さい -->
<progress value="80" max="50"></progress>

✅ 正しい書き方（max の値を適切に設定）

<progress value="40" max="100"></progress>

<progress>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<progress>	進行状況を示す	value / max で制御	進捗バー
<meter>	測定値を示す	min / max / value で制御	数値ゲージ
<div>	カスタムプログレスバー作成可	CSS でスタイル調整	デザイン重視のバー

使用上の注意点

✅ value と max を正しく設定する

• value は max より小さい値にする。

✅ JavaScript と組み合わせてリアルタイム更新が可能

• 進捗状況をリアルタイムで変更する場合は JavaScript を活用する。

✅ <meter> との違いを理解する

• <progress> は進行状況、<meter> は測定値の表示に使用する。

関連タグ

• <meter> – 測定値を示すゲージ
• <form> – 進捗状況をフォームに関連付ける
• <script> – JavaScript で制御
• <div> – カスタムプログレスバーを作成

まとめ

<progress> タグは、HTML文書内で タスクの進行状況を視覚的に示すためのタグ です。
value と max を適切に設定し、JavaScript と組み合わせることで、動的な進捗表示が可能になります。