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

HTML&CSS

前回の記事では《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」の要素同士の間隔の調整が完了します。

要素同士の間隔調整|問題

要素同士の隙間(空白)の作り方を覚えよう!

横幅200pxの親要素内に、横幅120pxと70pxの子要素を2つ横に並べるとする。

子要素同士の間に《margin-right》で空白を入れた場合に、最も親要素内に綺麗に並び、収まる値は何か?

尚、線・枠の太さ、その他の値は含まない

《margin》には6つのプロパティが存在する。

横幅いっぱいの親要素があり、親要素の中に子要素を左右に2つ配置する。

子要素同士の中に余白を入れる場合に、どのプロパティが正しいか?

要素同士の間隔調整で便利なプロパティは何か?

《margin-top》の意味として正しいものはどれか?

Your score is

要素同士に空白を入れよう!

要素同士の間に隙間を入れる際には《margin》を利用すると簡単に隙間を入れることができます。

また、このプロパティは使う頻度も高いので覚えておいて損はしません。必ずと言っていい程に《margin》プロパティは使用します。

要素同士のレイアウトの微調整にお困りの方は《margin》プロパティで間隔を調整してみてはいかがでしょうか。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました