【HTML Living Standard】progress要素の使い方
progress要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
progressオブジェクトは、ウェブページ上で進行中のタスクの完了状況を視覚的にユーザーに示すためのオブジェクトです。例えば、ファイルのダウンロードやアップロード、フォームの送信処理、アプリケーションのロード、あるいは長時間かかるデータ処理など、時間がかかる操作の現在の状態と達成度合いを明示的に伝える際に利用されます。
このオブジェクトの動作は、主に二つの重要な属性、valueとmaxによって制御されます。value属性は、現在のタスクの完了値を指定し、タスクがどこまで進んでいるかを示します。一方、max属性は、タスクが完全に完了したとみなされる最大の値を定義します。これらの属性を適切に設定することで、進捗バーとして現在の達成度合いを具体的に表現することが可能です。例えば、maxが100でvalueが50であれば、タスクが約半分完了していることを示します。
もしvalue属性が指定されず、max属性のみが設定されている場合、progressオブジェクトはタスクの合計量が不明であるものの、処理が進行中である状態を示します。この状況では、ブラウザは通常、進捗状況が確定していないことを示すインジケーターやアニメーション表示を行います。
progressオブジェクトは、単に進捗を視覚的に表示するだけでなく、そのセマンティックな意味合いにより、ユーザーがタスクの進行状況を把握できるようにすることで、ユーザー体験を向上させる重要な役割を果たします。JavaScriptなどのスクリプト言語と連携してvalue属性を動的に更新することで、リアルタイムな進捗表示を実現し、ユーザーへの明確なフィードバックを強化することが可能です。これにより、ユーザーは待機中のストレスを軽減し、ページの応答性をより良く感じることができます。
構文(syntax)
1<progress value="30" max="100">30%</progress>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML progress要素の色の変更
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML progress要素と色のサンプル</title> 7 <style> 8 /* 9 * progress要素の共通スタイル設定 10 * このスタイルは全てのprogress要素に適用されます。 11 */ 12 progress { 13 width: 300px; /* プログレスバーの幅 */ 14 height: 25px; /* プログレスバーの高さ */ 15 border: 1px solid #ccc; /* 枠線の色と太さ */ 16 border-radius: 5px; /* 角の丸み */ 17 margin-bottom: 20px; /* 下の要素との余白 */ 18 /* デフォルトの背景色（ブラウザによって効果が薄い場合があります） */ 19 background-color: #f0f0f0; 20 } 21 22 /* 23 * progress要素の「色」を変更するためのCSS 24 * ブラウザによってプログレスバーの内部構造が異なるため、 25 * 主要なブラウザ（Webkit系とFirefox）に対応する擬似要素を使用します。 26 */ 27 28 /* Webkit系ブラウザ (Chrome, Safari, Edgeなど) のバー全体の背景部分のスタイル */ 29 /* ここでプログレスバーの「空の部分」の色を設定します。 */ 30 progress::-webkit-progress-bar { 31 background-color: #e9ecef; /* 明るいグレー */ 32 border-radius: 5px; 33 } 34 35 /* Webkit系ブラウザの「進捗部分」のスタイル */ 36 /* ここでプログレスバーの「進んでいる部分」の色を設定します。 */ 37 #progress-green::-webkit-progress-value { 38 background-color: #28a745; /* 緑色 */ 39 border-radius: 5px; 40 } 41 42 #progress-blue::-webkit-progress-value { 43 background-color: #007bff; /* 青色 */ 44 border-radius: 5px; 45 } 46 47 #progress-red::-webkit-progress-value { 48 background-color: #dc3545; /* 赤色 */ 49 border-radius: 5px; 50 } 51 52 /* Firefoxの「進捗部分」のスタイル */ 53 /* Firefoxでは、プログレスバー全体（バーと進捗部分）が一体となってスタイルされることが多いです。 */ 54 #progress-green::-moz-progress-bar { 55 background-color: #28a745; /* 緑色 */ 56 border-radius: 5px; 57 } 58 59 #progress-blue::-moz-progress-bar { 60 background-color: #007bff; /* 青色 */ 61 border-radius: 5px; 62 } 63 64 #progress-red::-moz-progress-bar { 65 background-color: #dc3545; /* 赤色 */ 66 border-radius: 5px; 67 } 68 69 /* サンプルを見やすくするためのbodyスタイル */ 70 body { 71 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 72 margin: 20px; 73 display: flex; 74 flex-direction: column; 75 gap: 10px; /* 各要素間のスペース */ 76 } 77 div { 78 margin-bottom: 10px; 79 } 80 h1, h2 { 81 color: #333; 82 } 83 p { 84 color: #555; 85 } 86 label { 87 display: block; /* ラベルとプログレスバーを縦に並べる */ 88 margin-bottom: 5px; 89 font-weight: bold; 90 } 91 </style> 92</head> 93<body> 94 <h1>HTML <code>progress</code> 要素のサンプル</h1> 95 96 <p> 97 <code><progress></code> 要素は、タスクの完了度合いや進捗状況を視覚的に表示するために使用されます。<br> 98 <code>value</code> 属性で現在の進捗値を、<code>max</code> 属性で最大値を指定します。 99 </p> 100 101 <h2>デフォルトのプログレスバー</h2> 102 <!-- CSSによる色変更をしていない標準のプログレスバー --> 103 <div> 104 <label for="default-progress">ファイルアップロード中 (50%):</label> 105 <progress id="default-progress" value="50" max="100"></progress> 106 </div> 107 108 <h2>CSSで色を変更したプログレスバー</h2> 109 110 <!-- 緑色のプログレスバー --> 111 <div> 112 <label for="progress-green">タスク完了状況 (70%):</label> 113 <progress id="progress-green" value="70" max="100"></progress> 114 </div> 115 116 <!-- 青色のプログレスバー --> 117 <div> 118 <label for="progress-blue">データダウンロード中 (30%):</label> 119 <progress id="progress-blue" value="30" max="100"></progress> 120 </div> 121 122 <!-- 赤色のプログレスバー --> 123 <div> 124 <label for="progress-red">エラー発生率 (10%):</label> 125 <progress id="progress-red" value="10" max="100"></progress> 126 </div> 127</body> 128</html>
HTMLのprogress要素は、Webページ上でタスクの進捗状況や完了度合いを視覚的に表示するために使用される要素です。例えば、ファイルのアップロードやダウンロードの残り時間、フォームの入力ステップなどをユーザーに伝える際に役立ちます。
この要素自体は特別な引数や戻り値を持ちませんが、value属性で現在の進捗値を、max属性で最大値を指定することで、プログレスバーの表示を制御します。例えば、value="50"とmax="100"と指定すれば、50%の進捗を示します。
サンプルコードでは、このprogress要素の基本的な使い方に加え、CSSを用いてプログレスバーの「色」を変更する方法を示しています。progress要素のスタイルはブラウザによって内部構造が異なるため、主にWebkit系のブラウザ（Chrome, Safari, Edgeなど）に対応する::-webkit-progress-bar（バー全体の背景）と::-webkit-progress-value（進捗部分）、そしてFirefoxに対応する::-moz-progress-bar（進捗部分）といったベンダープレフィックス付きの擬似要素を使用します。これにより、プログレスバーの「進んでいない部分」と「進んでいる部分」それぞれに、好きな背景色（background-color）を設定してデザインをカスタマイズできます。サンプルでは緑、青、赤の異なる色のプログレスバーを作成し、そのカスタマイズ方法を具体的に紹介しています。
progress要素は、タスクの進捗状況を視覚的に表示するために使用され、value属性で現在の進捗値を、max属性で最大値を指定することが基本です。特に注意すべきは、CSSでこの要素の色やスタイルを変更する際、ブラウザ間の互換性に関する点です。多くのブラウザで意図した表示を得るためには、::-webkit-progress-barや::-webkit-progress-value（Webkit系ブラウザ向け）、::-moz-progress-bar（Firefox向け）といったベンダープレフィックス付きの擬似要素を使い分ける必要があります。これにより、プログレスバーの「進んでいる部分」や「空の部分」の色を個別に設定できますが、完全に全てのブラウザで一貫した表現が保証されるわけではない点にご留意ください。実際のシステムでは、JavaScriptを用いてvalue属性を動的に更新し、進捗をリアルタイムに表示するのが一般的です。
HTML progress要素のデザインと実装
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML progress 要素サンプル</title> 7 <style> 8 body { 9 font-family: Arial, sans-serif; 10 margin: 20px; 11 display: flex; 12 flex-direction: column; 13 gap: 20px; /* 要素間のスペース */ 14 } 15 16 p { 17 margin: 0; 18 padding-bottom: 5px; 19 font-weight: bold; 20 } 21 22 /* progress 要素の基本的なデザイン */ 23 progress { 24 width: 300px; /* 進捗バーの幅 */ 25 height: 25px; /* 進捗バーの高さ */ 26 appearance: none; /* ブラウザのデフォルトスタイルをリセット */ 27 border: 1px solid #ccc; /* 枠線 */ 28 border-radius: 5px; /* 角丸 */ 29 overflow: hidden; /* 子要素が枠からはみ出さないように */ 30 background-color: #e0e0e0; /* 進捗バーの背景色 */ 31 } 32 33 /* WebKit系ブラウザ (Chrome, Safariなど) の進捗バーの背景部分 */ 34 progress::-webkit-progress-bar { 35 background-color: #e0e0e0; 36 border-radius: 5px; 37 } 38 39 /* WebKit系ブラウザの進捗部分 */ 40 progress::-webkit-progress-value { 41 background-color: #4CAF50; /* 進捗部分の色 (緑) */ 42 border-radius: 5px; 43 transition: width 0.3s ease-in-out; /* 進捗値の変化を滑らかに */ 44 } 45 46 /* Firefox の進捗部分 */ 47 progress::-moz-progress-bar { 48 background-color: #4CAF50; /* 進捗部分の色 (緑) */ 49 border-radius: 5px; 50 transition: width 0.3s ease-in-out; /* 進捗値の変化を滑らかに */ 51 } 52 53 /* 不確定な進捗バー (value属性がない場合) のデザイン */ 54 progress:not([value]) { 55 border-color: #007bff; /* 枠線の色を青に */ 56 background-color: #e6f7ff; /* 背景色を薄い青に */ 57 } 58 59 progress:not([value])::-webkit-progress-bar { 60 background-color: #e6f7ff; 61 } 62 63 progress:not([value])::-webkit-progress-value { 64 background-color: #007bff; /* 進捗部分の色を青に */ 65 } 66 67 progress:not([value])::-moz-progress-bar { 68 background-color: #007bff; /* 進捗部分の色を青に */ 69 } 70 71 /* 別のデザイン例 (クラスを適用) */ 72 .progress-red { 73 border-color: #f44336; 74 } 75 .progress-red::-webkit-progress-bar { 76 background-color: #ffebee; 77 } 78 .progress-red::-webkit-progress-value { 79 background-color: #f44336; /* 赤色 */ 80 } 81 .progress-red::-moz-progress-bar { 82 background-color: #f44336; /* 赤色 */ 83 } 84 </style> 85</head> 86<body> 87 <!-- 基本的な確定進捗バーの例 --> 88 <p>ファイルのアップロード進捗 (70%)</p> 89 <progress value="70" max="100">70%</progress> 90 <!-- progress要素内のテキストは、ブラウザがprogress要素をサポートしない場合の代替コンテンツとして機能します。 --> 91 92 <!-- 不確定な進捗バーの例 --> 93 <p>データ処理中...</p> 94 <progress>処理中</progress> 95 <!-- value属性がないため、不確定な状態として表示されます。 --> 96 97 <!-- 別のデザインを適用した確定進捗バーの例 --> 98 <p>エラーが発生したタスクの進捗 (25%)</p> 99 <progress class="progress-red" value="25" max="100">25%</progress> 100 101</body> 102</html>
HTMLのprogress要素は、ウェブページ上でタスクの進捗状況を視覚的に表示するために使用されます。例えば、ファイルのアップロードやダウンロード、フォーム送信の処理中など、何らかの作業が進行していることをユーザーに伝える際に便利です。
この要素自体に直接の引数や戻り値という概念はありませんが、主にvalue属性とmax属性によって挙動を制御します。value属性に現在の進捗値、max属性に最大値を指定することで、全体の完了度合いをパーセンテージで示す「確定進捗」バーを表示できます。サンプルコードの「ファイルのアップロード進捗」がその例です。一方、value属性を指定しない場合は、進捗が完了するまでの具体的な割合が不明な「不確定進捗」として表示されます。これは、データ処理中など、具体的な完了予測が難しい場面で利用され、サンプルコードの「データ処理中...」がこれに該当します。
progress要素は、標準ではブラウザのデフォルトスタイルで表示されますが、サンプルコードのようにCSSを適用することで、その見た目を自由にカスタマイズできます。background-colorやborder-radiusといった一般的なCSSプロパティに加え、::-webkit-progress-barや::-moz-progress-barのようなブラウザ固有の擬似要素を使用することで、進捗バーの背景部分や進捗部分の色、形などを細かくデザイン調整することが可能です。これにより、ウェブサイトの統一感のあるデザインに合わせることができます。
progress要素は、タスクの進捗状況を示す際に利用します。value属性とmax属性を設定することで具体的な進捗率を表示し、value属性がない場合は不確定な状態として表現されます。要素内に記述されたテキストは、この要素をサポートしない古いブラウザ向けの代替コンテンツとして機能しますので、忘れずに記述しましょう。
デザインをカスタマイズする際には、ブラウザ間の表示の差異に注意が必要です。appearance: none;を用いてブラウザのデフォルトスタイルを一度リセットし、WebKit系（Chrome, Safariなど）とFirefoxそれぞれに対応した擬似要素（::-webkit-progress-bar, ::-webkit-progress-value, ::-moz-progress-bar）を使い分けることで、統一された見た目を実現できます。JavaScriptと連携させることで、進捗値を動的に更新し、リアルタイムな表示が可能です。