最終更新日

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」外部リンク
HOME