読み込み中...

CSSメニューバー作成入門！使い方・無限ループ・サンプルコード・応用例まで徹底解説！

CSSメニューバーの作成方法を詳しく解説するイメージ CSS
2024.01.24
この記事は約13分で読めます。

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

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

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

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

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

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

はじめに

Webサイトにおいて、メニューバーは非常に重要な役割を果たします。

この記事では、CSSを使ってメニューバーを作成する方法を初心者目線で徹底解説します。

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

●CSSメニューバーの基本構造

まずは、CSSメニューバーの基本構造を理解しましょう。

次のようなHTMLとCSSのコードが基本となります。

【HTML】

<!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="styles.css">
</head>
<body>
  <nav>
    <ul class="menu">
      <li class="menu-item"><a href="#">ホーム</a></li>
      <li class="menu-item"><a href="#">ニュース</a></li>
      <li class="menu-item"><a href="#">ブログ</a></li>
      <li class="menu-item"><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</body>
</html>

【CSS】

.menu {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.menu-item a {
  text-decoration: none;
  color: #333;
  padding: 1em;
  display: block;
}

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

上記のコードでは、navタグで囲まれたul要素にクラス名.menuを付け、li要素にクラス名.menu-itemを付けています。

そして、CSSで.menuと.menu-itemに対してスタイルを適用しています。

●CSSメニューバーの使い方

それでは、CSSメニューバーの使い方について解説していきます。

次の例では、縦型メニューバーの作成方法と、ドロップダウンメニューの作成方法を紹介します。

【縦型メニューバーの作成】

縦型メニューバーを作成するには、次のようにHTMLとCSSを変更します。

【HTML】

<!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="styles.css">
</head>
<body>
  <nav>
    <ul class="menu">
      <li class="menu-item"><a href="#">ホーム</a></li>
      <li class="menu-item"><a href="#">ニュース</a></li>
      <li class="menu-item"><a href="#">ブログ</a></li>
      <li class="menu-item"><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</body>
</html>

【CSS】

.menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.menu-item a {
  text-decoration: none;
  color: #333;
  padding: 1em;
  display: block;
}

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

ここでは、.menuクラスにflex-direction: column;を指定することで、縦型メニューバーを作成しています。

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

ドロップダウンメニューを作成するには、次のようにHTMLとCSSを変更します。

【HTML】

<!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="styles.css">
</head>
<body>
  <nav>
    <ul class="menu">
      <li class="menu-item">
        <a href="#">サービス</a>
        <ul class="sub-menu">
          <li class="sub-menu-item"><a href="#">サービス1</a></li>
          <li class="sub-menu-item"><a href="#">サービス2</a></li>
          <li class="sub-menu-item"><a href="#">サービス3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

【CSS】

.menu {
  list-style: none;
  display: flex;
  padding: 0;
}

.menu-item {
  position: relative;
}

.menu-item a {
  text-decoration: none;
  color: #333;
  padding: 1em;
  display: block;
}

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

.sub-menu {
  list-style: none;
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  padding: 0;
}

.sub-menu-item a {
  padding: 1em;
  display: block;
}

.sub-menu-item a:hover {
  background-color: #f0f0f0;
}

.menu-item:hover .sub-menu {
  display: block;
}

ここでは、.menu-itemクラスにposition: relative;を設定し、.sub-menuクラスにposition: absolute;を設定してドロップダウンメニューを作成しています。

また、.menu-item:hover .sub-menuにdisplay: block;を設定することで、メニュー項目にマウスオーバーした際にサブメニューが表示されるようになります。

●CSSメニューバーの無限ループ

CSSメニューバーを無限ループさせるには、次のようにHTMLとCSSを変更します。

【HTML】

<!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="styles.css">
</head>
<body>
  <nav>
    <ul class="menu">
      <li class="menu-item"><a href="#">ホーム</a></li>
      <li class="menu-item"><a href="#">ニュース</a></li>
      <li class="menu-item"><a href="#">ブログ</a></li>
      <li class="menu-item"><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</body>
</html>

【CSS】

.menu {
  list-style: none;
  display: flex;
  padding: 0;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.menu-item a {
  text-decoration: none;
  color: #333;
  padding: 1em;
  display: block;
}

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

この例では、.menuクラスにanimationプロパティを設定し、@keyframesルールでアニメーションの進行状況を定義しています。

この結果、メニューバーが無限ループするようになります。

●応用例とサンプルコード

ここでは、CSSメニューバーの応用例として、レスポンシブデザインに対応したハンバーガーメニューを紹介します。

【HTML】

<!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="styles.css">
</head>
<body>
  <header>
    <nav class="nav">
      <input type="checkbox" id="menu-btn-check" class="menu-btn-check" />
      <label for="menu-btn-check" class="menu-btn">
        <span></span>
      </label>
      <ul class="menu">
        <li class="menu-item"><a href="#">ホーム</a></li>
        <li class="menu-item"><a href="#">ニュース</a></li>
        <li class="menu-item"><a href="#">ブログ</a></li>
        <li class="menu-item"><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

【CSS】

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Basic styles */
nav {
  background-color: #333;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.menu-item a {
  text-decoration: none;
  color: #fff;
  padding: 1em;
  display: block;
}

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

/* Hamburger menu styles */
.menu-btn-check {
  display: none;
}

.menu-btn {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
}

.menu-btn span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #fff;
  margin-bottom: 6px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    width: 100%;
  }

  .menu-btn {
    display: block;
  }

  .menu-btn-check:checked ~ .menu {
    display: flex;
  }
}

この例では、ハンバーガーメニューを実装するために、HTMLにinputタグとlabelタグを追加し、CSS

それらのスタイルを設定しています。

また、メディアクエリを使用して、画面サイズが768px以下の場合にハンバーガーメニューが表示されるようにしています。

このように、CSSを使ったメニューバーの作成方法や応用例を学ぶことで、さまざまなデザインや機能のメニューバーを実装できるようになります。

ぜひ、今回紹介した例を参考に、自分だけのオリジナルなメニューバーを作成してみてください。