progress

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.7~ ver.14~ ver.未対応~ ver.11.5~
意味 作業の進捗度の表示
読み方 プログレス

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
リスト化/ラベル付け可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

フレージング・コンテンツ
ただし、子孫にprogress要素が存在してはならない

<progress 属性="値">~</progress>

属性 概要
value 数値 作業の進捗度
max 数値 作業の全体量
form 文字列 所属先フォームを明示

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 progress要素は、作業の進捗状況を表示します。フォーム関連の要素に分類されますが、ユーザーからの入力を受け付ける要素ではありません。

 max属性で、作業の全体量を表します。value属性で、作業全体に対する進捗度を表します。

 max属性は、0以上の値でなければなりません。maxを指定した場合、value属性の値はmax属性以下である必要があります。一方、max属性を省略した場合、value属性の値は1.0以下である必要があります。

 progress要素に対応していない古いWebブラウザーのために、progress要素の中にフォールバックコンテンツを入れられます。

 本書執筆時点で、Intenret Explorer 8/9とSafari 5.1にはprogress要素が実装されていません。

サンプル

(body要素の内部のみ掲載)

<p>
進捗度:<progress max="100" value="50">
50/100
</progress>
</p>

サンプル実行画像

 Internet Exlorer 9での表示例です。progress要素が実装されていないので、フォールバックコンテンツが表示されます。

 Firefox 7での表示例です。

Powered by Web Professional

目次