ステップ２〜大きさを整える〜

#beginerなどにスタイルを設定して大きさを整えましょう。
テーブルのおかげでfloatに悩まされることはありません。うれしいね。

スタイルシートを書く

スタイルシートを書きます。

/*コンテンツ用枠*/
#content td{
    vertical-align:top;
    font-size:small;
}
/* コンテンツ用 */
#beginer,#design,#csstec,#gallery{
    position:relative;
    background-color:#FFFFFF;
    width:250px;
    border:#7F2D00 2px solid;
    margin-top:30px;
    margin-left:50px;
}

ポイント

ここでのポイントは、

1. tdにvertical-align:top;を指定する
2. tdにfont-size:値;を指定する
3. 余白はボックスに指定する

の3つです。

vertical-align:top;は必須です。これがないと上下の位置がずれます。

IE5などの古いブラウザーはテーブル関連のタグにfont-sizeなどのプロパティを継承しない問題があります。 それを回避するためにもtdにfont-sizeをしておいたほうが良いでしょう。

tdにpaddingを指定して余白を作ろうと考えてはいけません。古いブラウザーで崩れます。 余白はDIVにマージンを使って指定しましょう。floatを使ってないので、自分の思ったとおりに表示されるはずです。

テーブルに指定するプロパティは、背景とwidth以外は指定しないほうが無難です。

確認

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

ステップ２終了時点

分かりやすいようにボーダープロパティを指定しています。
次は装飾を施します。