トップ > スタイルシートデザイン > 余白を指定する
余白を指定する
スポンサード リンク
ここでは、各部分の間に余白を指定します。
CSSファイルに以下のように記述します。
#outline{
width:750px;
margin:0 auto 0;
}
#header{}
#content{
padding:0 10px;
}
#main{
float:left;
width:500px;
margin:10px 0;
}
#menu{
float:right;
width:210px;
margin:10px 0;
}
#footer{
clear:both;
}
上記のCSSではちょっとややこしい指定をしています。width:750px;
margin:0 auto 0;
}
#header{}
#content{
padding:0 10px;
}
#main{
float:left;
width:500px;
margin:10px 0;
}
#menu{
float:right;
width:210px;
margin:10px 0;
}
#footer{
clear:both;
}
CSSの仕様やブラウザのバグを考慮してこのような指定をしてみました。
それらを考慮しないで余白を設定しようとすると、なかなか思うようにいかないのが現実です。
上のものを真似して余白を指定して頂ければ多分問題ないかと思いますが、気になる方は関連サイトをご覧頂くと良いと思います。
これで枠組み作りは終了です。
あとはHTMLファイルに文章を書いたりCSSを追加したりしてページを完成させて下さい。
今までのHTMLタグとCSSを利用してサンプルを作ったのでおまけとしてここに置いておきます。
テンプレートではないのでそのまま使わない方が良いです。
「サンプルファイル」
関連サイト
- CSSレイアウトの定石 WinIE6バグ回避法(てんぽ)
- WinIE6バグのうちCSSレイアウトに関するものが掲載されています。
- CSSバグリスト@CSSバグ辞典スレッド
- ブラウザごとのCSSバグが掲載されています。