小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

CSS詳細部の解説２（メニューバー）

CSSレイアウト

解説第六弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、メニューバーCSSの詳細を解説します。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}
#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}
#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}
#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010


menubar_container内のul要素の幅を親要素main_containerの幅100%とし、リストの点を無しにして、バックカラーをとりあえず#eeffffとします。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}

menubar_container内のli要素の幅を自動にし、左フロートさせ、右ボーダーを2px（groove #cccccc）とり、高さ2.2emとします。
これは、普通のダウンリストを左フロートさせることでメニューリストにしています。

#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}

menubar_container内のli内のa要素をアンダーラインして、インライン要素からブロックレベル要素に変え、あとは以下略。
a要素をブロックレベル要素にすると親要素のli内にピッタと収まるのです。 

#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}

menubar_container内のli内のa要素の擬似クラスhoverにバックカラーを指定して、フォーバー（マウスオン）すると色が変わるようにしています。

#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}

関連ページ：