はじめに
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を使ったメニューバーの作成方法や応用例を学ぶことで、さまざまなデザインや機能のメニューバーを実装できるようになります。
ぜひ、今回紹介した例を参考に、自分だけのオリジナルなメニューバーを作成してみてください。