このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

progress”要素:進捗状況HTML5で追加

記事Sep. 26th,2020
進捗状況を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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

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

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

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

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

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

サンプルコード

進捗状況

<p><label>進捗状況:<progress id="task" max="100" value="50">50%</progress></label></p>

不明な進捗状況

<p><label>進捗状況:<progress id="task" max="100">計算中</progress></label></p>

属性と値

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

仕様書

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

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<progress>
定義なし

定義あり

定義あり

定義あり

定義あり
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;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク