プログラミング

CSSドロップダウンメニューの作成

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

ドロップダウンメニューは、ウェブデザインにおいて非常に重要な要素です。ユーザーが必要な情報を迅速に見つけるために利用されます。この記事では、CSSだけを使用してドロップダウンメニューを作成する方法について、詳細に説明します。CSSだけを使用することで、JavaScriptの使用を避け、軽量で高速なインタラクションを提供することができます。

ドロップダウンメニューの基本的な構造

ドロップダウンメニューを作成するためには、まずHTMLの基本構造を作成し、次にCSSでスタイルを追加します。以下は、最もシンプルなドロップダウンメニューの例です。

関連記事

HTMLコード例

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSドロップダウンメニューtitle>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <nav class="navbar">
        <ul>
            <li><a href="#">ホームa>li>
            <li><a href="#">サービスa>
                <ul class="dropdown">
                    <li><a href="#">Webデザインa>li>
                    <li><a href="#">SEOサービスa>li>
                    <li><a href="#">マーケティングa>li>
                ul>
            li>
            <li><a href="#">お問い合わせa>li>
        ul>
    nav>
body>
html>

CSSコード

このドロップダウンメニューを機能させるために必要なCSSは以下の通りです。

css
/* ベーススタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #333;
    text-align: center;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    display: inline-block;
    position: relative;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    display: block;
}

/* ドロップダウンメニューのスタイル */
.navbar li:hover > .dropdown {
    display: block;
}

.navbar .dropdown {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 200px;
    top: 100%;
    left: 0;
}

.navbar .dropdown li {
    display: block;
}

.navbar .dropdown a {
    padding: 12px 16px;
    background-color: #333;
    color: white;
}

.navbar .dropdown a:hover {
    background-color: #555;
}

/* ホバー時に親メニューを強調表示 */
.navbar li:hover > a {
    background-color: #555;
}

解説

  1. HTMLの構造

    • navタグ内にリストを配置し、その中にメニューアイテムを並べます。

        タグでリストを作成し、

      • タグでメニュー項目を設定します。

      • ドロップダウンメニューは、親アイテム（ここでは「サービス」）の中に別の

          タグで作成します。

      • CSSのスタイル

        • .navbarクラスは、ナビゲーションバー全体のスタイルを設定します。背景色、テキスト色、配置方法などを設定しています。

        • .navbar ulでは、リストのデフォルトのスタイル（丸い箇条書きマーカーや余白など）を解除します。

        • .navbar liは、リストアイテムを横並びにし、position: relativeを使って、子要素であるドロップダウンメニューを適切に配置できるようにします。

        • .dropdownクラスでは、ドロップダウンメニューを最初は非表示に設定し、親アイテムにホバーしたときに表示されるようにします。position: absoluteを使用して、ドロップダウンメニューを親アイテムの真下に配置します。

      • ホバー効果

        • 親メニュー項目にホバーすると、その子要素であるドロップダウンメニューが表示されます。.navbar li:hover > .dropdownというセレクタで、リスト項目にホバーしたときにドロップダウンを表示するようにしています。

        • ドロップダウンメニュー内のリンクにもホバー効果を追加し、マウスオーバー時に背景色を変化させています。

高度なカスタマイズ

CSSだけでドロップダウンメニューを作成する場合でも、いくつかのカスタマイズを行うことができます。例えば、アニメーションを追加してより滑らかなエフェクトを実現することも可能です。

アニメーションの追加

次のCSSコードを追加することで、ドロップダウンメニューが表示されるときにフェードインするエフェクトを追加できます。

css
/* ドロップダウンメニューのアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.navbar .dropdown {
    animation: fadeIn 0.3s ease-in-out;
}

このアニメーションは、ドロップダウンメニューが表示される際に、メニューの透明度を0から1に変更することで、フェードイン効果を生み出します。animationプロパティで、アニメーションの名前、期間、タイミング関数を指定します。

モバイル対応

CSSだけで作成したドロップダウンメニューは、デスクトップでは問題なく機能しますが、モバイルデバイスでの操作性を向上させるためには、さらに調整が必要です。例えば、画面が小さい場合に、メニューが表示される方法を変更することができます。

以下のように、メディアクエリを使用してモバイルに対応させることができます。

css
@media (max-width: 768px) {
    .navbar ul {
        display: block;
        text-align: left;
    }

    .navbar li {
        display: block;
    }

    .navbar .dropdown {
        position: static;
        display: none;
    }

    .navbar li:hover > .dropdown {
        display: none;
    }

    .navbar li:focus-within > .dropdown {
        display: block;
    }
}

このコードは、画面幅が768px以下のデバイスで、ドロップダウンメニューがクリックで開くように変更します。モバイルでは、ホバーではなく、クリックでメニューが表示されるようにします。

結論

CSSだけを使用したドロップダウンメニューの作成は、シンプルで効果的な方法です。JavaScriptを使用せずに、純粋なHTMLとCSSで、動的でインタラクティブなメニューを実現することができます。さらに、メディアクエリを使用してレスポンシブデザインを実装すれば、モバイルやタブレットでも快適に使用できるドロップダウンメニューを作成できます。

今回紹介した方法を基に、あなたのウェブサイトに必要なスタイルや機能を追加して、独自のドロップダウンメニューを作成してみてください。

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