読み込み中...

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

CSSドロップダウンメニューのイメージ CSS
2024.02.19
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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

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

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

●基本構造の理解

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

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

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

  1. HTMLでリスト要素を作成
  2. CSSでリスト要素にスタイルを適用
  3. 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プロパティを用いて、ドロップダウンメニューの表示・非表示にアニメーション効果を付けています。

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

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

まとめ

この記事では、初心者向けにCSSを使ったドロップダウンメニューの作り方、使い方、対処法を徹底解説しました。

基本的な作成方法から、デザイン変更やアニメーション追加の応用例まで、さまざまなテクニックを紹介しました。

ドロップダウンメニューは、ウェブサイトのナビゲーションを整理し、使いやすくするために重要な要素です。

この記事を参考にして、自分のウェブサイトにドロップダウンメニューを導入し、見た目や操作性を向上させましょう。

これで、ウェブサイトのナビゲーションが格段に使いやすくなり、訪問者も喜ぶことでしょう。