燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/12(木)

[] CSS詳細部の解説2(メニューバー)

解説第六弾です。

本コンテンツは、以下のページの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;
}

関連ページ:

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証