このデザインをスタイルシート(CSS)レイアウトにしてみる。
[参考記事] テーブルレイアウトの話
[参考記事] テーブルレイアウトとスタイルシートレイアウトの比較
言葉の用途からHTML文書を作成。
もともとHTML文書というのは論文などを表記するためのものなので、タグ本来の意味を考えて書いていったほうがキレイになります。
スタイルシートでデザインする場合も、本来の意味でタグを使っていればだいたいのデザインに対応できます。
どのモード、どの仕様かは、標準準拠モードを選択してみます。
IDやCLASSの名前は用途で付けたほうがいいです。
STEP1
[ソース]
全体枠のレイアウトを記述する。
今回は標準準拠モードなので、まずHTMLタグから指定します。
width: 100%;の指定は必要ないとは思いますが、より正しい表記という意味で書いておきます。
（height: 100%;の場合は絶対に必要です）
width: 100%;
}
BODYタグの背景色は黒にする予定ですが、隙間チェックのため制作段階では違う色にします。
私のブラウザの標準背景色はグレーなので、テスト背景色を白にしてます。
今回は中央揃えの上ピッタンということで、
width: 100%;
＋
マージン、パディングは０
color: #333;
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
表示領域の幅を760ピクセル、センター合わせに指定します。
この状態では、まだIE5は中央揃えになりません(それは後半でまとめて)。
ちゃんとできているかチェックするためのテスト背景色は青です。
background-color: #00f;
width: 760px;
margin: 0 auto;
}
STEP2
[ソース]
各パートのレイアウトを作成する。
ざっくり大きなところから作っていくタイプの人と、上から順々に作っていくタイプの人がいますよね。
HTMLとかCSSとかはテクニックの組み合わせなので、同じテクニックの部分は同じところにってほうが後でわかりやすいと思います。
STEP3
[ソース]
ulタグ、liタグのlist-style-typeを無効にする。
リストタグの『・』を消します。
ulタグとliタグの両方に指定しないとブラウザによっては『・』が表示されます。
STEP4
[ソース]
ロゴ部分のテキストを画像に置き換える。
STEP5
[ソース]
メニューのテキスト部分を、ロゴ部分と同じ要領で画像に置き換える。
STEP6
[ソース]
中央のイメージ部分を画像に置き換える。
STEP7
[ソース]
フッターの部分をメニューと同じ要領で画像に置き換える。
STEP8
[ソース]
コピーライト部分を画像に置き換える。
STEP9
[ソース]
フッター部分を中央寄せにする。
中央寄せといっても、領域の境目を中央に持ってきたいので、
実際には右寄せと左寄せです。
STEP10
[ソース]
テスト用の背景色を消して、全体の背景色を設定する。
これでひとまず完成ですね。
STEP11
[ソース]
マウスオーバー
a:hoverを使って、マウスオーバーしたときの画像を変える。
この手法ならJavaScriptを無効にしているブラウザでも表示できます。
単純にa:hoverの背景画像を別の画像にするだけです。
CSSの仕様では、hoverはAタグ以外にも使えるようでFirefoxも対応していますが、IEでは対応していないのでAタグ以外には使わないほうがいいです。
background: transparent url(img/logo_o.gif) 0 0 no-repeat ;
}
STEP12
[ソース]
マウスオーバー画像をキャッシュできる方法の画像に変える。
STEP12の手法だとマウスオーバーしたときに初めて画像が読み込まれるので、回線の遅い環境だと表示が遅くなったりします。
２つのボタン画像を１つの画像にして、まとめて読み込ませちゃうって手法です。
Sleipnir以外のブラウザはこの手法でスムーズに画像が変わります。
background-position: 0 -70px;
}
STEP13
[ソース]
idをグルーピングする。
STEP14
[ソース]
Internet Explorer 5対策をする。
スタイルシートで文字を画像に置き換える手法は、IE5では『文字も画像も表示されない』といった最悪の状態になってしまいます。
ひとまずtext-indent: -9999px;をtext-indent: 0;にする。
STEP15
[ソース]
Internet Explorer 5対策をする。
小さく現れてしまったテキストの文字色を変える。（a:hoverも忘れないこと）
ボタンが丸角になっていたりして、文字を画像の一部で隠すことができないときには
やtext-indentでちょうどいいところにテキストを移動させる。
STEP16
[ソース]
Internet Explorer 5対策をする。
全体部分とフッター部分の中央揃えをする。
STEP17
[ソース]
Internet Explorer 5対策をする。
IEの条件付コメントを使って、IE5以外のブラウザとCSSを分ける。
STEP18
[ソース]
ロゴ部分をH1タグに変更する。
H1は論文で言えば『論文のタイトル』に相当します。
ページ内で言いたい一番大事なことです。
SEO（Yahoo!、Googleなどの表示順）のキーワードとして有効なので、使用しないのはもったいないです。
ただし必ずH1はページ内に１つだけで、複数指定すると逆効果となります。
STEP19
[ソース]
Netscape7.1対策を忘れていたので追記する。
文字を画像に置き換える手法は、Netscape7.1ではAタグのスタイルに
を指定しないと、画面外に飛ばした文字から画像までの間に線が表示されます。
STEP20
[ソース]
外部スタイルシートに変更する。
CSSディレクトリに外部スタイルシートをまとめるときには、画像の階層の変更を忘れないように。
Netscape4では、CSS内の画像をCSSファイル基準ではなくHTML文書基準に表記するようになっているので、
HTML文書とCSSファイルとを別階層にする場合はNetscape4でCSSを読み込まないようにmediaを指定します。
STEP21
[ソース]
