[CSS]プログレスバーのスタイリング!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

CSSでプログレスバーにスタイルをつけます。

demoは、「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML&JavaScript

現状だと以下のようになります。

プログレスバーのスタイリング

全体のスタイル

全体に適用するスタイルを定義します。

box-sizingは、divなどのボックス要素のサイズを算出するために使用します。「border-box」は、パディング(padding)とボーダー(border)を幅(width)と高さ(height)に含める設定です。

詳しい説明は、こちらの記事を参照してください。

body

bodyにスタイリングします。

container

containerのスタイリングです。

progress-container

progress-containerのスタイリングです。

progress

次は、progressのスタイリングをします。

ここのwidthを50%とかにするとプログレスバーに色がつきます

.progress-container::before

プログレスバーに未実行線をつけましょう。

circle

次は、circleにスタイリングしましょう。

設定しているプロパティは既に出てきているものばかりなので、もう説明はいらないですね。

btn

btn(ボタン)のスタイリングをします。

固定値の変数化

background-color: #e0e0e0;など何度も設定している値は、変数化しましょう。

このように「:root」の疑似クラスに変数を定義できます。

これで、完成です。

おわりに

CSSも一つ一つのパラメータを理解して実装していけば恐るるに足らず、ですね^^

しかも使い回しができるので、習得もしやすそうです。

アプリケーションを実装する上で、見た目(スタイリング)は重要な項目なので、一緒に勉強していきましょう\^^/

それでは。また!

CSSまとめ

CSSコード

コメントを残す