【HTML】【CSS】progressタグとは?プロパティの設定とCSSでのスタイルのあて方

progressタグとは?
progressタグは進捗状況をを表示させることができます。 このタグだけで、プログレスバーを作ることができます。
<progress></progress>
上のコードだけで、以下が表示されます。
progressタグの設定
max : 最大値を設定。
value : 進捗の値
<progress value="70" max="100">70 %</progress>
結果
progressタグにCSSを当てる
-webkit-appearance : 初期設定のスタイルをリセット
::-webkit-progress-bar : プログレスバーの部分
::-webkit-progress-value : 進捗状況の部分
progress {
-webkit-appearance: none;
}
progress::-webkit-progress-bar {
background-color: #ccc;
}
progress::-webkit-progress-value {
background-color: cyan;
}
結果
以上、progressタグについて、解説しました。 今度は、javascriptでprogressバーを制御する方法について説明したいと思います。
参考

まとめ
- <progress></progress>タグで進捗状況を表示するバーを作ることができる。
- max や value の値を設定できる。
-
-webkit-appearance : 初期設定のスタイルをリセット
::-webkit-progress-bar : プログレスバーの部分
::-webkit-progress-value : 進捗状況の部分