検索付きのナビゲーションバーを作成する方法

css

2023.05.16

この記事では、CSSを使用して美しい検索バーを作成する方法を解説します。サンプルコードを参考にして、あなたのウェブサイトにおしゃれな検索バーを実装しましょう。

基本的なのHTML構造
CSSデザイン

基本的なのHTML構造

まず、基本的なHTMLを作成します。

<div class="topnav">
  <a class="active" href="#home">HOME</a>
  <a href="#about">ABOUT</a>
  <a href="#contact">CONTACT</a>
  <input type="text" placeholder="検索">
</div>

CSSデザイン

以下のサンプルコードを参考してください。

/* トップナビゲーションバーに黒い背景色を追加 */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
}

/* ナビゲーションバーのリンクスタイルを設定 */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* ホバー時にリンクの色を変更 */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* 現在選択されている要素を強調表示 */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}

/* ナビゲーションバーの検索ボックススタイルを設定 */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

/* 画面幅が 600px 未満の場合、メニューオプションと検索ボックスを垂直にスタック表示 */
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}