ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法(3ページ目)

1-B. 2段のドロップダウンメニューをメニューらしく装飾するCSSソース

前ページで作成したリストがメニューらしく見えるように、CSSソースを記述しましょう。リストに背景色を加えた上で、1階層目の全項目を横方向に並べて「メニューバー」に見えるように装飾します。2階層目(サブメニュー)は、今の時点では非表示にするだけに留めています。

■CSSソース：
「★」を付けた部分は修正せずにそのまま記述して下さい。それ以外の部分は値を適宜修正しても構いません。各行の役割は、右側にコメントの形で記しています。

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   background-color: #cc0000; /* バーの背景色(濃い赤色) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
   width: 125px;           /* メニュー項目の横幅(125px) */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
   background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #dd0000;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}

/* ▼サブメニューは、とりあえず非表示にしておく */
ul.ddmenu ul {
   display: none;         /* ★5:非表示にする */
}

上記のCSSソースのうち「★」印を付けた部分の役割を、以下に解説しておきます。
 

• [★1] displayプロパティに値「inline-block」を指定すると、ブロックレベル要素のように装飾できるものの、インライン要素のように配置されます。つまり、描画領域に空間がある限りはリスト項目が横方向に並びます。
• [★2] 標準ではリスト項目(li要素)の先頭には黒丸や白丸などの記号が付加されます。list-style-typeプロパティに値「none」を指定することで、それらの記号を消しています。
• [★3] この記述は現時点では意味がありません。しかし、サブメニューの表示位置を「絶対配置」で記述するためには、このようにpositionプロパティに値「relative」を指定しておく必要があります(詳しくは後述)。
• [★4] リンクを作るa要素に対して、displayプロパティに値「block」を指定すると、リンクがブロックレベル要素のように表示されます。それによって、文字のない余白部分もクリック可能になります。つまり、メニュー項目内全体がクリック可能になります。
• [★5] サブメニュー項目は、最初の段階では非表示になっていないと困りますので、displayプロパティに値「none」を指定して非表示にしています。

■表示例：
ここまでのソースを表示すると、下図のように見えます。赤色のメニューバーが横幅いっぱいに広がっています。また、項目の上にマウスを載せると色が変化します。
 

この時点では、まだドロップダウンメニューの2段目であるサブメニューは表示されません。次のページでは、ユーザのマウスの動きに合わせてサブメニューを表示するドロップダウン機能を実現するCSSソースの書き方をご紹介いたします。


【本記事(前半)の目次】

• 概要：ドロップダウンメニューはJavaScript不要のHTML＋CSSで作成可能 (p.1)
• 1-A. 2段のドロップダウンメニューのHTMLソースを書く (p.2)
• 1-B. 2段のドロップダウンメニューをメニューらしく装飾するCSSソースを書く (現在位置)
• 1-C. 2段のドロップダウン機能を実現するCSSソースを書く (p.4)
• 1-D. 2段のドロップダウンメニューのサブメニューを装飾するCSSソースを書く (p.5)
• 1. ソースのまとめ(2段階ドロップダウンメニュー) (p.6)
• 後半：3段以上のドロップダウンメニューの作り方 (p.7～)