こんにちは、「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で書いていきます。よろしくお願いします。