【CSS】レイアウトの基本、ボックスの構造

ボックスはWebページのデザインを組み立てるのに非常に重要です。

ここでは主にボックスの周りの余白の取り方について説明していきます。

ボックスの構造
ボックス関連のプロパティ

ボックスの構造

HTMLの要素はボックスと呼ばれる領域を持ちます。

ボックスは要素内容を表示する領域の他にパディング、ボーダー、マージンという領域に分かれています。

ボーダー

ボーダーがわかりやすいと思うのでまずはボーダーから。

プロパティに関しては次の項で説明するのでまずは雰囲気を掴みましょう。

CSS

.border1 { border: solid 1px #FDDD9B }
.border10 { border : solid 10px #FDDD9B }

HTML

<div class="border1">ここがボックス</div>
<div class="border10">ここがボックス</div>

ブラウザ

ここがボックス

ボーダーは枠線ですね。

パディング

続いてパディング。

CSS

.border10 { border : solid 10px #FDDD9B }
.padding20 { padding: 20px }

HTML

<div class="border10">ボーダー 10px、パディング 0px</div>
<div class="border10 padding20">ボーダー 10px、パディング 20px</div>

ブラウザ

ボーダー 10px、パディング 0px

ボーダー 10px、パディング 20px

ボーダーと要素内容との間にスペースができました。これがパディングです。

マージン

残りはマージン。

CSS

.border10 { border : solid 10px #FDDD9B }
.margin0 { margin: 0px }
.margin30 { margin: 30px }

HTML

<div class="border10 margin0">ボーダー 1px、マージン 0px</div>
<div class="border10 margin0">ボーダー 1px、マージン 0px</div>
<div class="border10 margin30">ボーダー 1px、マージン 30px</div>

ブラウザ

ボーダー 1px、マージン 10px

ボーダー 1px、マージン 30px

マージンはボーダーの外側のスペースです。

1コ目のボックスと 2コ目のボックスの間はマージン 0px なので隙間がありませんが、3コ目は上下左右（下はわかりずらいですが）にスペースができてます。

ついでに line-heightプロパティ

文字の上下の余白をつくるline-heightプロパティも。

CSS

.border1 { border : solid 1px #FDDD9B }
.padding20 { padding : 20px }
.lineheight50 { line-height : 50px }

HTML

<div class="border1">ボーダーのみ</div>
<div class="border1 lineheight50">line-height</div>
<div class="border1 padding20">パディング 20px</div>

ブラウザ

ボーダーのみ

line-height

パディング 20px

ボーダーから間隔をあけるという意味では見た目はあまり変わらないけど、使ってる領域は違います。（line-heightは要素内容の領域を広げてる）

ボックス関連のプロパティ

ボーダーもパディングもマージンも上下左右全て大きさを個別に指定できます。

指定する方法は値を半角スペースで区切ることで指定しますが、指定する数によって適用される場所が変わるので、組み合わせをしっかり覚えましょう。

ボーダー関連のプロパティ

ボーダーは線の太さ、色、線種を指定できます。

上下左右の個別に指定するプロパティと一括で指定できるものがあって、組み合わせは下の表のとおり。

	太さ	色	線種	太さ、色、線種
上下左右	border-width	border-color	border-style	border
上	border-top-width	border-top-color	border-top-style	border-top
下	border-bottom-width	border-bottom-color	border-bottom-style	border-bottom
左	border-left-width	border-left-color	border-left-style	border-left
右	border-right-width	border-right-color	border-right-style	border-right

指定したい場所と装飾を表から選んでやればいいわけですが、それもメンドイので一番右の列だけ覚えればOKです。

太さ、色、線種を同時に指定するときはそれぞれ値を半角スペースで区切って指定します。順番は関係ありません。

太さと色は数値等で指定しますが、線種は特定の値を指定することでデザインが変わります。

CSS

.borderstyle1 { border : none5px skyblue }
.borderstyle2 { border : solid5px skyblue }
.borderstyle3 { border : double5px skyblue }
.borderstyle4 { border : dotted5px skyblue }
.borderstyle5 { border : dashed5px skyblue }
.borderstyle6 { border : groove5px skyblue }
.borderstyle7 { border : ridge5px skyblue }
.borderstyle8 { border : inset5px skyblue }
.borderstyle9 { border : outset5px skyblue }

HTML

<p class="borderstyle1">none</p>
<p class="borderstyle2">solid</p>
<p class="borderstyle3">double</p>
<p class="borderstyle4">dotted</p>
<p class="borderstyle5">dashed</p>
<p class="borderstyle6">groove</p>
<p class="borderstyle7">ridge</p>
<p class="borderstyle8">inset</p>
<p class="borderstyle9">outset</p>