ボックスレイアウト、サイズと余白「CSS実践編：CSSでのレイアウトstep2」

前回は、ブロック要素とインライン要素、またボックスレイアウトについて記載いたしました。

ブロック要素とインライン要素については、非常に重要で、
CSSでスタイルをおこなっていく際はッ、まず、ブロック要素で
おおまかなレイアウトやスタイルの指定をおこない、
その後に、インライン要素のスタイルを指定していく順序が、
スムーズにCSSでスタイルを記載できるコツといえるかと思います。

いずれにせよ、ブロック要素とインライン要素の概念は、
非常に重要になってきます。

また、今回はボックスレイアウトを詳しく記載していきますが、
ブロック要素とインライン要素、単純なようで実は複雑です。

このボックスレイアウトの概念を理解するにあたり、
ブロック要素とインライン要素、双方にかかわるボックスレイアウトということになります。

ボックスレイアウトの概念を正しく理解するには、
ブロック要素とインライン要素の概念をしっかりと理解しておきましょう。

それでは今回はッ、

上記について、記載していきます…。

CSSでレイアウトをおこなう際、ボックスという重要な概念がございます。
すべての要素が、このボックスという見えない四角の領域を持ち、
この領域を並べたり重ねたりしてレイアウトをおこなっていきます。

CSSでレイアウトをおこなう際は、それぞれの要素に対して、
margin、padding、borderなどを設定し調整をおこないます。

これらのプロパティの関係を理解して、ボックスの幅や高さにどのような影響を
あたえるのか理解していないと、思うようにレイアウトすることが困難になります。

基本的にはすべての要素を足したものが余白、サイズとなる考え方で
何ら問題ございませんが、隣接する要素のmarginやpaddingが、
隣り合うまた、上下に隣接する場合、大きな値が適用される現象（相殺）が起こるので、
少し注意が必要になってきます。

また、ボックスの高さはコンテンツに合わせて自動的に増減させることが多くなりますが、
heightやmin-heightで高さを制限することも可能です。

その高さを制限した場合に、コンテンツの内容によっては
ボックスの高さから、はみ出してしまう場合はoverflowプロパティにより
どのように表示するか指定可能になります。

画像や文章などに余白をあたえたい場合に使用するプロパティが、
margin（マージン）、padding（パディング）になります。

marginはborder（ボーダー：境界線）の外側の余白で、
paddingはボーダーの内側の余白になり、テキストや画像の外側に余白を
もたせる際に使用します。

margin、paddingともに、上、右、下、左を個別に指定することも、
また、一括して指定することも可能です。

＜margin、paddingを個別に設定するプロパティ＞

＜margin、paddingをまとめて設定するプロパティ4パターン＞

See the Pen
yLydzGx by masakado (@kadokado354)
on CodePen.

どちらのp要素にも余白を持たせていますが、背景色を指定すると
マージンとパディング違いがよく分かります。

ボックスのサイズは、マージン、パディング、ボーダーの幅（太さ）の
すべての値の合計となります。

スマートフォン用などのCSSで、バナーレイアウトをおこなう際、
パーセント指定などの場合は特に注意が必要になります。
また、この概念をしっかりと理解していないと、レイアウト崩れの原因になります。

下記図を説明いたしますと、テキストボックスがwidth100pxでpadding左右20px、
margin左右20px、border左右2pxになりますので、すべての値width142pxになります。

このボックスサイズの概念は非常に重要になります。

スマートフォン用CSSなどの場合は、px（ピクセル）では無く、横幅に限っては、
すべて％で指定をおこなうことも、度々ございます。

marginプロパティはボックスに対して余白を作るというシンプルなものですが、
「上のボックスの下のmargin」と「下のボックスの上のmargin」を指定した際、
小さい値が無視されるmarginの相殺が起こります。

＜例＞

<!-- css -->
<style>
#box1 {
	margin-bottom: 100px;
	background: #4c5482;
}
#box2 {
	margin-top: 50px;
	background: #4c5482;
}
</style>

<!-- html -->
<div id="box1">
<p>サンプルテキストbox1</p>
</div>
<div id="box2">
<p>サンプルテキストbox2</p>
</div>

また、入れ子要素に余白がある場合も同様で、
内側の要素に一番大きなmarginが指定されている場合は、そのmarginが適用されます。

ネガティブマージンについて

上のボックスのmarginがマイナス、下のボックスのmarginがプラスと
符号が異なる際は、双方のmarginは相殺されず、二つを足した値が適用されます。

両方ともにマイナスの場合は、プラスの時同様に数値の大きい方が適用され、
ボックスが重なってしまうこともありますので、注意が必要です。

＜例＞

<!-- css -->
<style>
#box1 {
	margin-bottom: -50px;
	background: #4c5482;
}
#box2 {
	margin-top: 100px;
	background: #4c5482;
}
</style>

<!-- html -->
<div id="box1">
<p>サンプルテキストbox1</p>
</div>
<div id="box2">
<p>サンプルテキストbox2</p>
</div>

マージンが相殺されないケース

ボックスにborder（境界線）が指定されている場合は、borderの内側にある要素の
marginは相殺されずに合計の余白が適用される。
paddingによる内側の余白は常に相殺されない。

＜例＞

<!-- css -->
<style>
#box1 {
	margin-bottom: 100px;
	background: #4c5482;
	border: 1px solid #999;
}
#box2 {
	margin-top: 20px;
	background: #4c5482;
	border: 1px solid #999;
}
#box2 h2{
	margin-top: 50px;
}
</style>

<!-- html -->
<div id="box1">
<h2>見出しサンプル</h2>
<p>サンプルテキストbox1</p>
</div>
<div id="box2">
<h2>見出しサンプル</h2>
<p>サンプルテキストbox2</p>
</div>

今回記載いたしました、レイアウトをおこなう際の重要なポイントは、
ズバリ！ボックスの概念！！

ECサイトなどの制作をおこなっておりますと、たびたび登場するバナーレイアウト。
これもボックスレイアウトでコーディングをおこなうわけですが、
このボックスの概念をしっかり理解していないと、レイアウト崩れを起こす原因になります。

個人的に私は、floatなどはあまり使用せず、ここ最近はinline-blockで、
最後の子要素のmargin-rightを0にするようレイアウトをおこないますが、
この概念をしっかりと理解していないと、左右空白なく指定したサイズに収まらないことに
なってしまうかと思いますので、ここもしっかりと身につけたいスキルのひとつです…。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。