<progress> …… タスク完了までの進行状況を示す
広告
このページでは、HTML5のprogress要素を解説しています。
progress要素の最新情報は、以下を参照してください。
<progress>タグは、タスク完了までの進行状況を示す際に使用します。
タスクがどれだけ完了したかをvalue属性で、タスク全体でどれだけ作業が必要かをmax属性で指定します。
value属性とmax属性が存在する場合には、どちらも0以上の数値となります。また、value属性の値は、max属性の値以下となります。単位は任意で特に決められていません。
上記２つの属性を使えば、タスクの進行状況を指定することはできますが、
<progress>タグをサポートしていないブラウザを使用しているユーザーにも進行状況が分かるように、<progress>～</progress>の中にも、テキストで進行状況を記述することが推奨されています。
尚、ディスク使用量の表示など、何かを計測するのに<progress>タグを使用するのは不適切です。
このような場合には、<meter>タグを使用してください。
以下のサンプルは、ごく簡単なHTMLソースですが、JavaScriptなどと組み合わせて、より高機能なプログレスバーを作成しても良いでしょう。
■HTML4.01からHTML5へのバージョンアップによる変更点
progress要素は、HTML5から新たに追加された要素です。
■属性
- value属性
- タスクがどれだけ完了したかを指定する
- max属性
- タスク全体でどれだけ作業が必要かを指定する
- form属性
- どのform要素と関連しているのかを明確に示す
■使用例
HTMLソース
<section>
<h2>動画のダウンロード</h2>
<p>進行状況：<progress max=”100″>現在、動画をダウンロード中です。</progress></p>
</section>
↓↓↓
ブラウザ上の表示
動画のダウンロード
進行状況：
広告
Sponsors