3カラムレイアウトの余白の調整

それぞれのレイアウト幅を決めたら、余白を設定し、文字が読みやすいようにデザインしていきます。

3カラムレイアウトのカスタマイズ方法 （STEP 3）

■ STEP3　3カラムレイアウトの余白の調整

■ padding の指定

前回までに作成したレイアウトを、下図のように、左サイド・メイン・右サイドの枠内に10pxの余白を設けて、コンテンツ領域が表示されるようにするには、paddingで調整することができます。

バナー部分 左サイド メイン部分 右サイド 　フッター部分

＜CSS の記述例＞

#container { width: 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 420px; padding: 10px; } #left { float: left; width : 160px; padding: 10px; } #right { float: right; width : 160px; padding: 10px; } #footer { width : 800px; }

※赤色文字が、編集箇所です。

■ margin の指定

前回までに作成したレイアウトを、下図のように、表示領域枠と各レイアウト枠との間に10pxの余白を設けて表示するには、marginで調整することができます。

バナー部分 左サイド メイン部分 右サイド 　フッター部分

＜CSS の記述例＞

#container { width: 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 420px; margin: 10px; } #left { float: left; width : 160px; margin: 10px; } #right { float: right; width : 160px; margin 10px; } #footer { width : 800px; }

※赤色文字が、編集箇所です。

margin（マージン） と padding（パディング）の違い

margin（マージン） と padding（パディング）で余白を指定することができますが、その違いについて説明します。

下図のように、文章や画像などが入るコンテンツ領域、それを囲む枠線（border）があるとします。
そのコンテンツ領域と枠線の間の幅が詰め（padding）で、枠線から外側の幅が余白（margin）です。

← 領域幅 →

余白（margin）= 10px 詰め（padding）= 10px コンテンツを表示する領域 枠線（border）= 2px

marginプロパティ と paddingプロパティ

今回使用した「margin」プロパティ と 「padding」プロパティの記述方法について、説明します。

■ marginプロパティ
marginプロパティは、領域枠とブロックタグんで括られた文章との間に余白を入れることができます。

＜HTML の記述例＞

<div id="left">左サイド部分</div>

＜CSS の記述例＞

#left {　margin: 0px 10px 20px 30px; }

■ 値の記述例
例：margin : 10px;
= 上：10px 下：10px 左：10px 右：10px

例：margin : 10px 5px;
= 上：10px 下：10px 左：5px 右：5px

例：margin : 0px 10px 20px 30px;
= 上：0px 右：10px 下：20px 左：30px

■ 指定方法

スタイル	意味
margin	4つの側をまとめて指定
margin-top	上側の指定
margin-bottom	下側の指定
margin-left	左側の指定
margin-right	右側の指定

■ paddingプロパティ
paddingプロパティは、ブロックタグで括られた文章を囲む枠とその文章との間に余白を入れることができます。

＜HTML の記述例＞

<div id="left">左サイド部分</div>

＜CSS の記述例＞

#left {　padding: 0px 10px 20px 30px; }

■ 値の記述例
例：padding : 10px;
= 上：10px 下：10px 左：10px 右：10px

例：padding : 10px 5px;
= 上：10px 下：10px 左：5px 右：5px

例：padding : 0px 10px 20px 30px;
= 上：0px 右：10px 下：20px 左：30px

■ 指定方法

スタイル	意味
padding	4つの側をまとめて指定
padding-top	上側の指定
padding-bottom	下側の指定
padding-left	左側の指定
padding-right	右側の指定

以上、余白の設定方法について説明しました。

しかし、余白を設定した際に、width（横幅）も調整しなければ、レイアウトが崩れたり、サイドバーが下に落ちたりすることがあります。
divタグなどを使用して、CSSによってレイアウトする場合、CSSがどのようにwidth（横幅）を解釈するのか理解しておく必要があります。

[関連記事] CSSによるwidth（横幅）の解釈方法

参考になりましたら、応援お願いします。