縦並びメニューの作成
このページでは、レフトにある縦並びのメニューを作成していきます。
メニューのボタンに対してスタイルを指定
レフトの縦並びメニューには、リストタグを使っているので、CSSには「li」の要素に対してスタイルを適用すると思います。しかし、リストタグは本文の中で使用することもあるので、その場合、本文のリストまでボタンのようになってしまいます。そんな場合、今まではClassやIDをつけてその箇所のみにスタイルをつけていましたね。
今回はClassやIDをつけずにレフトのリストにだけスタイルを適用してみましょう。
さらにもう一点注意があり、ボタンの本体となるのはaタグなので、装飾などはaタグに対して適用しなければいけません。
では、具体的にどのように指定するか説明します。
内容は、背景色や文字色、余白、下線の削除などを指定します。
style.css
#left li a{
background:rgb(85%,85%,85%);
border-left:3px solid rgb(25%,25%,25%);
color:rgb(25%,25%,25%);
padding:5px 10px;
margin:0 0 10px 0;
text-decoration:none;
}
| text-decoration:○; | 文字の装飾を指定します。 aタグの下線を外すには「none」を指定します。 下線をつけるには「underline」を指定します。 |
|---|
セレクタは、半角スペースで区切りながら「#left」「li」「a」が指定されています。
これは、「#leftの中にある、liの中にある、aタグ」という意味です。
これで他の無関係なaタグやリストタグに影響せずに、メニューだけに対して指定されます。
では確認してみましょう。
見本ページを新しいタブで開く見本とは大分違いますね。
背景色や余白をしっかり設定したのにどうしてこんなにも違うのでしょうか。
これはaタグが本来ブロック要素ではなく、インライン要素と呼ばれる行内で文字を囲むための要素だからです。
インライン要素をブロック要素に
つまり、aタグをブロック要素にしてやればよいのです。
さきほどのセレクタに以下のようにdisplayを追加してやりましょう。
style.css
#left li a{
/* 先ほど入力した部分 */
display:block;
}
確認
これで見本のようになりましたね。
見本ページを新しいタブで開く次のページでは、このボタンにマウスが乗ったときに変化を与えます。