<progress>は進捗状況を表わすHTML要素です。この記事では、<progress>タグの使い方をサンプルを交えてご紹介しています。

構文

progressは進捗状況を表わすHTMLタグである。

<progress></progress>

上記のHTMLは次のように表示される。

属性

HTML5では、すべての要素(タグ)にグローバル属性を指定できる。

progress要素には、グローバル属性のほかに次の属性を指定できる。

max
進捗状況の最大値を指定する。max属性を指定しなかった場合、1が最大値となる。
value
現在の進捗状況を0〜maxの数値で指定する。

サンプル

現在値(value)を指定することができる。

最大値(max)を指定していないときは1が最大値となるので、0〜1の範囲で現在値を指定する。

<progress value="0.3"></progress>

最大値(max)を指定することもできる。

完了までに4つのステップがあり、3つまで完了しているときは次のようになる。

<progress value="3" max="4"></progress>

ラベルを付けることもできる。

<label for="prog1">進捗状況</label>
<progress id="prog1"></progress>

関連記事

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送