こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、検索バーの表示・非表示の制御方法を学びましょう。
demoは、「こちら」で確認できます。
環境構築
最初に、簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
開発
ページの作成
最初にページの作成をしましょう。index.htmlに次のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
</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> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイルの追加
次にスタイルをstyle.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 |
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { box-sizing: border-box; } body { background-image: linear-gradient(90deg, #7d5fff, #7158e2); font-family: "Roboto", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .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 { background-color: #fff; border: 0; cursor: pointer; font-size: 24px; position: absolute; top: 0; left: 0; height: 50px; width: 50px; transition: transform 0.3s ease; } .btn:focus, .input:focus { outline: none; } .search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); } |
ここまで実装すると以下のようになります。
検索バーは、スタイルでボタンの裏側に隠しているみたいですね。
個人的に要素の中央寄せについて気になったので、別記事にしました。
JavaScriptの実装
さて、いよいよJavaScriptを実装しましょう。
styleに設定した「.active」クラスを「searchクラスがついている要素」に付与すると要素が表示されます。
|
1 2 3 4 |
... <body> <div class="search active"> <<< ここにつける ... |
要素を取得する
JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。
|
1 2 3 4 5 6 7 |
// 要素を取得する // サーチエリア const search = document.querySelector('.search') // ボタン const btn = document.querySelector('.btn') // 検索バー const input = document.querySelector('.input') |
クリックイベントの登録
次にボタンのクリックイベントの登録を行います。
|
1 2 3 4 5 6 7 |
// クリックイベントの登録 btn.addEventListener('click', () => { // add/removeではなくtoggleにすると要素の付け替えができる search.classList.toggle('active') // 検索バーにカーソルをフォーカスする input.focus() }) |
これでOKです。簡単ですね。
以前作ったアプリでは、要素の付け替えに「add/remove」メソッドを使っていましたが、今回は「toggle」を使っています。これだけでイベント発生毎にactiveクラスを付け替えしてくれます。
おわりに
「これ、サイトで見たことあるやつ！」という感じのやつでしたね！目から鱗で勉強になります。
それと同時に、CSSの知識があればもっと面白いアプリケーションを個人で開発できるようになると実感しました。
今はgolangのサーバーサイド実装に集中してますが、それが落ち着いたらCSSも勉強してみようと思います。
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
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() }) |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。