こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、カウンターアプリのUIを実装します。
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 25 26 27 28 29 30 |
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Increment Counter</title> </head> <body> <div class="counter-container"> <i class="fab fa-twitter fa-3x"></i> <div class="counter" data-target="12000"></div> <span>Twitter Followers</span> </div> <div class="counter-container"> <i class="fab fa-youtube fa-3x"></i> <div class="counter" data-target="5000"></div> <span>YouTube Subscribers</span> </div> <div class="counter-container"> <i class="fab fa-facebook fa-3x"></i> <div class="counter" data-target="7500"></div> <span>Facebook Fans</span> </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 |
// 要素を取得する const counters = document.querySelectorAll('.counter') // 取得した要素分だけループする counters.forEach(counter => { // カウンターの初期値 counter.innerText = '0' // カウンター更新 const updateCounter = () => { // 属性の取得 const target = +counter.getAttribute('data-target') // counter値(0)を格納 const c = +counter.innerText // カウント const increment = target / 200 // targetは最大カウント数 if(c < target) { // 四捨五入する(37.8 -> 38にする) counter.innerText = `${Math.ceil(c + increment)}` // 1msごとにupdateCouunterをストップ setTimeout(updateCounter, 1) } else { // 最大値を超えた場合は、最大値を設定 counter.innerText = target } } updateCounter() }) |

スタイリング
スタイリングを実装します。項目に出てくるbodyやcounterは、HTMLの要素です。
全体の設定
全体の設定をします。
1 2 3 4 5 6 7 8 9 10 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap"); * { /* ボックスサイズの算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
bodyの設定
bodyの設定をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background-color: #8e44ad; color: #fff; font-family: "Roboto Mono", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点の真ん中に要素を配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; /* ページビュー縦100% */ height: 100vh; overflow: hidden; margin: 0; } |

counter-containerの設定
counter-containerのをします。
1 2 3 4 5 6 7 8 9 |
.counter-container { display: flex; /* flexアイテムを重なり合うように配置 */ flex-direction: column; justify-content: center; /* テキスト中央 */ text-align: center; margin: 30px 50px; } |

counterの設定
counterの設定をします。
1 2 3 4 |
.counter { font-size: 60px; margin-top: 10px; } |

メディアクエリの設定
メディアクエリの設定をします。
1 2 3 4 5 6 7 |
/* 580px以下の時 */ @media (max-width: 580px) { body { /* flexアイテムを縦に配置を */ flex-direction: column; } } ; |

これで、完成です。
おわりに
メディアクエリを使うとレスポンシブルウェブサイトが作れて便利ですよね。
まぁ、この辺りはBootstrapを導入すれば割と簡単に実装できたりしますが、仕組みを知る上で自分でも実装できると良いと思います^^
それでは、また!
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap"); * { /* ボックスサイズの算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: #8e44ad; color: #fff; font-family: "Roboto Mono", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点の真ん中に要素を配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; /* ページビュー縦100% */ height: 100vh; overflow: hidden; margin: 0; } .counter-container { display: flex; /* flexアイテムを縦に配置 */ flex-direction: column; justify-content: center; /* テキスト中央 */ text-align: center; margin: 30px 50px; } .counter { font-size: 60px; margin-top: 10px; } /* 580px以下の時 */ @media (max-width: 580px) { body { /* flexアイテムを縦に配置を */ flex-direction: column; } } ; |
コメントを残す
コメントを投稿するにはログインしてください。