こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
CSSでプログレスバーにスタイルをつけます。
demoは、「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML&JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Progress Steps</title> </head> <body> <div class="container"> <div class="progress-container"> <div class="progress" id="progress"></div> <div class="circle active">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> </div> <button class="btn" id="prev" disabled>Prev</button> <button class="btn" id="next">Next</button> </div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
const progress = document.getElementById('progress') const prev = document.getElementById('prev') const next = document.getElementById('next') const circles = document.querySelectorAll('.circle') let currentActive = 1 next.addEventListener('click', () => { currentActive++ if(currentActive > circles.length) { currentActive = circles.length } update() }) prev.addEventListener('click', () => { currentActive-- if(currentActive < 1) { currentActive = 1 } update() }) function update() { circles.forEach((circle, idx) => { if(idx < currentActive) { circle.classList.add('active') } else { circle.classList.remove('active') } }) const actives = document.querySelectorAll('.active') progress.style.width = (actives.length -1) / (circles.length -1) * 100 + '%' if(currentActive === 1) { prev.disabled = true } else if(currentActive === circles.length) { next.disabled = true } else { prev.disabled = false next.disabled = false } } |
現状だと以下のようになります。
プログレスバーのスタイリング
全体のスタイル
全体に適用するスタイルを定義します。
|
1 2 3 4 5 6 7 |
/* フォント設定 */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); /* ボックスサイジングの設定 */ * { box-sizing: border-box; } |
box-sizingは、divなどのボックス要素のサイズを算出するために使用します。「border-box」は、パディング(padding)とボーダー(border)を幅(width)と高さ(height)に含める設定です。
詳しい説明は、こちらの記事を参照してください。
body
bodyにスタイリングします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { /* 背景色変更 */ background-color: #f6f7fb; /* フォントの種類設定 */ font-family: "Muli", sans-serif; /* flex適用 */ display: flex; /* 積み重なるように配置する */ flex-direction: column; /* アイテムを横中央付近にまとめる */ align-items: center; /* アイテムを縦中央に寄せる */ justify-content: center; /* 画面サイズに対して100%の高さにする */ height: 100vh; /* はみ出た要素は非表示 */ overflow: hidden; /* マージン0 */ margin: 0; } |
container
containerのスタイリングです。
|
1 2 3 4 |
.container { /* テキストを中央へ */ text-align: center; } |
progress-container
progress-containerのスタイリングです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.progress-container { /* flex適用 */ display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; /* 要素定義の親 */ position: relative; margin-bottom: 30px; /* 最大幅100% */ max-width: 100%; width: 350px; } |
progress
次は、progressのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.progress { background-color: #3498db; /* progress-containerを起点に 位置を決める */ position: absolute; /* 上から半分の位置 */ top: 50%; /* 左端の位置 */ left: 0; /* プログレスバーの中央寄せ top50%で親要素の中央の位置まで 移動しているので、高さを子要素の 半分に引き戻す */ transform: translateY(-50%); height: 4px; /* ここの数値をいじると線になる */ width: 0; z-index: -1; /* 変化の指定 */ transform: 0.4s ease; } |
ここのwidthを50%とかにするとプログレスバーに色がつきます。
.progress-container::before
プログレスバーに未実行線をつけましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 選択した要素の最初の子要素として擬似要素を作成 */ .progress-container::before { content: ""; background-color: #e0e0e0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 100%; z-index: -1; } |
circle
次は、circleにスタイリングしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.circle { background-color: #fff; color: #999; border-radius: 50%; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 3px solid #e0e0e0; transition: 0.4s ease; } /* activeはJavaScriptで動的につける */ .circle.active { border-color: #3498db; } |
設定しているプロパティは既に出てきているものばかりなので、もう説明はいらないですね。
btn
btn(ボタン)のスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.btn { background-color: #3498db; color: #fff; /* 枠線なし */ border: 0; border-radius: 6px; cursor: pointer; /* 親要素からフォントを軽症 */ font-family: inherit; padding: 8px 30px; margin: 5px; font-size: 14px; } .btn:active { /* ボタンを押下したときに ちょっとサイズを小さくすることで 押した感を出す */ transform: scale(0.98); } .btn:focus { /* ボタンを押したときに青いアウトラインが 出るのを防ぐ */ outline: 0; } /* disabled要素が着いた時 */ .btn:disabled { background-color: #e0e0e0; cursor: not-allowed; } |
固定値の変数化
background-color: #e0e0e0;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
:root { --line-border-fill: #3498db; --line-border-empty: #e0e0e0; } .progress-container::before { ... background-color: var(--line-border-empty); ... } .progress { background-color: var(--line-border-fill); ... } .circle { ... border: 3px solid var(--line-border-empty); ... } .circle.active { border-color: var(--line-border-fill); } .btn { background-color: var(--line-border-fill); ... } .btn:disabled { background-color: var(--line-border-empty); ... } |
このように「:root」の疑似クラスに変数を定義できます。
これで、完成です。
おわりに
CSSも一つ一つのパラメータを理解して実装していけば恐るるに足らず、ですね^^
しかも使い回しができるので、習得もしやすそうです。
アプリケーションを実装する上で、見た目(スタイリング)は重要な項目なので、一緒に勉強していきましょう\^^/
それでは。また!
CSSまとめ
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
/* フォント設定 */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); :root { --line-border-fill: #3498db; --line-border-empty: #e0e0e0; } /* ボックスサイジングの設定 */ * { box-sizing: border-box; } body { /* 背景色変更 */ background-color: #f6f7fb; /* フォントの種類設定 */ font-family: "Muli", sans-serif; /* flex適用 */ display: flex; /* 積み重なるように配置する */ flex-direction: column; /* アイテムを横中央付近にまとめる */ align-items: center; /* アイテムを縦中央に寄せる */ justify-content: center; /* 画面サイズに対して100%の高さにする */ height: 100vh; /* はみ出た要素は非表示 */ overflow: hidden; /* マージン0 */ margin: 0; } .container { /* テキストを中央へ */ text-align: center; } .progress-container { /* flex適用 */ display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; /* 要素定義の親 */ position: relative; margin-bottom: 30px; /* 最大幅100% */ max-width: 100%; width: 350px; } /* 選択した要素の最初の子要素として擬似要素を作成 */ .progress-container::before { content: ""; background-color: var(--line-border-empty); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 100%; z-index: -1; } .progress { background-color: var(--line-border-fill); /* progress-containerを起点に 位置を決める */ position: absolute; /* 上から半分の位置 */ top: 50%; /* 左端の位置 */ left: 0; /* プログレスバーの中央寄せ top50%で親要素の中央の位置まで 移動しているので、高さを子要素の 半分に引き戻す */ transform: translateY(-50%); height: 4px; /* ここの数値をいじると線になる */ width: 0%; z-index: -1; /* 変化の指定 */ transform: 0.4s ease; } .circle { background-color: #fff; color: #999; border-radius: 50%; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line-border-empty); transition: 0.4s ease; } .circle.active { border-color: var(--line-border-fill); } .btn { background-color: var(--line-border-fill); color: #fff; /* 枠線なし */ border: 0; border-radius: 6px; cursor: pointer; /* 親要素からフォントを軽症 */ font-family: inherit; padding: 8px 30px; margin: 5px; font-size: 14px; } .btn:active { /* ボタンを押下したときに ちょっとサイズを小さくすることで 押した感を出す */ transform: scale(0.98); } .btn:focus { /* ボタンを押したときに青いアウトラインが 出るのを防ぐ */ outline: 0; } /* disabled要素が着いた時 */ .btn:disabled { background-color: var(--line-border-empty); cursor: not-allowed; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。