HTMLの基礎の基礎06

作成日：2026-04-19

【27】margin（マージン）、padding（パディング）とは。

• margin は、外側の枠。
• padding は、内側の枠。


• <div class=""></div> クラス要素で囲うと、見えていなくても存在しています。
• margin:0、padding:0、にすると消えます。


• くっつきすぎず、離れすぎず、自分好みの適度な距離にに離すことができます。

【28】分割レイアウトを作る。

• css の中でflex を使います。
• display:flex クラスで囲んだ中でだけ、枠が横に並びます。


• 2つ並べたいので、並べるためのそれぞれの枠のクラスを作ります。

.middle_block {
	 display: flex;
}
.side_block {
	flex: 1;
	background-color: #eee;
	margin-right: 1em;
}
.main_block {
	flex: 3;
	background-color: #eee;
}

• flex:1 flex:3 というのは、1:3 という枠の横幅を分割する比率になります。（25%：75%）
• もちろんここの数字を変えれば、比率が変わります。


• 1:1 にすればそれぞれの枠の横幅は横幅全体の50%:50% になりますし、4:1 にすれば80%:20% になります。


• background-color を設定すれば背景の色も設定できます。
• margin を設定すればその分、隙間が空きます。

【29】分割レイアウトパターン例01

• 【28】のflex 分割の上に枠を足し、下にも枠を足したレイアウト。
• 単純に上記のflex 分割の上下に順番に枠を置いただけですね。
• 上の枠にはmargin-bottom:1em を付けて下と距離を空け、下の枠にはmargin-top:1em を付けて上と距離を空けてます。

.top_block {
	background-color: #eee;
	margin-bottom: 1em;
}
.bottom_block {
	background-color: #eee;
	margin-top: 1em;
}

/* flex01 */

.middle_block {
	 display: flex;
}
.side_block {
	flex: 1;
	background-color: #eee;
	margin-right: 1em;
}
.main_block {
	flex: 3;
	background-color: #eee;
}

【30】分割レイアウトパターン例02

• 2例目は全体をflex でくくって、右側の3枠を1つの枠でくくってから、その中に枠を3つ入れているだけです。
• 右側の3つの枠のうち、1番目と2番目にはmargin-bottom:1em を設定し、1emの隙間を確保しています。

/* flex02 */

.layout_box {
	display: flex;
}
.side_box {
	flex: 1;
	background-color: #eee;
	margin-right: 1em;
}
.right_box {
	flex: 3;
}
.top_box {
	background-color: #eee;
	margin-bottom: 1em;
}
.main_box {
	background-color: #eee;
	margin-bottom: 1em;
}
.bottom_box {
	background-color: #eee;
}

• ※今回解説したい重要な部分以外のcss（text-align や、font-size 、h2,h3のmargin など）は省略しています。

【今回はここまでです】

「marginとpadding」「分割レイアウトを作る」「レイアウトパターン2種」を解説しました。

cssでflexを使用したレイアウト方法を、作例も合わせて紹介しました。

ここまで解説してきた内容で、シンプルなWebページなら完成させられるのではないでしょうか。

次回は「font-size」「top,right,bottom,left」「X(旧Twitter)用metaタグ」を解説します。

X(旧Twitter)用のmetaタグは、Twitterに投稿した時にサムネイル画像と内容の紹介が表示されます。

それが丸ごとリンクURLになっているのでクリックするとWebページが開く、というものです。

ニュースサイトやメーカーや販売店が投稿しているのをよく見かけますね。