CSS（ボックスについて）

　今日は、ボックスについて。

　HTMLは、ボックス（箱）の設計が重要といっても過言ではない。
　寧ろ、ボックスの設計が分かってなければ、デザインカンプ（モックアップ）やワイヤーフレームも描けない。
　それらがなければ、コーディングなんてできないわけで。正確に言えば、コーディングはできるけど、余白の取り方など綺麗にできないわけで。
　だから、ボックスの性質などを理解しなきゃいけない。

　さて、ボックスには、２種類の表示形式がある。このボックスの性質を理解することでWebページのレイアウトが可能になる。
・ブロックボックス
・インラインボックス

１　ブロックボックス

　ブロックボックスは、要素同士が縦方向（上から下）に並ぶ性質がある。
　横幅をwidth（ワイズ）で、高さをheight（ハイト）で指定する。
　代表的なブロックボックスは、h要素、p要素、ol要素、ul要素、div要素などがある。

２　インラインブロック

　インラインボックスは、要素同士が横方向（左から右）に並ぶ性質がある。
　ボックスの幅と高さはコンテンツに応じる。一部例外あり。
　代表的なインラインブロックは、a要素、br要素、img要素、span要素などがある。

３　ボックスの形式の変更

　ボックスの形式を指定するには、displayプロパティを使用する。
・block　　　　⇨　ブロックボックス
・inline　　　　⇨ 　インラインボックス
・inline-block　⇨　インラインブロック

　インラインブロックでは、インラインボックスのように要素同士を横方向に並べることができ、幅・高さを指定できる。

　とここまで書いたけど、言葉だけだと分かりずらいので図解する。

【HTML】

<!--ブロック-->
<div>ブロック</div>
<div>ブロック</div>
<div>ブロック</div>

<!--インライン-->
<span>インライン</span>
<span>インライン</span>
<span>インライン</span>

<!--インラインブロック-->
<span class="inline">インラインブロック</span>
<span class="inline">インラインブロック</span>
<span class="inline">インラインブロック</span>

【CSS】

div{
	width:100px;
	height:100px;
	border:2px solid pink;
	
	}

span{
	width:100px;
	height:100px;
	border:2px dashed blue;
	
	}

.inline{
	width:100px;
	height:100px;
	border:2px dotted green;
	display:inline-block;
	
	}

　以上のようにコーディングすると、下図のような結果になる。

ブラウザで表示した結果

４　ボックスモデル

　ボックスには、コンテンツ、パディング、ボーダー、マージンの領域で構成される。

Googleの開発者ツール

・青い部分がコンテンツ。
・黄色い部分がボーダー。
・コンテンツとボーダーの間（緑）がパディング。
・ボーダーの外側（オレンジ）がマージン。

　３で掲載した図で見ると、
・文字がコンテンツ。
・ピンク、青、緑の線がボーダー。
・ボーダーと文字の間がパディング。
・ボーダーの外側がマージン。

　冒頭で言ったようにHTMLはボックスの設計が重要。
　ちゃんと設計するためにも上記４つは最低限押さえておきたいところ。