ウェブランサー

<progress> 作業の進捗状況を示すプログレスバーを表示する

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 フレージング・コンテンツが期待される場所
子にできる要素 フレージング・コンテンツ
対応ブラウザ <progress>の対応状況を確認する

<progress>タグの説明

<progress>は、ページの読み込みや計算処理といった作業の進捗状況を示すプログレスバーを表示するために使用します。現在進行中の動的な表現が必要な場合に活用できる要素です。この要素の登場によって、今までjQueryやFlashを用いて作成していたプログレスバーが、HTMLだけで表現できるようになったと言えます。

単純に、処理結果を表示するだけの場合は、<output>タグを用います。規定範囲の現在測定値を表示する場合には、<meter>タグを用いてください。

<progress>タグの特徴

<progress>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<progress>タグに指定できる属性

value属性
進行状況を表します。初期値は0.0〜1.0
max属性
作業量の最大値を指定できます。max属性を指定する場合は、値を0以上にしなければなりません。
form属性
親要素となるform要素に付与したid属性値を指定することで関連付けを行います。

<progress>タグの使い方とサンプル

<progress>を使ったマークアップのサンプルです。実際にはJavaScriptを用いて動的に処理させます。

HTML
<progress value="20" max="100">20%</progress>
<progress value="40" max="100">40%</progress>
<progress value="60" max="100">60%</progress>
表示確認
20%
40%
60%

<progress>に関連するHTMLタグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する