最終更新日 2021年4月7日

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>

参考文献：W3C HTML5「4.10.16 The progress element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。