CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【HTML・CSS】レスポンシブナビゲーションメニューに検索ボックスを追加する方法

Webサイトのナビゲーションバーに検索ボックスを組み込むと、ユーザーが必要な情報へ素早くアクセスできるようになり、サイト全体の使いやすさが向上します。本記事では、HTMLとCSSのみを使用して、レスポンシブ対応のナビゲーションメニュー内に検索ボックスを追加する方法を解説します。

実装例

以下のコードでは、通常の画面幅では検索ボックスをナビゲーションバーの右側に配置し、画面幅が830px以下になるとメディアクエリによってレイアウトが切り替わり、検索ボックスが全幅表示になるように設計しています。

<!DOCTYPE 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="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
}
nav {
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
input[type="text"] {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 8px;
    font-size: 17px;
}
.selected {
    background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 830px) {
.links {
    display: block;
}
input[type="text"] {
    display: block;
    width: 100%;
    margin: 0px;
    border-bottom: 2px solid rgb(178, 137, 253);
    text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> ホーム
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> ログイン
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> 新規登録
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> お問い合わせ
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> 詳細情報
</a>
<input type="text" placeholder="キーワードを検索.." />
</nav>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のように表示されます。

【HTML・CSS】レスポンシブナビゲーションメニューに検索ボックスを追加する方法

続いて、画面幅を830px以下に縮小すると、メディアクエリが適用され、各リンクと検索ボックスが縦方向に積み重なって表示されます。

【HTML・CSS】レスポンシブナビゲーションメニューに検索ボックスを追加する方法

実装のポイント

  • 検索ボックスの右寄せ： input[type="text"] に float: right; を指定することで、ナビゲーションバーの右側に検索ボックスを自然に配置できます。
  • ホバーエフェクト： .links:hover で背景色を変更することにより、マウスオーバー時に視覚的なフィードバックを与え、操作性が向上します。
  • レスポンシブ対応： @media screen and (max-width: 830px) のメディアクエリ内で、リンクを display: block; に変更し、検索ボックスにも width: 100% を指定することで、スマートフォンなどの狭い画面でも押しやすい縦並びレイアウトへ自動的に切り替わります。
  • アイコンの活用： Font Awesomeを読み込むことで、「ホーム」や「ログイン」などの項目に直感的に意味が伝わるアイコンを手軽に追加できます。

このように、CSSの float とメディアクエリを組み合わせるだけで、JavaScriptに頼らずとも、検索ボックス付きのレスポンシブナビゲーションメニューを簡単に実現できます。ぜひ自身のサイトに合わせて配色やブレークポイントを調整して活用してください。

  1. Windows 10のコンテキストメニューにPowerShellを追加する方法

    ```html Windows 10のコンテキストメニューとは Windows 10におけるコンテキストメニューとは、マウスを右クリックしたときに表示されるGUI（グラフィカルユーザーインターフェース）のメニューです。表示される項目は、クリックした対象（ファイル・フォルダー・デスクトップなど）やアプリケーションによって異なり、その場で必要な操作をすばやく実行できる便利なショートカットとして機能します。 よく使うツールをこのメニューに登録しておけば、日々の作業効率が大きく向上します。本記事では、Windows 10のコンテキストメニューにPowerShellを追加する方法を、レジストリエディター

  2. Windows 10のコンテキストメニューに検索を追加する方法【レジストリ編集】

    検索機能は、どのオペレーティングシステムにとっても欠かせない必須機能です。この記事では、レジストリエディターを使用して、Windows PCのさまざまな場所にあるコンテキストメニュー(右クリックメニュー)に検索オプションを手動で追加する方法をご紹介します。 Windows 10のコンテキストメニューに検索を追加する なお、この方法はWindows 10専用であり、Windows 11では動作しません。以下で紹介するレジストリキーの多くは、現行バージョンのWindowsには存在しないため、あらかじめご了承ください。 1. キーボードでWindowsキー + Rを押し、「ファイル名を指定して実行」