幅固定レイアウト

広告

段組レイアウトを見ていく前に、幅固定にする場合の追加の設定を見ておきましょう。

表示される幅を設定するには、コンテンツ領域全体を現している「wrapper」に対してwidthプロパティに値を設定します。

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
width:450px;
}

前のページで作成した基本構成に幅を設定したものを見てください。

sample2-1.html

css2-1.css

実際にブラウザで見てみると下記のようになります。

幅固定レイアウト

コンテンツ領域の位置を左端からずらす

現在は幅を設定したとしてもコンテンツ領域全体が左端にくっついている状態ですが、左端から少し右へずらす場合には「wrapper」に対してmargin-leftプロパティに値を設定します。

#wrapper{
margin:0 0 0 5px;
padding:0;
background-color:#ffffff;
width:450px;
}

上記では左から5ピクセル右へずらしています。

sample2-2.html

css2-2.css

実際にブラウザで見てみると下記のようになります。

幅固定レイアウト

コンテンツ領域のブラウザの中央に配置する

次にコンテンツ領域全体を中央に配置するようにしてみます。「wrapper」に対してmargin-leftプロパティとmargin-rightプロパティに「auto」を設定します。

#wrapper{
margin:0 auto 0 auto;
padding:0;
background-color:#ffffff;
width:450px;
}

実際に試してみます。

sample2-2.html

css2-2.css

実際にブラウザで見てみると下記のようになります。

幅固定レイアウト

ブラウザの中央に配置されていることが分かります。

( Written by Tatsuo Ikura )