こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、検索バーの表示・非表示をCSSでスタイリングします。
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 |
</html> <!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>Hidden Search</title> </head> <body> <div class="search"> <input type="text" class="input" placeholder="Search..."> <button class="btn"> <i class="fas fa-search"></i> </button> </div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 要素を取得する // サーチエリア const search = document.querySelector('.search') // ボタン const btn = document.querySelector('.btn') // 検索バー const input = document.querySelector('.input') // クリックイベントの登録 btn.addEventListener('click', () => { // addではなくtoggleにすると要素の付け替えができる search.classList.toggle('active') // 検索バーにカーソルをフォーカスする input.focus() }) |
現状、ページは以下のように表示されます。
スタイリング
CSSでスタイリングをしていきます。
なお、項目に出てくるbodyやsearchは、HTMLに設定した要素です。
全体の設定
全体に適用する設定をスタイリングします。
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&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 |
body { /* グラデーション付きの背景色 */ background-image: linear-gradient(90deg, #7d5fff, #7158e2); /* フォント設定 */ font-family: "Roboto", sans-serif; /* コンテンツをflexへ */ display: flex; /* ページの縦中央にflexアイテムを配置 */ align-items: center; /* ページ横中央にflexアイテムを配置 */ justify-content: center; margin: 0; } |
search
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.search { /* アイテム位置の起点にする */ position: relative; height: 50px; } .search .input { /* 背景色白 */ background-color: #fff; /* 枠線なし */ border: 0; /* 文字の大きさ */ font-size: 18px; padding: 15px; height: 50px; width: 50px; /* アニメーション */ transition: width 0.3s ease; } |
btn
btnのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.btn { /* 背景色白 */ background-color: #fff; /* 枠線なし */ border: 0; /* カーソル */ cursor: pointer; /* 文字の大きさ */ font-size: 24px; /* relativeを設定した要素に対しての位置 */ position: absolute; /* 上部位置 */ top: 0; /* 左部位置 */ left: 0; /* inputと同じ大きさにすることで隠す */ height: 50px; width: 50px; /* アニメーション：トリガー:transform */ transition: transform 0.3s ease; } |
focus
inputとbtnのfocus時のスタイリングをします。
|
1 2 3 4 5 |
.btn:focus, .input:focus { /* 青枠線を非表示 */ outline: none; } |
active
JavaScriptで付与するactiveクラスのスタイリングをします。
|
1 2 3 4 5 6 7 |
.search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); } |
これで、検索をクリックしたら検索の表示・非表示が切り替えられます。
おわりに
CSSでかっこいいデザインを実装するには、「transition」が鍵ですね。ちょっと難しく感じられますが、分解して考えると大したことはありません(技術は大したことありますが)。
|
1 2 3 4 5 |
// transitionでアニメーション // 第一引数にアニメーション実行トリガーになるもの(ここではtransform)を指定 // 第二引数に何秒かけてアニメーションを実行するのか指定 // 第三引数にどのようにアニメーションを実行するのか指定 transition: transform 0.3s ease; |
本記事の内容を何回か実装すると慣れると思います!
それでは、また！
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックス要素のサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { /* グラデーション付きの背景色 */ background-image: linear-gradient(90deg, #7d5fff, #7158e2); /* フォント設定 */ font-family: "Roboto", sans-serif; /* コンテンツをflexへ */ display: flex; /* ページの縦中央にflexアイテムを配置 */ align-items: center; /* ページ横中央にflexアイテムを配置 */ justify-content: center; margin: 0; } .search { /* アイテム位置の起点にする */ position: relative; height: 50px; } .search .input { /* 背景色白 */ background-color: #fff; /* 枠線なし */ border: 0; /* 文字の大きさ */ font-size: 18px; padding: 15px; height: 50px; width: 50px; /* アニメーション:トリガー:width */ transition: width 0.3s ease; } .btn { /* 背景色白 */ background-color: #fff; /* 枠線なし */ border: 0; /* カーソル */ cursor: pointer; /* 文字の大きさ */ font-size: 24px; /* relativeを設定した要素に対しての位置 */ position: absolute; /* 上部位置 */ top: 0; /* 左部位置 */ left: 0; /* inputと同じ大きさにすることで隠す */ height: 50px; width: 50px; /* アニメーション：トリガー:transform */ transition: transform 0.3s ease; } .btn:focus, .input:focus { /* 青枠線を非表示 */ outline: none; } .search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。