前回の記事では《div》要素と《float》プロパティを使って大まかなレイアウトを作成しました。
ただ、これでは、レイアウト同士がくっ付いているため、見た目がイマイチです。
レイアウトを配置した次の段階として、レイアウトの微調整に入ります。
前回まで行ったこと

前回行ったことは、レイアウトの大まかな配置を決定しました。
ソースコードは以下の通りです。
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;
}
項目の画像のように3つのレイアウト《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」の要素同士の間隔の調整が完了します。
要素同士の間隔調整|問題
要素同士に空白を入れよう!
要素同士の間に隙間を入れる際には《margin》を利用すると簡単に隙間を入れることができます。
また、このプロパティは使う頻度も高いので覚えておいて損はしません。必ずと言っていい程に《margin》プロパティは使用します。
要素同士のレイアウトの微調整にお困りの方は《margin》プロパティで間隔を調整してみてはいかがでしょうか。
コメント