こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、3D画像のスタイリングをCSSで実装します。3Dといいつつ、2D画像をCSSを使って3Dっぽく見せる感じです。
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 14 15 16 17 18 19 20 |
<!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>3D Boxes Background</title> </head> <body> <button id="btn" class="magic">Magic 🎩</button> <div id="boxes" class="boxes big"></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 |
// 要素取得 const boxesContainer = document.getElementById('boxes') const btn = document.getElementById('btn') // クリックイベントの登録 btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) // ボックスを作成 function createBoxes() { // 縦 for (let i = 0; i < 4; i++) { // 横 for (let j = 0; j < 4; j++) { // div要素作成 const box = document.createElement('div') // boxクラス付与 box.classList.add('box') // 画像位置の調整 box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` // 要素を追加 boxesContainer.appendChild(box) } } } createBoxes() |
スタイリング
CSSでスタイリングをしていきます。項目に出てくるbodyやmagicは、CSSの要素です。
全体の設定
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { background-color: #fafafa; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; } |
magicの設定
|
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 |
.magic { background-color: #f9ca24; color: #fff; font-family: "Poppins", sans-serif; /* 枠線を消す */ border: 0; /* 枠線を丸く */ border-radius: 3px; font-size: 16px; padding: 12px 20px; cursor: pointer; /* 位置固定 */ position: fixed; top: 20px; /* 文字間隔を広げる */ letter-spacing: 1px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); /* 表示優先度をあげる */ z-index: 100; } /* ボタンを押下した時 */ .magic:focus { /* 青線を消す */ outline: none; } /* ボタンがアクティブ状態になった時 */ .magic:active { /* 影を非表示 */ box-shadow: none; /* Y軸方向に要素を移動 ボタンに押した感を出す */ transform: translateY(2px); } |
boxesの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.boxes { display: flex; /* flexアイテムの折り返し方法を指定 */ flex-wrap: wrap; /* 各アイテムを均等に配置し 各アイテムの両側に半分の大きさの間隔を置く */ justify-content: space-around; height: 500px; width: 500px; /* 要素位置の基準 */ position: relative; /* 要素変化の指定 */ transition: 0.4s ease; } .boxes.big { width: 600px; height: 600px; } |
boxの設定
|
1 2 3 4 5 6 7 8 9 10 |
.box { background-image: url("https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif"); /* 画像を繰り返さない */ background-repeat: no-repeat; background-size: 500px 500px; position: relative; height: 125px; width: 125px; transition: 0.4 ease; } |
box::beforeの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box::before { content: ""; background-color: #f9ca24; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; /* 要素をY軸方向に傾斜変形させる */ transform: skewX(45deg); } |
box::afterの設定
|
1 2 3 4 5 6 7 8 9 10 |
.box::after { content: ""; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg); } |
boxes.big .boxの設定
|
1 2 3 |
.boxes.big .box { transform: rotateZ(360deg); } |
これで、完成です。
おわりに
CSSとJavaScriptを組み合わせると、アイデア次第で色々なアプリケーションが実装できます。
仕事ではあまりデザイン性を求められることはありませんが、そういったことを意識して仕事をすれば、より多くの経験を詰めると思っているので、日々勉強です^^
それでは、また!
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { background-color: #fafafa; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; } .magic { background-color: #f9ca24; color: #fff; font-family: "Poppins", sans-serif; /* 枠線を消す */ border: 0; /* 枠線を丸く */ border-radius: 3px; font-size: 16px; padding: 12px 20px; cursor: pointer; /* 位置固定 */ position: fixed; top: 20px; /* 文字間隔を広げる */ letter-spacing: 1px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); /* 表示優先度をあげる */ z-index: 100; } /* ボタンを押下した時 */ .magic:focus { /* 青線を消す */ outline: none; } /* ボタンがアクティブ状態になった時 */ .magic:active { /* 影を非表示 */ box-shadow: none; /* Y軸方向に要素を移動 ボタンに押した感を出す */ transform: translateY(2px); } .boxes { display: flex; /* flexアイテムの折り返し方法を指定 */ flex-wrap: wrap; /* 各アイテムを均等に配置し 各アイテムの両側に半分の大きさの間隔を置く */ justify-content: space-around; height: 500px; width: 500px; /* 要素位置の基準 */ position: relative; /* 要素変化の指定 */ transition: 0.4s ease; } .boxes.big { width: 600px; height: 600px; } .box { background-image: url("https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif"); /* 画像を繰り返さない */ background-repeat: no-repeat; background-size: 500px 500px; position: relative; height: 125px; width: 125px; transition: 0.4 ease; } .box::before { content: ""; background-color: #f9ca24; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; /* 要素をY軸方向に傾斜変形させる */ transform: skewX(45deg); } .box::after { content: ""; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg); } .boxes.big .box { transform: rotateZ(360deg); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。