私のサイトが出来るまで。HTMLとCSS実践編その4

[ Web関係 ]

誰も読んでないでしょうけど、その4。そんなに細かく解説してないので、初心者には優しくないです。たぶん。

ナビゲーションをどうにかする

前回まででコンテンツ部分をどうにかしたので、今回はナビゲーション。

とりあえずナビゲーションの見出しが邪魔なので消去。この前も書いたけど、わざわざナビゲーションに見出し付けて結局消すとかいう意味が分からないことしてるのは、私の心理的な問題です。単に気持ち悪いから見出し付けてるだけ。アクセシビリティ云々は関係ないです。

h2#NAVIGATION_HEADING,
h3#MAIN_NAVI_TITLE{
    display: none;
}

次に各リンクの表示をどうにかします。ADP: div要素なしレイアウト (4)にあるADP式ロールオーバーが基本。もっとも今回のデザインではロールオーバーさせませんけど。背景画像は以下のようなものを使います。

で、CSS。まずはliのCSSね。

ul#NAVIGATION li{
    margin: 0 0 10px 0;
    height: 48px;
    display: block;
    overflow: hidden;
    list-style-type: none;
}

全方向のマージンを確保してるのは、本文のCSS書いたときにliにマージン指定しちゃってるから。あれ、何でdisplay: block;なんて書いてあるんだろ。別に要らないはず。

（中野：えー）

「overflow: hidden;」は前述のADP式のキモ。paddingとheightを同時に使ったときに中身をわざとはみ出させる用。

で、a要素のCSS。

ul#NAVIGATION li a{
    padding-top: 24px;
    padding-left: 20px;
    display: block;
    height: 48px;
    background-repeat: no-repeat;
    line-height: 10px;
    font-size: 10px;
}

paddingとheightを同時指定してる関係で、IEなんかの後方互換モードと標準準拠のブラウザでボックスの高さが変わってしまいます。が、liに「overflow: hidden;」を指定しておいたので、li要素の高さはどっちのブラウザでも48pxになりますです。

あとは個々のリンクに背景画像を指定すれば終わり。

#INFO a{
    background-image: url(image/navi_info.gif);
}

最後にナビゲーション全体の位置と幅なんかをul要素で指定します。

ul#NAVIGATION{
    margin:0;
    position: absolute;
    top: 150px;
    right: 30px;
    width: 100px;
}

floatは色々と面倒なので、最近はいつもposition使ってます。

12、13代目のスタイルも基本的に同じような感じです。背景画像が若干違うだけ。どなたかの参考になればこれ幸い。

関連記事

2007年5月28日月曜日 21時39分07秒