progressタグとは?|作業の進捗状況を表示する

progressタグとは?|作業の進捗状況を表示する
博士
<progress>タグを使えば、作業の進捗状況をプログレスバーで表示することができるぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<progress>タグとは

 

<progress>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / ラベル付け可能要素 / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 フレージング・コンテンツ(ただし、progress要素の入れ子は不可)


 
 
<progress>タグは、どのくらいの作業が完了しているのかといった作業の進捗状況を表示する際に使用します。

progress要素に対応しているブラウザでは、進捗状況がプログレスバーで表示されます。
 
 

数値の書式

value属性とmax属性の値は、以下の書式で記述します。

浮動小数点数
0.5、5、5E+2

  • value属性は0以上、max属性は0より大きい数値で指定。
  • 小数点以下の数値を指定する場合は、ピリオド(.)に続けて記述する。
  • 指数表記も使用可能(Eまたはeを付けます)。

 

 
 

スポンサーリンク

value属性

現時点の進捗状況を示す値を、0以上max属性の値以下の数値で指定します。
 
 

博士
例えばmax=”100″の場合なら、0~100の範囲で指定することになるぞ。
 
 

 
 
max属性が指定されていない場合は、0~1の範囲で指定します。
以下の場合、9割の作業が完了していることを示しています。

 
 
また、以下のようにvalue属性がないprogress要素は、進捗状況が確定していないことを表します。

 
 
博士
この場合、プログレスバーは未確定プログレスバーになるぞ。
 
 

max属性

作業が完了したときの数値を、0よりも大きい数値で指定します。

 
 
博士
max属性の初期値は1じゃ。
 
 

スポンサーリンク

progress要素の内容

progress要素には内容を持たせることができます。
これは、progress要素に対応していないブラウザ向けの代替コンテンツになります。

逆に、progress要素に対応しているブラウザでは、この内容は表示されません。

 
 
博士
進捗状況が伝わる内容を記述しておくことが推奨されておるぞ。
 
 

使用例

 
 

表示例

ダウンロード中…70%

 
 

スポンサーリンク

まとめ

作業の進捗状況を表示する際は、<progress>タグを使用します。
 
 

博士
スクリプトと組み合わせれば、進捗状況をリアルタイムで表示することもできるぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








progressタグとは?|作業の進捗状況を表示する