プログラミング

検索ボックス 表示 CSS

最終更新： 22/04/2025
1 分の読み

検索アイコンをクリックすると表示される検索ボックスを作成する方法について、CSSとHTMLを使用して完全に実装する方法を詳しく解説します。このエフェクトは、ウェブサイトやアプリケーションにおいて、ユーザーインターフェースを直感的かつ美しくデザインするために非常に有用です。ここでは、検索アイコンをクリックすると検索ボックスがアニメーションで表示される実装を紹介します。

必要な技術

  1. HTML – 検索アイコンと検索ボックスの構造を作成します。

    関連記事

  2. CSS – 検索ボックスのスタイルやアニメーションを設定します。

  3. JavaScript (オプション) – クリックイベントをトリガーし、検索ボックスの表示/非表示を制御します。

手順

1. HTML構造の作成

まず、検索アイコンと検索ボックスの基本的なHTML構造を作成します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>検索ボックスの実装title>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <div class="search-container">
        <button class="search-icon" aria-label="検索">
            🔍
        button>
        <div class="search-box">
            <input type="text" placeholder="検索..." />
            <button type="submit">検索button>
        div>
    div>

    <script src="script.js">script>
body>
html>

このコードでは、検索アイコンとして「🔍」を使用し、search-boxというクラスを持つ入力ボックスとボタンを配置しています。

2. CSSスタイルの追加

次に、検索ボックスが非表示の状態から表示されるアニメーションとともにスタイリングを行います。

css
/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.search-container {
    position: relative;
}

.search-icon {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.search-icon:focus {
    outline: none;
    transform: scale(1.2);
}

.search-box {
    position: absolute;
    top: -10px;
    right: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.search-box input {
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 15px;
}

.search-box button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
}

.search-box button:hover {
    background-color: #0056b3;
}

/* 開いたときのスタイル */
.search-box.open {
    display: block;
    opacity: 1;
    transform: translateY(10px);
}

このCSSでは、検索ボックスを最初は非表示にし、search-box.openクラスが追加されると表示されるようにしています。アニメーションを使って、検索ボックスがスムーズに表示されるようにしています。

3. JavaScriptによる動作の制御

次に、検索アイコンがクリックされたときに検索ボックスが表示/非表示されるように、JavaScriptを追加します。

javascript
// script.js

document.addEventListener('DOMContentLoaded', function () {
    const searchIcon = document.querySelector('.search-icon');
    const searchBox = document.querySelector('.search-box');

    searchIcon.addEventListener('click', function () {
        searchBox.classList.toggle('open');
    });
});

このJavaScriptコードは、検索アイコンがクリックされたときにsearch-boxにopenクラスを追加または削除します。openクラスが追加されることで、検索ボックスが表示され、削除されると非表示になります。

完成した動作

  1. ページを読み込んだ時点では検索ボックスは非表示です。

  2. ユーザーが検索アイコンをクリックすると、検索ボックスがアニメーションで表示されます。

  3. 再度アイコンをクリックすると、検索ボックスが非表示になります。

カスタマイズのヒント

  • アニメーションの変更: アニメーションの速さや表示位置、表示方法を変更したい場合は、CSSのtransitionやtransformプロパティを調整することでカスタマイズできます。

  • アイコンの変更: 🔍のアイコンを他のアイコンに変更したい場合は、FontAwesomeやSVGアイコンを使うことができます。

  • レスポンシブ対応: スマートフォンやタブレットの画面で見やすくするために、メディアクエリを使用してレイアウトを調整できます。

結論

この方法で、クリック時に検索ボックスがスムーズに表示されるインタラクティブなUIを作成することができます。CSSのトランジションとJavaScriptをうまく組み合わせることで、ユーザーに快適な操作感を提供することができます。

最終更新： 22/04/2025
1 分の読み
Back to top button