近くのセブンから、ビックリマンチョコが無くなってガッカリなYu-ichiです
さて、今回はCSSのボックスレイアウトの基本をまとめてみたいと思います。
１．ボックスを作る
横300pxのボックスを作成したいと思います。
【HTML】
<div class=”box1″>
ボックス１
</div>
【スタイルシート】
div.box1 {
width:300px;
border:#cccccc solid 1px;
}
【完成】
横300pxのボックスが完成しました。
横300pxと言っておりますが、厳密には左右のボーダー1pxを足した302pxになります。
２．ボックスを中央に寄せる
先程作った横300pxのボックスを、ページ内の中央に寄せるテクニックです。
この左右のmarginをautoにしたやり方であれば、どんなウィンドウサイズにしても
かならず中央にきます。
注意点としては、この指定方法をするときは必ずwidthによる横幅を指定してください。
【スタイルシート】
div.box1 {
width:300px;
border:#cccccc solid 1px;
margin:0 auto;
}
【完成】
３．ボックス内に余白をもたせる
先程のボックス内に入っている文字が左の枠とくっついてしまっているので、
左側に10pxほど余白をもたせてみたいと思います。
ここでpaddingを使うのですが、注意すべき点があります。
ボックスの全体幅 ＝ width ＋ padding
というルールがあります。
ですので、左側に10px余白を取った分、ボックスを-10pxします。
さらに外枠の1pxを含めて、きっちり300pxにしたいときは左右の合計2pxをマイナスして
width:288pxとしてください。
【スタイルシート】
div.box1 {
width:290px;
border:#cccccc solid 1px;
margin:0 auto;
padding-left:10px;
}
【完成】
今日はここまで
それくらい知ってるよ！と言われそうですが・・・。
ビジュアル的なホームページを作る際には、このピクセル単位のサイズ調整が重要になってきますので、
基本をしっかり押さえておきましょう！
それでは、いつものランキング応援クリックお願いします
