webサイトのメニュー作成
#11 メニューを作ってみよう
http://dotinstall.com/lessons/website_html/9011
を参考に
ウェブサイトのメニュー項目の設定を学習
HTMLではメニューはリストで表現される
このため、スタイルを決めるには
ul
li
この２つをCSS対象にする
#menu ul>li{
}
という項目を作り設定していく
#menu は
id=”menu” という意味で
CSSで＃は id という意味
ul > li は ul の中の li という意味
そして、以下が設定とその意味
float:left は横並びにする
width:100px で幅固定
font-size:13pxでフォントサイズ指定
text-align:center:
で中央揃えにする
padding:4px
で余白を４px
background:#ccc
で背景色を灰色にする
margin-right:10px
で右側との余白を10pxに指定
border-radius:4pxv
で角を丸くする
text-shadow:0 1px 0 #fff
で白い影がテキストにつくようになる
このままだと
#menu に対して
#contents
#sidebar
が回り込んでしまうため
#menuへ
overflow:hidden;
を追加する
さらにメニューの上にマウスオーバー
つまりマウスをのっけたときに色を変えるようにする
#menu ul >li.hover{
}
.hover でマウスオーバーしたときの処理になる
色を変えるには
background:#ddd;
とすることで、マウスオーバーしたときに
背景の色が変わるようになる
またリンクを aタグで作成すると下線がつくけど
これを消すことができる
これは
text-decoration: none;
を指定すればOK
今回は #menu の 中にあるので
#menu ul >li >a{
text-decoration:none;
}
となる
また、文字の上だけじゃなく
枠でもマウスオーバーで色が変わるようにするには
display:block;
を追加する