私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

検索ボックス 表示 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