progress要素

progress要素は、タスクの進捗度を表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ、ラベル付け可能フォーム関連要素。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツ。 ただし、progress要素を子孫要素に持つことはできない。
属性 グローバル属性。
value属性、max属性。
ブラウザ対応

構文

未確定プログレスバー

<progress></progress>

value属性を指定しない場合、進捗度が未確定なので、未確定プログレスバーとなる。

確定プログレスバー①

<progress value="0.0～1.0"></progress>

max属性を指定しない場合、value属性には、0.0から1.0までの数値を指定する。

確定プログレスバー②

<progress value="0～全作業量" max="全作業量"></progress>

max属性を指定した場合、value属性には、0から、max属性に指定したタスクの全作業量を示す数値までの、数値を指定する。

代替コンテンツ

<progress>代替コンテンツ</progress>

progress要素で括った内容は、progress要素に未対応のブラウザのための代替コンテンツとなる。

要点

  • progress要素は、タスクの進捗度を表す要素である。
  • JavaScriptなどのプログラムと共に使うことが多い。
  • progress要素は、HTML5にて新たに導入された要素である。
  • 使用料や得票数など、特定の範囲内の計測を表す場合は、meter要素を使う。

属性

任意属性

属性 説明
value属性 どれだけの作業が完了したかを示す数値を指定する属性。
max属性 タスクの全作業量を示す数値を指定する属性。

サンプルコード

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

サンプル

HTMLソースコード

<p>
	未確定プログレスバー： 
	<progress>50%</progress>
</p>
<p>
	確定プログレスバー（進捗度0.5）： 
	<progress value="0.5">0.5</progress>
</p>
<p>
	確定プログレスバー（進捗度0%）： 
	<progress value="0" max="100">0%</progress>
</p>
<p>
	確定プログレスバー（進捗度50%）： 
	<progress value="50" max="100">50%</progress>
</p>
<p>
	確定プログレスバー（進捗度100%）： 
	<progress value="100" max="100">100%</progress>
</p>

実際の表示

未確定プログレスバー： 50%

確定プログレスバー（進捗度0.5）： 0.5

確定プログレスバー（進捗度0%）： 0%

確定プログレスバー（進捗度50%）： 50%

確定プログレスバー（進捗度100%）： 100%