トップページ  > HTML Living Standard  > <progress>

★HTML Living Standard リファレンス

<progress> …… タスクの進行状況を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

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

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

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

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

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

■属性

value属性
要素の現在値を指定します。
max属性
範囲の上限を指定します。

■使用例

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

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

HTMLソース

<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="1">無効な値</progress></p> <!--全角数字なので無効 → value=0に設定される-->

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

ブラウザ上の表示

progress要素にvalue属性を指定した場合

進行状況: 0%

進行状況: 40%

進行状況: 80%

進行状況: 無効な値

progress要素にvalue属性を指定しない場合

進行状況: 取り組み中です!

■関連項目

  • <progress> …… タスクの進行状況を表す
  • <meter> …… 既知の範囲内の測定値を表す
  • <output> …… 実行結果の出力を表す
  • <samp> …… コンピューターからの出力サンプルを表す
  • <data> …… 何らかのデータを表す
  • <time> …… 日付や時刻に関連するデータを表す
  • <mark> …… 参照目的で強調表示されたテキストを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ