1. トップページ ＞
  2. コーディング関連情報 ＞
  3. コーディングコラム ＞
  4. CSSレイアウトのコツ2　～幅指定は外側だけ！～

コーディングコラム

CSSレイアウトのコツ2　～幅指定は外側だけ！～

前回はブラウザによって幅の解釈が変わってしまうことへの対処法を紹介しましたが、今回は幅と内側の余白をまとめて設定する方法を紹介します。基本的には前回同様、widthとpaddingを同時に記述しないことです。それでは以下の例を見てください。

HTML

<div class="box1">
　<div class="box2">
　　<p>テキスト</p>
　</div>
</div>

CSS

div.box1{
　width:400px;
}
div.box2{
　width:350px;
　margin-left:50px;
}
div.box2 p{
　padding-left:50px;
}

上の例でも正常に表示されるのですが、以下のように記述すればより効率よく同じ効果を出すことができます。

CSS

div.box1{
　width:400px;
}
div.box2{
　margin-left:50px;
　padding-left:50px;
}

外側(div.box1)の幅にあわせて、内側(div.box2)では幅の指定なしで外余白(margin)と内余白(padding)で幅を調節しているわけです。こうすれば、box2に入れる要素全てに設定しなくても同じ余白を与えることが出来ます。

今回のポイント
width指定は外側だけで内側はmarginとpaddingで調節