【progressタグ】タスクの進捗状況を表してみよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<progress>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ、ラベル付け可能コンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でprogressbarロールを持つ。
<progress>の説明
<progress>タグ
タスクの進捗状況を表すために使用するタグです。
このタグは、HTML５から追加された要素で、プログレスバーとしてレンダリングされます。
対応しているブラウザでは、javascriptと組み合わせることで進捗状況を動的にリアルタイムで反映させることができます。
反対に対応していないブラウザを使用しているユーザーのために、<progress>要素の中には代替テキストなどを記述することができ、進捗状況の確認ができるようになります。
■使用目的
このタグは、タスク完了の進捗状況をプログレスバーで動的に表すときに使用できます。
進捗状況をリアルタイムで表すには、javascriptと組み合わせる必要があります。
タスクの完了度合いはvalue属性を使って指定し、タスクの最大完了値はmax属性で指定することができます。
value属性を指定しない場合は、作業状況が進んでいることが分からない状態でも、確かに進んではいるということを示す際に使います。
なおmax属性で最大値を指定しない場合の最大値は0.1となります。
■使える属性
・max属性
・value属性
使用上の注意点
① <progress>タグに対応しているブラウザには、この要素の内容は表示されません。
あくまで代替テキストなどの内容は、対応していないブラウザ向けに表示されるものです。代替テキストの表示内容は進捗状況が分かるような内容にすることが好ましいです。
② ディスクの使用量などの進捗状況を表すゲージを使いたいときは、<progress>タグではなく<meter>タグを使用します。
内容モデル
<progress>要素の内容モデルは「phrasing」です。
ただし<progress>要素を子孫に持つことはできません。
<progress>要素の内容は表示されませんが、<progress>要素を解釈しないブラウザに対するフォールバックとして機能します。
アクセシビリティでの注意点
<progress>要素は標準でprogressvarロールを持っています。
スクリーンリーダーなどでは、進捗の割合を読み上げた上でこのコントロールの名前を読み上げます。
例えば進捗状況が80％の場合は「80%の進行インジケーター」のように読み上げます。
この要素は、ラベル付け可能要素にも分類されていますので、必要に応じてlabel要素と関連付けすることもできます。
<progress>要素の単独の読み上げでも内容が理解しにくそうな場合は、ラベルを付けることも検討するとよいでしょう。
<progress>の記述例
■基本的な記述例
★HTML
★実行結果
まとめ
この記事では、<progress>要素の解説をいたしました。
このタグは、プログレスバーで進捗状況を表すために使用するタグで、ユーザーに視覚的に進捗状況を把握できるようにするために用いられます。
基本的な使用は簡単ですが、動的に表示させるにはjavascriptの使用が必要になったり、値の連動指定などと少し複雑なことが増えるかもしれません。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(❁´◡`❁)
