レイアウト・配置の間隔｜marginで簡単調整【CSS】

前回の記事では《div》要素と《float》プロパティを使って大まかなレイアウトを作成しました。

ただ、これでは、レイアウト同士がくっ付いているため、見た目がイマイチです。

レイアウトを配置した次の段階として、レイアウトの微調整に入ります。

前回まで行ったこと
要素同士の隙間には《margin》プロパティ
1. 要素同士の間に隙間を入れる（Aの下）
2. 要素同士の間に隙間を入れる（B・Cの間）
A・B・Cのソースコードを作成
要素同士の間隔調整｜問題
要素同士に空白を入れよう！

前回まで行ったこと

前回行ったことは、レイアウトの大まかな配置を決定しました。

ソースコードは以下の通りです。

HTMLでは、

<div class="sample_a">A</div>
<div class="sample_b">B</div>
<div class="sample_c">C</div>
<div class="sample_clear"></div>

CSSでは、

.sample_a {
     width: 100%; /* 横幅を指定 */
     height: 200px; /* 縦幅を指定 */
     background-color: blue; /*背景色*/
}
.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
     float: left;
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
     float: left;
}
.sample_clear {
     clear: both;
}

項目の画像のように３つのレイアウト《div》を《float》プロパティによって配置し、最後に《clear》プロパティで回り込みを元通りにしました。

次の段階としては、レイアウト同士の間に隙間を入れて、ホームページらしい形へと仕上げます。

要素同士の隙間には《margin》プロパティ

要素同士の間に隙間（空白）を入れる際に便利なプロパティは《margin》プロパティです。

《margin》とは余白を意味し、要素同士の間に隙間を作りたい時に利用されています。

早速、A・B・Cの要素の間に隙間を作っていきましょう。

要素同士の間に隙間を入れる（Aの下）

AとB・C間に隙間を入れるには《margin》プロパティの{bottom}位置を指定します。

《margin》プロパティには以下の書き方が存在します。

margin-top（上に空白）
margin-bottom（下に空白）
margin-left（左に空白）
margin-right（右に空白）

それぞれのプロパティは空白を作成する位置を示しています。

今回の場合は、AとB・C間に隙間を作りたいのでA下（bottom）に空白を作成します。

つまり、【margin-bottom】が正しい指定方法になります。

書き方としては、

.sample_a {
        width: 100%; /* 横幅を指定 */
        height: 200px; /* 縦幅を指定 */
        background-color: blue; /*背景色*/
        margin-bottom: 30px; /*下に空白*/
}
.sample_b {
	width:50%; /* 横幅を指定 */
	height: 500px; /* 縦幅を指定 */
	background-color:#DCDCDC; /*背景色*/
	float: left;
}
.sample_c {
	width:50%; /* 横幅を指定 */
	height: 500px; /* 縦幅を指定 */
	background-color:green; /*背景色*/
	float: left;
}
.sample_clear {
	clear: both;
}

このように【margin-bottom: 30px;】と指定することで下に向けて30(px)分の空白を作ることができます。

くれぐれも、指定するブロック（要素）を間違えないようにしましょう。

要素同士の間に隙間を入れる（B・Cの間）

続いて、BとCの間に隙間を作ります。

上の画像のようなレイアウトではBの右に隙間を作成します。

この際に、気を付ける必要があるのは、横幅のサイズの指定です。

例えば、全体の横幅が100％でBとCのそれぞれに50％の横幅を割り当てた場合、隙間分の横幅も全体の横幅に含む必要があります。

つまり、B（50％）C（50％）の横幅で、且つ、隙間（〇％）を含めてしまうと、100％の横幅を超えてしまい、全体のサイズがオーバーしてしまいます。

この場合は、BとCの横幅を小さくし、全体の横幅を超えない隙間のサイズへと調整する必要があります。

書き方としては、

.sample_a {
         width: 100%; /* 横幅を指定 */
         height: 200px; /* 縦幅を指定 */
         background-color: blue; /*背景色*/
	 margin-bottom: 30px; /*下に空白*/
}
.sample_b {
	width:48%; /* 空白分を考慮した値 */
	height: 500px; /* 縦幅を指定 */
	background-color:#DCDCDC; /*背景色*/
	margin-right: 30px; /*右に空白*/
	float: left;
}
.sample_c {
	width:48%; /* 空白分を考慮した値 */
	height: 500px; /* 縦幅を指定 */
	background-color:green; /*背景色*/
	float: left;
}
.sample_clear {
	clear: both;
}

全体の横幅を100%に設定（a）し、空白文を考慮した値（b・c）に設定します。

A・B・Cのソースコードを作成

今回、作成した「A」「B」「C」のレイアウトを作成したソースコード（HTML）は、

<div class="sample_a">A</div>
<div class="sample_b">B</div>
<div class="sample_c">C</div>
<div class="sample_clear"></div>

CSSは、

.sample_a {
         width: 100%; /* 横幅を指定 */
         height: 200px; /* 縦幅を指定 */
         background-color: blue; /*背景色*/
	 margin-bottom: 30px; /*下に空白*/
}
.sample_b {
	width:48%; /* 横幅を指定 */
	height: 500px; /* 縦幅を指定 */
	background-color:#DCDCDC; /*背景色*/
	margin-right: 30px;
	float: left;
}
.sample_c {
	width:48%; /* 横幅を指定 */
	height: 500px; /* 縦幅を指定 */
	background-color:green; /*背景色*/
	float: left;
}
.sample_clear {
	clear: both;
}

以上のソースコードで「A」「B」「C」の要素同士の間隔の調整が完了します。