パソコンQ&AパソコンQ&A各種設定・トラブルHTMLスタイルシートJavaScrptPHPその他テーブルレイアウトからスタイルシート(CSS)レイアウトにこのデザインをスタイルシート(CSS)レイアウトにしてみる。言葉の用途からHTML文書を作成。HTML文書というのは論文などを表記するためのものなので、タグ本来の意味を考えて書いていったほうがキレイになります。スタイルシートでデザインする場合も、本来の意味でタグを使っていればだいたいのデザインに対応できます。どのモード、どの仕様かは、標準準拠モードを選択してみます。IDやCLASSの名前は用途で付けたほうがいいです。STEP1[ソース]全体枠のレイアウトを記述する。今回は標準準拠モードなので、まずHTMLタグから指定します。100%;の指定は必要ないとは思いますが、より正しい表記という意味で書いておきます。100%;}BODYタグの背景色は黒にする予定ですが、隙間チェックのため制作段階では違う色にします。私のブラウザの標準背景色はグレーなので、テスト背景色を白にしてます。100%;}表示領域の幅を760ピクセル、センター合わせに指定します。この状態では、まだIE5は中央揃えになりません(それは後半でまとめて)。できているかチェックするためのテスト背景色は青です。auto;}STEP2[ソース]各パートのレイアウトを作成する。大きなところから作っていくタイプの人と、上から順々に作っていくタイプの人がいますよね。HTMLとかCSSとかはテクニックの組み合わせなので、同じテクニックの部分は同じところにってほうが後でわかりやすいと思います。STEP3[ソース]ulタグ、liタグのlist-style-typeを無効にする。リストタグの『・』を消します。ulタグとliタグの両方に指定しないとブラウザによっては『・』が表示されます。list-style-type:none;STEP4[ソース]ロゴ部分のテキストを画像に置き換える。STEP5[ソース]メニューのテキスト部分を、ロゴ部分と同じ要領で画像に置き換える。STEP6[ソース]中央のイメージ部分を画像に置き換える。STEP7[ソース]フッターの部分をメニューと同じ要領で画像に置き換える。STEP8[ソース]コピーライト部分を画像に置き換える。STEP9[ソース]フッター部分を中央寄せにする。実際には右寄せと左寄せです。STEP10[ソース]テスト用の背景色を消して、全体の背景色を設定する。これでひとまず完成ですね。STEP11[ソース]マウスオーバーa:hoverを使って、マウスオーバーしたときの画像を変える。この手法ならJavaScriptを無効にしているブラウザでも表示できます。単純にa:hoverの背景画像を別の画像にするだけです。CSSの仕様では、hoverはAタグ以外にも使えるようでFirefoxも対応していますが、IEでは対応していないのでAタグ以外には使わないほうがいいです。;}STEP12[ソース]マウスオーバー画像をキャッシュできる方法の画像に変える。STEP12の手法だとマウスオーバーしたときに初めて画像が読み込まれるので、回線の遅い環境だと表示が遅くなったりします。2つのボタン画像を1つの画像にして、まとめて読み込ませちゃうって手法です。Sleipnir以外のブラウザはこの手法でスムーズに画像が変わります。-70px;}STEP13[ソース]idをグルーピングする。スタイルシートで文字を画像に置き換える手法は、IE5では『文字も画像も表示されない』といった最悪の状態になってしまいます。