初心者の館

テーブルタグを除去する3

ここからはスタイルシートを書いていきます。
レイアウトは後回しにして、まずサイズを整えます。
LV2で作ったやつにちょっと手を加えるだけなのですぐ終わります。


スタイルシートを書く

枠用ID部分のところに手を加えるだけです。
#の前についていたtableとtd、vertical-align:top;を取り除くだけで終了です。

/*枠用ID*/
#structure{
    background-color:#FFFFFF;
    width:700px;
    text-align:left;
    margin:0px auto;
}
#head{
    width:700px;
    background-color:#7F2D00;
}
#main-left{
    width:300px;
}
#main-right{
    width:400px;
}
#foot{
    width:700px;
}

ポイント

ここでのポイントは、

  1. paddingなどを加えたりしない

の1つです。

スタイルシートデザインでページを作るときはブラウザーによる解釈の違いに気をつける必要があります。
最も簡単にできる対策はレイアウト用のボックスにはpaddingやborderを指定しないことです。 これでずいぶんレイアウトの崩れが減ります。

確認

できたらブラウザーでどのように表示されるか見てみましょう。

スタイルシートを書いた後

あとはメインコンテンツの部分を横に並べるだけですね。

次回はいよいよポジション関連のプロパティが登場します。


←テーブルタグを除去する2へBACK : テーブルタグを除去する4へGO→


一覧へ戻る


Last Modified 2004-12-25 © きくちゃん 2004 - All Rights Reserved