こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、 ネオンボードアプリをCSSでスタイリングしたいと思います。
DJとかを連想する感じのアプリですね。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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>Hoverboard</title> </head> <body> <div class="container" id="container"></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 |
// 要素の取得 const container = document.getElementById('container') // ネオンカラーの定義 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'] // ボードの数 const SQUARES = 500 // ボード作成 for(let i = 0; i < SQUARES; i++) { const square = document.createElement('div') square.classList.add('square') square.addEventListener('mouseover', () => setColor(square)) square.addEventListener('mouseout', () => removeColor(square)) container.appendChild(square) } // ネオンカラーを設定 function setColor(element) { const color = getRandomColor() element.style.background = color element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` } // ランダムなネオンカラーを返す function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)] } // ネオンカラーを削除 function removeColor(element) { element.style.background = '#1d1d1d' element.style.boxShadow = '0 0 2px #000' } |
スタイリング
これからCSSでスタイリングをしていきます。項目のboydやcontainerは、HTMLの要素です。
全体の設定
|
1 2 3 4 |
* { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background-color: #111; height: 100vh; margin: 0; /* 飛び出た要素を非表示 */ overflow: hidden; /* flexアイテムにする */ display: flex; /* flexアイテム重点に配置 */ align-items: center; /* flex横線中央にアイテムを配置 */ justify-content: center; } |
containerの設定
|
1 2 3 4 5 6 7 8 9 |
.container { display: flex; align-items: center; justify-content: center; /* flexアイテムの折り返し位置を決める */ flex-wrap: wrap; transition: 2s ease; } |
変化がないですね。
squareの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.square { background-color: #1d1d1d1d; box-shadow: 0 0 2px #000; height: 16px; width: 16px; margin: 2p; transition: 2s ease; } .square:hover { /* トランジションによるアニメーションが 完了するまでの所要時間を秒数またはミリ秒数で指定 */ transition-duration: 0s; } |
超うっすらとボックスが表示されています。カーソルを動かすと以下のようになります。
これで、完成です。
おわりに
今回のアプリケーションは、JavaScriptの実装の方が難しいですね。CSSの方は、flex設定をマスターしておけば、あとは特に難しくないです。
フロントエンド業務はクライアントとの調整が発生するので、正直あまり仕事ではやりたくないですが(こんなこと言ってはダメかもですが)、プライベートでは、面白いアプリケーションをガンガン作れるようになりたいと思います。
それでは、また!
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 |
* { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { background-color: #111; height: 100vh; margin: 0; /* 飛び出た要素を非表示 */ overflow: hidden; /* flexアイテムにする */ display: flex; /* flexアイテム重点に配置 */ align-items: center; /* flex横線中央にアイテムを配置 */ justify-content: center; } .container { display: flex; align-items: center; justify-content: center; /* flexアイテムの折り返し位置を決める */ flex-wrap: wrap; transition: 2s ease; } .square { background-color: #1d1d1d1d; box-shadow: 0 0 2px #000; height: 16px; width: 16px; margin: 2p; transition: 2s ease; } .square:hover { /* トランジションによるアニメーションが 完了するまでの所要時間を秒数またはミリ秒数で指定 */ transition-duration: 0s; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。