前回のエントリーが、ビックリするくらいアクセスあってびびってますが、変なプレッシャーに負けずまったりマイペースで行こうと思うです。
CSSを勉強する上でもっとも早い上達は、恐らく実践経験だと思います。
色んな参考書や、サイトを巡って脳内で考えてるのも一つの手段ですが、やっぱり組んでナンボだと思います。
って事もあり、すぐコーディングだけ出来る状態の基本データが入ってる下記練習用フォルダを使うと良いと思います。（はじめにと同じヤツです）
今回のサンプルの仕様は下記↓
- XML宣言なし
- DOCTYPE：XHTML 1.0 Transitional
- 文字コード：UTF-8
- 対象ブラウザ：IE6、Firefox2、Opera9
（対象ブラウザが少ないような気がするのは、気のせい。）
んでは、はじめますか。。。
構成を書く
CSSでコーディングする際には、最初に全体の構成を紙に書くとか、脳内で整理するとかをやっておくと非常に良いです。
なんせ、テーブルレイアウトと違ってCSSは色んなページで同じCSSファイルを使うわけですから。
←という訳で、やってみたのがコレ。
ここまでやらずとも整理出来てればいいんですが、行き当たりばったりで組むのは、デザインが上がってこないで泣く泣く組むしかないような状況の時くらいです。
コレで何となくどうやって組んでいくかのイメージが湧くと思います。
HTMLを完成させる
まだCSSには入れません。
まずはじめに、デザインを見ながらHTMLを完成させちゃいます。
こんな感じで↓
http://css-happylife.com/template/practice-01/
本来はHTMLのことも触れていくべきなんだろうけど、ある程度理解している方を前提なんでパス。
上からCSS並行で作っていくってパターンもあるんですが、最初にHTMLから書いた方が効率が良いと思います。
そしてココまで来て、ようやくCSSに入ります。
ブラウザによる差異を埋める
まず最初に、最低限ブラウザによるデフォルトスタイルの差異を埋める為に、アスタリスク（*）を使って一度リセットします。
* {
margin:0;
padding:0;
}
アスタリスクは全ての要素に適用できるので、都度指定しなくて良いので楽です。
指定したらこんな感じになるはず。
http://css-happylife.com/template/practice-01/02/
全体に共通の指定をする
続いて、全体の指定。
body {
background:url(../img/bg.gif);
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size:80%;
color:#424242;
}
h2,h3,h4,h5,h6 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
p,li {
line-height:160%;
}
p {
margin:0 0 1em 0;
}
li {
list-style-type:none;
}
img {
border:0;
}
/*
Link Color [
----------------------------------------------------------- */
a {
text-decoration:none;
}
a:link {
color:blue;
}
a:visited {
color:#0C8EF2;
}
a:hover {
text-decoration:underline;
}
a:active {
color:blue;
}
指定したらこんな感じになるはず。
http://css-happylife.com/template/practice-01/03/
body要素の背景は、4×4pxのリピート画像なのでURLの指定だけして繰り返します。
li要素のlist-style-type:none;はメニューやら色々でリストマークが出ると面倒なので最初に非表示にしてます。
img要素のborder:0は、画像にリンクを貼った際のリンクの枠を消すために。
その他各プロパティについては、HTMLクイックリファレンスさんとかで調べてください。（ウチで全プロパティについての解説は恐らくしないので）
全体をセンタリング
全体をセンタリングするには、margin-leftとmrgin-rightをautoで指定します。※1
HTMLに、id名#pageでdivを追加します。
#page {
width:750px;
margin:0 auto;
background:#FFF;
}
指定したらこんな感じになるはず。
http://css-happylife.com/template/practice-01/04/
※1：IE5とかIE6の過去互換モードとかの場合、bodyにtext-align:centerを指定して、全体を囲っているdiv（サンプルだと#page）にtext-align:leftとmargin:0 autoを指定することで、センタリングできます。
headerを完成させる
続いてヘッダー部分の作成に取り掛かります。
今回のサンプルでは、ヘッダー部分にh1（ロゴ）以外の要素がないので、わざわざ不要なdivは作成せずにｈ1要素に指定します。
/*
header [
----------------------------------------------------------- */
h1 {
height:88px;
padding:50px 0 0 20px;
background:url(../img/bg_head.gif) no-repeat;
line-height:1px;
font-size:1px;
}
ロゴ画像は左記のようにカットしているので、その位置をpaddingで調整します。
背景画像が高さ138pxなんですが、paddingを指定している場合はその分を引くのでheightは88pxで指定します。
line-heightとfont-sizeの指定は、テキストが無い状態でもテキストが有ると見なされてline-heightで指定してた分だけ余白が空いたりしてしまうのを防ぐタメにやります。
これで、下記のようになるはず。
http://css-happylife.com/template/practice-01/05/
まだ全然序盤ですけど、何となく出来上がってきてる感がしません？
その辺がCSSの面白さの醍醐味なような。
コレこそまさに HappyLife ネ。（一度言ってみたかった。。。）
って事で今回はお終い。
お疲れ様でした。
次回のエントリーでは、二段組の部分をやると思います。