はてなブログ、CSSでボックス関連の書式を指定する方法 CSS講座（4）

連載の第4回目は、サイズや背景色、枠線、余白といったボックス関連のプロパティについて紹介していきます。デザインを作成するときに基本となるプロパティなので、必ず記述方法を覚えておいてください。

widthとheight

要素の幅を指定するときはwidth、高さを指定するときはheightというプロパティを使用します。いずれも、単位付きの数値を値に指定して幅や高さを指定します。

たとえば、幅を400px、高さを150pxに指定するときは、以下のようにCSSを記述します。 

width: 400px;
height: 150px;

この要素には、幅400px、高さ150pxの書式が指定されています。

ただし、widthやheightを指定しただけでは、要素のサイズを明確に確認できません。サイズを分かりやすく示すには、背景色（background）や枠線（border）の指定を行う必要があります。

widthやheightの値を%（パーセント）で指定することも可能です。この場合は、親要素のサイズを100%として幅や高さが決定されます。ただし、高さ（height）を%で指定するには、「親要素の高さ」が明確に指定されている必要があります。

ちなみに、幅（width）の初期値には100%が指定されているため、widthの指定を省略した場合は、「親要素と同じ幅」で要素が表示されます。高さ（height）の指定を省略した場合は、要素の内容に応じて自動的に高さが決定されます。

background

要素の背景を指定するときは、backgroundプロパティを使用します。この値に色を指定すると、要素の背景を指定した色で塗りつぶすことができます。たとえば、背景を「薄い赤色」で塗りつぶすときは、以下のようにCSSを記述します。

width: 400px;
height: 150px;
background: #ff9999;

この要素には、幅400px、高さ150px、背景色#ff9999の書式が指定されています。

なお、厳密には、背景色を指定するプロパティはbackground-colorであり、backgroundは「要素の背景」の書式を統合的に指定するプロパティとなります。、

border

要素の周囲に枠線を描画するときは、borderプロパティを使用し、その値に枠線の種類、太さ、色を半角スペースで区切って列記します。「枠線の種類」は以下に示したキーワードで指定します。

　　none 枠線なし（太さ0と同じ）
　　solid 実線
　　double 二重線
　　dashed 破線
　　dotted 点線
　　groove 立体的な枠線（枠線が凹型に見える）
　　ridge 立体的な枠線（枠線が凸型に見える）
　　inset 立体的な枠線（要素全体が凹型に見える）
　　outset 立体的な枠線（要素全体が凸型に見える

たとえば、「実線、4px、黒色」の枠線を描画するときは、以下のようにCSSを記述します。

width: 400px;
height: 150px;
background: #ff9999;
border: solid 4px #000000;

この要素には、幅400px、高さ150px、背景色#ff9999、「実線、4px、黒色」の枠線の書式が指定されています。

また、上下左右の枠線を個別に指定することも可能です。この場合は、以下のプロパティを使って枠線の書式を指定します。値の指定方法は、borderプロパティと同じです。

　border-top 上の枠線を指定
　border-right 右の枠線を指定
　border-bottom 下の枠線を指定
　border-left 左の枠線を指定

padding

枠線との間隔（内余白）を指定するときはpaddingプロパティを使用し、値に単位付きの数値を指定します。たとえば、枠線との間隔を10pxに指定するときは、以下のようにCSSを記述します。

width: 400px;
height: 150px;
background: #ff9999;
border: solid 4px #000000;
padding: 10px;

この要素には、幅400px、高さ150px、背景色#ff9999、「実線、4px、黒色」の枠線、内余白10pxの書式が指定されています。

なお、backgroundにより指定した背景色は、「枠線までの範囲」が塗りつぶしの対象となります。このため、枠線の描画がなくても、文字の周囲に余白を設けるためにpaddingプロパティを指定する場合があります。

width: 400px;
height: 150px;
border: solid 4px #000000;
padding: 10px;

この要素には、幅400px、高さ150px、背景色#ff9999、内余白10pxの書式が指定されています。

paddingプロパティに複数の値を半角スペースで区切って指定することも可能です。この場合は、値の数に応じて以下のように内余白が指定されます。

　値が1つ ・・・ 上下左右の内余白を指定
　値が2つ ・・・ 上下、左右の内余白を順番に指定
　値が3つ ・・・ 上、左右、下の内余白を順番に指定
　値が4つ ・・・ 上、右、下、左の内余白を順番に指定（時計回り）

そのほか、上下左右の内余白を個別に指定できるプロパティも用意されています。

　padding-top 上の内余白を指定
　padding-right 右の内余白を指定
　padding-bottom 下の内余白を指定
　padding-left 左の内余白を指定

 margin

上下左右にある要素との間隔（外余白）を指定するときは、marginプロパティを使用し、値に単位付きの数値を指定します。たとえば、上下左右にある要素との間隔を30pxに指定するときは、以下のようにCSSを記述します。

width: 400px;
height: 150px;
border: solid 4px #000000;
padding: 10px;
margin: 30px;

この要素には、幅400px、高さ150px、背景色#ff9999、内余白10px、外余白30pxの書式が指定されています。

ただし、上下の外余白は相殺されることに注意してください。たとえば、「上に配置されている要素」に50pxの外余白が指定されており、「自身の要素」に30pxの外余白を指定した場合、両者の間隔は50px＋30px＝80pxになるのではなく、間隔50pxになります。上下に外余白は、サイズが大きい方だけが採用されることに注意してください。

paddingプロパティの場合と同様に、複数の値を半角スペースで区切って指定することも可能です。この場合は、値の数に応じて以下のように外余白が指定されます。

　値が1つ ・・・ 上下左右の外余白を指定
　値が2つ ・・・ 上下、左右の外余白を順番に指定
　値が3つ ・・・ 上、左右、下の外余白を順番に指定
　値が4つ ・・・ 上、右、下、左の外余白を順番に指定（時計回り）

そのほか、上下左右の外余白を個別に指定できるプロパティも用意されています。

　margin-top 上の外余白を指定
　margin-right 右の外余白を指定
　margin-bottom 下の外余白を指定
　margin-left 左の外余白を指定

ボックスの書式指定

ボックス関連の書式を指定するときは、widthとheightで指定したサイズの外側に、内余白（padding）と枠線（border）が追加されることに注意しなければいけません。これを図で示すと、以下のようになります。

たとえば、幅（width）に400pxを指定し、10pxの内余白（padding）と4pxの枠線（border）を指定すると、実際の表示幅は428pxになります。つまり、幅400pxに「左右の内余白20px」（10px×2）と「左右の枠線8px」（4px×2）を追加したサイズが「見た目上のサイズ」になります。

枠線まで含めた範囲を幅400pxで表示したい場合は、「内余白」と「枠線の太さ」を差し引いた値をwidthに指定しなければいけません。先ほどの例の場合、widthに372pxを指定すると、372px＋（10px×2）+（4px×2）＝400pxとなり、幅全体を400pxで表示できるようになります。

初心者がミスを犯しやすいポイントなので、必ず覚えておくようにしてください。