ステップ2〜大きさを整える〜
#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; }
ポイント
ここでのポイントは、
- tdにvertical-align:top;を指定する
- tdにfont-size:値;を指定する
- 余白はボックスに指定する
の3つです。
vertical-align:top;は必須です。これがないと上下の位置がずれます。
IE5などの古いブラウザーはテーブル関連のタグにfont-sizeなどのプロパティを継承しない問題があります。 それを回避するためにもtdにfont-sizeをしておいたほうが良いでしょう。
tdにpaddingを指定して余白を作ろうと考えてはいけません。古いブラウザーで崩れます。 余白はDIVにマージンを使って指定しましょう。floatを使ってないので、自分の思ったとおりに表示されるはずです。
テーブルに指定するプロパティは、背景とwidth以外は指定しないほうが無難です。
確認
できたらブラウザーでどのように表示されるか見てみましょう
分かりやすいようにボーダープロパティを指定しています。
次は装飾を施します。