初心者必見！CSSドロップダウンメニュー作成の完全ガイド3選

はじめに
●基本構造の理解
●サンプルコード: 基本的なドロップダウンメニューの作成
●応用例: メニューのデザインを変更する
●応用例: ドロップダウンメニューにアニメーションを追加する
まとめ

はじめに

ウェブサイトを作成していると、ナビゲーションメニューにドロップダウンメニューを追加したいと思うことがありますよね。

そんな時に役立つのが、CSSを使ったドロップダウンメニューの作成です。

この記事では、初心者でも分かりやすいように、CSSドロップダウンメニューの作り方、使い方、対処法を徹底解説します。

さらに、サンプルコードと応用例も紹介しますので、ぜひ参考にしてください。

●基本構造の理解

まずは、CSSドロップダウンメニューの基本構造を理解しましょう。

基本的には、HTMLでリスト要素を作成し、CSSでスタイルを適用することでドロップダウンメニューが実現できます。

具体的な手順は次の通りです。

HTMLでリスト要素を作成
CSSでリスト要素にスタイルを適用
CSSでドロップダウンメニューの表示・非表示を制御

それでは、実際にサンプルコードを見ながら、作り方を学んでいきましょう。

●サンプルコード: 基本的なドロップダウンメニューの作成

まずは、基本的なドロップダウンメニューの作成方法を解説します。

HTMLとCSSのサンプルコードです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>CSSドロップダウンメニュー</title>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">メニュー1</a></li>
      <li class="dropdown">
        <a href="#">メニュー2</a>
        <ul class="submenu">
          <li><a href="#">サブメニュー1</a></li>
          <li><a href="#">サブメニュー2</a></li>
          <li><a href="#">サブメニュー3</a></li>
        </ul>
      </li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </nav>
</body>
</html>

CSS

/* メニューの基本スタイル */
.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li {
  position: relative;
}

.menu a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

/* ドロップダウンメニュー */
.dropdown .submenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 160px;
  background-color: #f9f9f9;
}

.dropdown:hover .submenu {
  display: block;
}

.submenu a {
  padding: 12px 16px;
}

.submenu a:hover {
  background-color: #f1f1f1;
}

このサンプルコードでは、HTMLでナビゲーションメニューをリスト要素で作成し、CSSでリスト要素にスタイルを適用しています。

また、.dropdown:hover .submenuのセレクタを用いることで、ドロップダウンメニューの表示・非表示を制御しています。

●応用例: メニューのデザインを変更する

次に、応用例として、メニューのデザインを変更してみましょう。

次のCSSコードを、先ほどのサンプルコードのCSSに追加することで、メニューのデザインが変更されます。

/* メニューのデザイン変更 */
.menu {
  background-color: #333;
}

.menu a {
  color: #fff;
}

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

.dropdown .submenu {
  border: 1px solid #ccc;
}

これで、メニューの背景色が黒に変わり、文字色が白になります。また、ドロップダウンメニューに枠線が追加されます。

デザインを変更するだけで、ウェブサイトの雰囲気が大きく変わるので、自分の好みやサイトのテーマに合わせてカスタマイズしてみてください。

●応用例: ドロップダウンメニューにアニメーションを追加する

さらに、応用例として、ドロップダウンメニューにアニメーションを追加してみましょう。

次のCSSコードを、先ほどのサンプルコードのCSSに追加することで、

ドロップダウンメニューにアニメーションが追加されます。

/* ドロップダウンメニューのアニメーション */
.dropdown .submenu {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.dropdown:hover .submenu {
  opacity: 1;
  visibility: visible;
}

このコードでは、transitionプロパティを用いて、ドロップダウンメニューの表示・非表示にアニメーション効果を付けています。

これにより、ドロップダウンメニューがスムーズに表示・非表示されるようになり、

より見栄えが良くなります。