▲TOPへ戻る

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

progress

progressタグとは?

progressタグは進捗状況をを表示させることができます。 このタグだけで、プログレスバーを作ることができます。

<progress></progress>

上のコードだけで、以下が表示されます。

progressタグの設定

max : 最大値を設定。

value : 進捗の値

<progress value="70" max="100">70 %</progress>

結果

70 %

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バーを制御する方法について説明したいと思います。

参考

js
【javascript】progressタグを制御する スクロール(scroll)量やローディング(loading)アニメーションとして

まとめ

  1. <progress></progress>タグで進捗状況を表示するバーを作ることができる。
  2. maxvalue の値を設定できる。
  3. -webkit-appearance : 初期設定のスタイルをリセット

    ::-webkit-progress-bar : プログレスバーの部分

    ::-webkit-progress-value : 進捗状況の部分

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ