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

[ Web関係 ]

それ来た、その3。

これは先に書いておくべきだったのかもしれませんけど、私がHTMLとCSS書くときの方針を列挙。

見出しと本文のCSSを書く

前述の方針を踏まえて解説再開。ナビゲーションのデザインは後回しにして先に見出しと本文のデザインを確定しちゃいます。ただし、右にナビゲーション持ってくることが確定済み（唐突）なので、各要素には右マージンを指定しておきます。

まずは見出し。私は普段h3くらいまでしか使わないので、CSS書くのは3まで。4以降は使うときが来たらその時に追加。最初にh1要素。

h1{
    margin-right: 170px;
    margin-bottom: 0.5em;;
    padding: 50px 0px 0px 40px;
    color: #717171;
    background-color: transparent;
    background-image: url(image/title.gif);
    background-repeat: no-repeat;
    background-position: 15px 15px;
    font-size: 170%;
}

h1:first-letter{
    color: #434040;
    background-color: inherit;
    font-weight: bold;
    font-size: 200%;
}

ポイントは背景画像。

上のタイトルロゴを背景画像として表示させます。私としてはサイト名はそれほど重要じゃないので背景画像にしちゃってます。title要素にはサイト名入ってますしね。body要素内に書く必要性があまり感じられません。

あとはfirst-letter疑似要素でフォントサイズを大きく。何故か好きなんです、これ。

次。h2要素は無駄な装飾を避けてサイズとウェイトのみ調節。マージンを上手いこと調節すればこれで必要十分です。h3要素はh2と差別化を図るために左ボーダーを指定。当然文字サイズはh2より小さめに。

h2,h3,h4,h5,h6{
    margin: 1em 172px 0.5em 60px;
}

h2{
    margin-top: 1.8em;
    color: #404040;
    background-color: transparent;
    font-weight: bold;
    font-size: 150%;
}

h3{
    margin-top: 1.5em;
    padding-left: 3px;
    border-left: double 1.5em #757070;
    font-weight: bold;
    font-size: 110%;
}

その他の要素も右マージンに注意して適当に。全部書くのもアレなので、詳しくは直接CSS見て下さい。

（中野：マテ）

そうそう、見出し以外の要素は、見出しよりも多めに左マージン取ってます。その方が見出しが見出しっぽく見えます。ここポイント。

次はナビゲーション部分のCSSね。待て次回。

2007年5月27日日曜日 18時06分39秒