<progress> …… タスクの進行状況を表す

<progress>タグは、タスクの進行状況を表す際に使用します。

progress要素を単なる分量表示に使用してはなりません。 例えば、ディスク使用量やクエリ結果の関連性を表すために使用するべきではありません。 このような目的には、meter要素のほうが適切でしょう。

progress要素の内容には、テキストなどで現在値と最大値を含めることが推奨されています。 これにより、旧いブラウザのユーザーにも進行状況を伝えられるようになります。

タスク進行の現在値と最大値

progress要素のvalue属性は、これまでに完了した作業量の割合（現在値）を表します。 value属性が存在する場合、value属性の値は0.0から1.0までの数値、または、 max属性が指定されている場合には0からmax属性の値までの数値を指定します。 value属性に無効な値を指定すると、0に設定されます。 値の単位は任意です。

progress要素のmax属性は、タスクに必要な作業の全体量（最大値）を表します。 max属性が存在する場合、その値は0より大きい必要があります。 max属性に無効な値を指定すると、1.0に設定されます。 値の単位は任意です。

■属性

■使用例

以下のサンプルは、progress要素にvalue属性を指定した場合と、value属性を指定しない場合の違いを示しています。 progress要素は、ブラウザ上では進行状況バーとしてレンダリングされますが、その表示形式はvalue属性の指定の有無によって変化します。

progress要素のvalue属性を指定した場合、タスク完了に向けてどのくらい進行しているかを表す進行状況バー（確定プログレスバー）となります。 value属性を指定しない場合、単に進行中であることを表す進行状況バー（不確定プログレスバー）となります。

<h4>progress要素にvalue属性を指定した場合</h4>
<p>進行状況: <progress max=100 value=0>0%</progress></p>
<p>進行状況: <progress max=100 value=40>40%</progress></p>
<p>進行状況: <progress max=100 value=80>80%</progress></p>
<p>進行状況: <progress value="１">無効な値</progress></p> <!--全角数字なので無効 → value=0に設定される-->

<h4>progress要素にvalue属性を指定しない場合</h4>
<p>進行状況: <progress max=100>取り組み中です！</progress></p>

■関連項目

Sponsors