HTML5タグ虎の巻

progressタグ

HTML5

progressは、プログレスバーを表示するタグです。

解説

プログレスバーは処理の進捗状況を分かりやすく表示するものです。
タグを設置しただけではプログレスバーは動かないので、動かしたい場合はJavaScriptで制御する必要があります。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
フレージング・コンテンツ

属性

progressタグには以下の属性が指定できます。

【属性】
属性説明
value現在の進捗値を指定する
(例)value="0.5"
max進捗100%の値を指定する
(例)max="100"
 ※デフォルト値は1です。
form関連するフォームを指定する
(例)form="fm1"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

ループするプログレスバーを表示する

<progress></progress>

3割進捗のプログレスバーを表示する

<progress value="30" max="100"></progress>

プログレスバーが未対応のブラウザの場合、「プログレスバーが未対応です」と表示する

<progress>プログレスバーが未対応です</progress>

progressタグが対応しているブラウザで表示した場合は、指定したメッセージは表示されません。

備考

  • progressはHTML5で新規に追加された要素です。