Home > 編集方法(カスタマイズ)目次 > レイアウトに関する設定
スタイルシートの段組に関する部分は理解できたでしょうか?または理解されているでしょうか?
本来ならば普通に編集していけばいいのですが、CSSも万能ではないために少々頭を使ってレイアウトを考えます。ここで重要になってくるのが、余白の設定(マージン:marginとパディング:padding)と線の太さ(border)です。
リニューアルにより、実際のテンプレートでは一部セレクタ名を変更しています。変更部分を置き換えてご確認下さい。
レイアウト/段組に関係する部位と、実際にデータを入力する部位を分けています。少し<div>タグの入れ子になりますが、初心者にはこの方が安全と考えます。
原理が理解出来ればすべて#contentsと#sidebarで指定可能ですよ。
段組は#contentsと#sidebarで指定します。
余白の指定は.contentsと.sidebarで指定します。よって、全体の幅を広げたり小さくする際は#contentsと#sidebarで指定して下さい。
以下、2段組左サイドバーのサンプル1を使いながら、順を追って説明しますので気をつけて下さいね。考え方は1段組〜3段組まで共通です。
それでは幅を800pxに広げてみましょう。
以上で枠が全体的に800pxになります。【#header】【#box】【#footer】は【#container】の幅一杯に広がります。
続いて【#contents】【#sidebar】部分の指定。
ポイント
基準は全体の幅【#container】です。【#contents】と【#sidebar】の幅の合計が【#container】の幅と同等か、或いはそれ以下になるように指定して下さい。
初心者でも崩れないレイアウトを実現させる為に余白の指定は【#contents】内のボックス【.contents】、【#sidebar】内のボックス【.sidebar】で行っています。
.contents{ margin:20px 20px 20px 20px; } .sidebar{ margin:10px 0px 10px 0px; }
線の指定は余白の指定と共にレイアウト崩れの大きな原因の一つで、初心者にとってちょっと厄介な部分です。当サイトのテンプレートはその点を回避する為に【.contents】と【.sidebar】を設けました。
つまり【ボーダー(border)の指定】も【.contents】と【.sidebar】側で行います。
ここでは取りあえず【.contents】部分だけを例にとり、【.contents】の左側に罫線を入れてみます。
.contents{ margin: 20px 20px 20px 20px; }
変更.contents{ margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; border-left: 1px solid #000000 }
ポイント
このようにする事により、全体のレイアウトを決めている【#contents】は変更することなくボーダー指定が可能となります。慣れてくれば、こんな回り道をしなくとも【#contents】側で全て指定出来ます。
Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.