“progress”要素:進捗状況｜HTML－havin' a coffee break

＃

要素について

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、ラベル付け可能要素、パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	フレージング・コンテンツ(ただし、“progress”要素を子孫要素に持つことはできない)
タグの省略	不可

“progress”要素はタスクの進捗状況を表します。

進捗情報はプログレスバーとして表示され、“value”属性で実際にどのくらい進捗しているのか、もしくは“value”属性を省略して進捗状況が不明確であることを表すことができます。

スクリプトを使用して何らかの処理の進捗状況を随時計算して表示するために使用することができます。

“progress”要素の内容には進捗情報を表したテキストなどの対応していないブラウザで表示される代替内容を配置することが推奨されます。

“meter”要素と異なり、最小値は常に“0”です。

進捗状況ではない割合をゲージで表す場合は“meter”要素を使用します。

サンプルコード

進捗状況

不明な進捗状況

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
なし
任意属性
グローバル属性
value=""	現在の値	数値	現在の値
max=""	進捗状況が完了となる時の値	数値	進捗状況が完了となる時の値

＃

仕様書

“progress”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<progress>


value=""
max=""

DOMインターフェース




[Exposed=Window]

interface HTMLProgressElement : HTMLElement {


  [HTMLConstructor] constructor();



  [CEReactions] attribute double value;

  [CEReactions] attribute double max;

  readonly attribute double position;

  readonly attribute NodeList labels;


};

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




progress {


 display: inline-block;

 height: 1em;

 width: 10em;

 vertical-align: -0.2em;

 
}