第4回　コーディングの基礎　「まずはヘッダーフッターを飾ろう！」

2008年10月20日
WEB

これで2カラムは一応できました。さて、ここから細かな装飾をしていきたいとおもいます。

と、その前にハッキリさせておかなければならないことがあります。前回の2カラムのときに出てきた「ソリッドレイアウト」なのか「リキッドレイアウト」なのか「エラスティックレイアウト」なのか。今回は…ソリッドレイアウト（一部リキッド）レイアウトでいくことにします。「ソリッドレイアウト」と決めたけれど、やはり文字サイズを大きくしたときの対応はしておきたいので、単位に「em」や「%」を使う箇所もありますが、そのたびに説明していきたいと思います。

コーディングに取り掛かる前に、背景画像などを入れておくimagesディレクトリをcommonやindex.htmlと同じ階層に作っておきましょう。次に、全体に共通する指定をしておきます。

body {
color: #888;
font-family: “Lucida Grande”,’メイリオ’,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳＰゴシック”,Osaka, sans-serif;
}
hr {
display: none;
}
a {
color: #144701;
text-decoration: none;
}
a:hover {
color: #36bc00;
}

文字色をグレー#888に指定。書体をヒラギノよりもメイリオ優先にしました。リンク文字色を深い緑、マウスオーバーしたときは明るい緑に指定しました。
サンプルページ

では、早速「header」から…といっても要素は<h1>のみですね。

/* ——————–
ヘッダー
——————– */
#header {
background-image: url(../images/bg_header.gif);
padding: 25px 20px;
}
h1 {
font-size: 200%;
}
h1 a {
color: #4d8e00;
}
h1 a:hover {
color: #274700;
}

#headerに背景色(background-color)で指定していたものを背景画像(background-image)の指定に変更しました。backgroundに関するその他の値はすべてデフォルトをしている状態になります。backgroundプロパティのデフォルトの値は

background-attachment：スクロール
background-color：なし
background-image：なし
background-repeat：縦横繰り返し
background-position：中央(左右),中央(上下)

background:○○ …;と一括して上記の指定をすることができますが、colorとimagesの記述の順番に気をつけてください。後に書いたほうが上に重なります。background-positionも左右、上下の順番で書かないと効かないことがありますので注意してください。またデフォルトの値でいい場合は記述を省くことができます。
(例)background:　#000 url(../images/bg.gif) no-repeat left top;
図にあるようにheaderの内側に余白がありますので、padding指定をしました。paddingもpadding-top、padding-right…と方向を一つ一つ指定することが可能ですが、paddingでまとめて書くこともできます。

padding:　10px;（上下左右に10px）
padding:　10px　5px;（上下に10px　左右に5px）
padding:　10px　5px　25px;（上に10px　左右に5px　下に25px）
padding:　10px　5px　25px　50px;（上に10px　右に5px　下に25px　左に50px）

こうやって覚えるといいかもです。右回りです。この方向はmarginの場合も同じです。

h1の文字サイズを相対的な値で200%(2倍)にしました。ブラウザで文字サイズを大きくしても小さくしてもその基準となる文字サイズの200%であり続けます。pxで指定をするとサイズが固定となり、ブラウザで文字サイズを変更できない場合があります。また、h1の中の<a>とマウスオーバーの際の<a>に文字色の指定をしています。
※h1はコードの中に他に存在しないので「#headerの中のh1」という記述をしていません。特にサイト名をh1とすることがほとんどなので、ひとつのページの中にh1が何度も出てくることはないので(…ないようにしましょう)、素のh1に対してcssの指定をしています。

ヘッダーを装飾したサンプルページ

続いて、コンテンツといいたいのですが簡単なフッターもやってしまいましょう。ヘッダーの時の指定と同じようにフッターにも背景画像の指定、paddingの指定をして、addressは文字色を#333で指定します。