progressの使い方についてまとめ

progressの概要

progress要素はHTMLでプログレスバーを作成することができます。主にHTMLで進捗表などを作成するときに使用できます。

progressのカテゴリー

コンテンツカテゴリー

progressに入れられるタグ一覧

タグ早見表

a abbr area audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label link map mark math meta meter noscript object output picture progress q ruby rp s samp script select slot small span strong sub sup svg template textarea time u var video wbr テキスト

入れられるタグのカテゴリー・モデル

この記事の目次

progressに使える属性

属性とは<progress>タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

progressに使える属性

max 概要 プログレスバーのMAX値を設定できる属性です。progress要素を使用する際には、0より大きい数字を設定する必要があります。
属性の値 0より大きい数字
value 概要 この属性は進捗度を入力する属性です。max属性が 100 に対してvalue属性が 20 だった場合、プログレスバーの2割が塗りつぶされます。
属性の値 設定したmax属性値以内の数字

スポンサードサーチ

<progress>の使い方

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり