最終更新日 
progress要素
progress要素は、タスクの進捗状況を示します。
進捗の割合は、max属性に対するvalue属性の値で示すことができます。max属性は、タスク全体の程度を、0より大きい浮動少数点数で指定します。省略時の既定値は「1.0」です。value属性は、完了した作業の程度を0以上の浮動少数点数で指定します。value属性の値はmax属性の値以下でなければなりません。
progress要素に対応していないブラウザのユーザーのために、progress要素内のテキストにも、同じ値を記述しておくことが推奨されています。このテキスト内容は、progress要素に対応したブラウザでは表示されません。
progress要素は、Phrasingコンテンツの記述箇所で使用できます。
progress要素は、タスクの進捗状況のような「進行、進展、はかどりぐあい」を示すものであり、ディスク使用率には使いません。ディスク使用率の表示には、progress要素の代わりにmeter要素を使用します。
HTML5での変更点
・progress要素は、HTML5で追加された新しい要素です。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Flowコンテンツ Phrasingコンテンツ フォーム関連要素 |
省略不可 | Phrasingコンテンツを子にできる要素 | Phrasingコンテンツ（子孫にprogress要素を入れてはいけない） |
| 属性 | 値 | 説明 |
|---|---|---|
| value | 数値 | タスクの進捗度を浮動小数点数で指定します。 |
| max | 数値 | タスク全体を浮動小数点数で指定します。初期値は「1.0」です。 |
| form | ID | form要素のid属性の値を指定します。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
サンプルコード
<body> <p>マクドエイドの新規店舗の状況です。</p> <p>上野店<progress max="100" value="80">80%</progress></p> <p>成城店<progress max="100" value="72">72%</progress></p> <p>下北沢店<progress max="100" value="60">60%</progress></p> <p>日本橋店<progress max="100" value="53">53%</progress></p> </body>
ザマワンにエントリーしました！
『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。