こんにちは、「BRANCH FOR PRO」の中の人です。

今回はJavaScriptを使わないで実現する、「ドロップダウンメニュー」をご紹介します。

先ず、HTMLのリストをご覧いただきたいと思います。

次のようになっています。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style.css">
		<title>CSSのみで実現するドロップダウンメニュー</title>
	</head>
	<body>
		
<ul class="ddmenu">		
<li><a href="#">HOME</a></li>		
<li>				
<a href="#">ニュース</a>
<ul>
<li><a href="#">ハードウェア</a></li>					
<li><a href="#">ソフトウェア</a></li>					
<li><a href="#">ウェブサービス</a></li>
				</ul>
			</li>			
<li>
				<a href="#">会社情報</a>
<ul>
<li><a href="#">会社概要</a></li>					
<li><a href="#">社長挨拶</a></li>					
<li><a href="#">沿革</a></li>					
<li><a href="#">所在地</a></li>
				</ul>
			</li>			
<li>
				<a href="#">お問い合わせ</a>
<ul>					
<li><a href="#">よくあるご質問</a></li>					
<li><a href="#">お問い合わせ先</a></li>
				</ul>
			</li>
		</ul>		
	</body>
</html>

ここで、「ul」のリスト項目である「li」の中に、さらに「ul」が来ていることが分かるかと思います。

これは「入れ子」構造になっていると呼びます。

では、CSSで装飾しないでこのリストだけを表示させると、次のようになります。

これが、「ul」の入れ子を書いた時の表示です。

ここからCSSで装飾をして、ドロップダウンメニューに仕立て上げていきます。

では、最初に「ドロップダウンメニューは表示されないけれど、体裁だけを整えたCSS」をご紹介します。

@charset "UTF-8";

/* メニューバーの装飾 */
ul.ddmenu {
    width: 500px;              /* メニューバーの横幅は500px */
    margin: 0 auto;            /* メニューバーを中央寄せ */
    padding: 0;                /* 内側の余白を0にする */
    background-color: #008b8b; /* 背景色が、ダークシアン */
    font-size: 0;              /* <li>項目の間に、余計なマージンが入らないように、フォントサイズを0にする */
}

/* メニューの各項目の装飾 */

/* リスト項目 */
ul.ddmenu li {
    width: 125px;              /* メニュー項目の横幅(125px) */
    display: inline-block;     /* 横並びにする */
    list-style-type: none;     /* リストの装飾(横の黒丸など)を消す */
    position: relative;        /* サブメニューで、position: absolute; を使うための準備 */
    font-size: 18px;           /* フォントサイズは18px */
}

/* リストの中の、アンカー領域の装飾 */
ul.ddmenu a {
    background-color: #008b8b; /* 背景色がダークシアン*/
    color: #ffffff;            /* 文字色が白 */
    line-height: 40px;         /* アンカーの高さが40px */
    text-align: center;        /* 文字は中央寄せ */
    text-decoration: none;     /* 文字の装飾(下線など)は無し */
    font-weight: bold;         /* 文字を太めに */
    display: block;            /* 領域全体をリンク可能に */
}

/* アンカー領域にカーソルが載ったときの装飾 */
ul.ddmenu a:hover {
    background-color: #2f4f4f; /* 背景色をダークスレートグレーにする */
    color: #ffffe0;            /* 文字色をライトイエローにする */
}

/* サブメニューの表示設定 */
ul.ddmenu ul {
    display: none;             /* とりあえず非表示 */
}

なんだか長いですね。

では順にご説明します。

@charset "UTF-8";

ここでは、このCSSファイルの文字が「UTF-8」で書かれていることを示します。

これは決まり文句として覚えておいて下さい。

コメントで日本語を使っていますが、このコメントも「UTF-8」で書かれています。

次に、メニューバーの装飾部分です。

/* メニューバーの装飾 */
ul.ddmenu {
width: 500px;              /* メニューバーの横幅は500px */
margin: 0 auto;            /* メニューバーを中央寄せ */
padding: 0;                /* 内側の余白を0にする */
background-color: #008b8b; /* 背景色が、ダークシアン */
font-size: 0;              /* <li>項目の間に、余計なマージンが入らないように、フォントサイズを0にする */
}

ここでは、一番外側の「ul class=”ddmenu”」についての装飾を行っています。

コメントがついているので一つづつのご説明は省略しますが、一点だけご説明します。

「font-size: 0;」ですが、これは「子要素」の「li」の間に余計な空白が入らないように指定しています。

「もともと子要素は

<li>~</li>
(改行)
<li>~</li>

なのだから、文字が入っていないはず」とお思いの方もいらっしゃるかと思います。

が、「改行」も実は「文字」で、「フォントサイズ」を持っています。

これが邪魔になるときがあるので、邪魔にならないようにサイズを0にしています。

次に、内側にある「li」要素の装飾部分を見てみましょう。

/* リスト項目 */
ul.ddmenu li {
width: 125px;              /* メニュー項目の横幅(125px) */
display: inline-block;     /* 横並びにする */
list-style-type: none;     /* リストの装飾(横の黒丸など)を消す */
position: relative;        /* サブメニューで、position: absolute; を使うための準備 */
font-size: 18px;           /* フォントサイズは18px */
}

ここでは、「display: inline-block;」が目を引きます。

「display」は、「表示方法を変更」するためのプロパティで、その値を横並びを意味する「inline-block」に変更しています。

また、次に注目するのは「position: relative;」の部分です。

これは今は隠されている「マウスを上に持ってくると下側に出てくるメニューで、「position: absolute;」と指定するための準備をしています。

更に、一番外側の「ul class=”ddmenu”」の文字の大きさをCSSで0にしたことにより、このままでは文字の大きさが引き継がれてしまい(これを「継承」といいます。)表示されなくなってしまうので「font-size: 18px;」で文字を指定した大きさで表示されるようにします。

次に、「ul」要素の中にある「a」要素の装飾を見てみましょう。

/* リストの中の、アンカー領域の装飾 */
ul.ddmenu a {
background-color: #008b8b; /* 背景色がダークシアン*/
color: #ffffff;            /* 文字色が白 */
line-height: 40px;         /* アンカーの高さが40px */
text-align: center;        /* 文字は中央寄せ */
text-decoration: none;     /* 文字の装飾(下線など)は無し */
font-weight: bold;         /* 文字を太めに */
display: block;            /* 領域全体をリンク可能に */
}

ここでは、「display: block;」が目につきます。

この指定は、「a」の「パディング」部分もリンク可能にするための指定です。これも常套句なので、覚えておくといいでしょう。

さて、マウスが「a」領域に載ったときに、色などを変える指定です。

/* アンカー領域にカーソルが載ったときの装飾 */
ul.ddmenu a:hover {
background-color: #2f4f4f; /* 背景色をダークスレートグレーにする */
color: #ffffe0;            /* 文字色をライトイエローにする */
}

ここで、CSSのセレクタが「ul.ddmenu a:hover」となっているので、「a要素にカーソルが載っているとき」の指定をしています。

指定そのものは簡単なので、説明を省略します。

最後ですが、「メインメニュー」にカーソルが載ったときに「下側にサブメニューが現れる」という動作を最終的には目指しますが、とりあえずは「メインメニュー」の体裁を整えるCSSですので、非表示にしています。

これが最後の指定で、

/* サブメニューの表示設定 */
ul.ddmenu ul {
display: none;             /* とりあえず非表示 */
}

となります。

ここまでのCSSの指定で、画面は次のようになります。

では、次回では実際に「サブメニューが現れる」動作をCSSで書いていきます。よろしくお願いします。