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

HTML/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、マージン 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-widthborder-colorborder-styleborder
border-top-widthborder-top-colorborder-top-styleborder-top
border-bottom-widthborder-bottom-colorborder-bottom-styleborder-bottom
border-left-widthborder-left-colorborder-left-styleborder-left
border-right-widthborder-right-colorborder-right-styleborder-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>
ブラウザ

none

solid

double

dotted

dashed

groove

ridge

inset

outset

 

ボーダー指定の注意点

ボーダーの線種の初期値は「none」になっているので、太さを 1pxにしただけでは線は表示されないだけでなく、太さも0になってしまいます。

つまりボーダーを表示させるには線種を「none」以外にしないといけない ということです。

 

パディング関連のプロパティ

パディングもボーダーと同様に上下左右を一括で指定できるものと個別で指定できるものがあります。

一括で指定できるものもボーダー同様に 値の数によって場所を選択することができます。

 

マージン関連のプロパティ

マージンも ボーダーやパディングと同様に 上下左右を一括で指定できるものと個別で指定できるものがあって、一括で指定できるものは 値の数によって場所を選択することができます。

マージンが隣接している場合は注意

ボックスが上下に 2つ並んでいる場合、上のボックスの下側のマージンと、下のボックスの上側のマージンは重なり、大きい方のマージンだけが有効になります。