言語を学ぶ

HTML&CSSでつくるドロップダウンメニュー

HTML&CSSでつくるドロップダウンメニュー

チャプター:8

このブックでは、CSSを利用して「ドロップダウンメニュー」をつくります。ドロップダウンメニューは当サイトのコンテンツである「ナビゲーションバー」に似ていますが、ナビゲーションバーと異なる点は、ドロップダウンメニューに「マウスカーソルが乗った時にメニュー項目を表示する」役割が存在する点です。このブックを通して、実務でよく利用されるドロップダウンメニューの概要とそのつくり方について学ぶことができます。

1.ドロップダウンの基となるHTMLをつくろう

このチャプターでは ドロップダウンメニューのHTML構造をつくります。

34P

2.全体の装飾をしよう

このチャプターではページ全体の中で大きく二つに分けられる要素として、h1要素 及びID名「nav」を持つul要素の装飾を行います。

32P

3.リスト項目の装飾をしよう

このチャプターではID名「nav」の要素の直下にあるli要素の装飾をしていきます。

48P

4.h2要素の装飾をしよう

このチャプターでは、ナビゲーションバーの各メニュー項目のh2要素の装飾をしていきます。

32P

5.メニュー項目部分の装飾をしよう

このチャプターでは、各リスト項目に含まれるメニュー部分の装飾をしていきます。

42P

6.メニュー項目内のリスト項目を装飾しよう

このチャプターではクラス名「menu」の要素の直下にあるli要素の装飾をしていきます。

19P

7.マウスを乗せてメニューを表示させよう

このチャプターでは、作成したメニュー項目を 平常時は隠し、マウスを乗せた時に表示するようにします。

28P

8.リストが開く時にアニメーションをつけよう

このチャプターでは、リストが開く時、滑らかにスライドして開くようCSSを調整します。 ※このチャプターで紹介されている機能は Internet Explorer 9以下のサーバをご利用の場合 使用することができません。

30P