間隔と枠線を指定する

borderを理解する

要素と要素の間隔を調整してサイトのバランスを整えるタグに、margin（マージン）とpadding（パディング）、文字の下にラインを引いたり、文字を四角で囲んだりするタグに、border（ボーダー）があります。

この3つはまとめて覚えるとわかりやすいと思いますが、理解力のない人（管理人がそうでしたが・・・）には、いまいちわかるまでに時間がかかるかも知れません。

まずは図で概要をつかみましょう。

margin,padding,border

まず最初にborderを覚えるとよいかもしれません。borderは指定したタグの周りに線を引くことができます。

1h1 {
2    border:solid 1px #000; <span>*/ h1タグの周りに、1pxの黒色の実線 */</span>
3    border:dotted 1px #000; <span>*/ h1タグの周りに、1pxの黒色の点線 */</span>
4    border:double 3px #000; <span>*/ h1タグの周りに、3pxの黒色の二重線 */</span>
5    }

また、枠線だけでなく、下線だけ、上線だけを引くことも可能です。その場合は、「border-○○○」というように、○○○にtop,right,left,bottomを入れて指定します。

1h1 {
2    border-top:solid 1px #000; <span>*/ h1タグの上に、1pxの黒色の実線 */</span>
3    border-bottom:solid 1px #000; <span>*/ h1タグの下に、1pxの黒色の実線 */</span>
4    border-right:solid 1px #000; <span>*/ h1タグの右に、1pxの黒色の実線 */</span>
5    border-left:solid 1px #000; <span>*/ h1タグの左に、1pxの黒色の実線 */</span>
6    }

もちろん、4行全て記述すれば枠線を描くことになります。

margin,paddingを理解する

marginとpaddingは、このborder線を基準に、文字とborderの間の余白をpadding、borderより外の余白をmarginとしています。

この二つの余白の違いが明確にわかるのが、背景色を指定する場合です。

背景色はborderよりも内側領域に指定されますので、paddingで余白を拡大すれば背景色も広がります。marginで余白を拡大すると文字や画像の間隔が広がります。

1p {
2    padding:20px; <span>*/ borderの内側上下左右に20pxの余白 */</span>
3    }

1p {
2    margin:20px; <span>*/ borderの外側上下左右に20pxの余白 */</span>
3    }

marginとpadding

また、marginとpaddingは上下左右を一度に指定することが可能です。

1p {
2    margin:1px 2px; <span>*/ 上下に1px、左右に2pxの余白 */</span>
3    margin:1px 2px 3px 4px; <span>*/ 上に1px、右に2px、下に3px、左に4pxの余白 */</span>
4    }

4方向全て指定するパターンは、上、右、下、左という風に時計回りに記述します。慣れるまではとっつきづらいとおもいますが、なれると便利です。

サンプルにmargin,padding,borderを指定する

"* {"はユニバーサルセレクタと呼ばれ、全ての要素に対してスタイルが反映されます。

最初にこのユニバーサルセレクタを使ってmargin、border、paddingを指定するのは、h1やpなどの要素はデフォルトで規定の余白があるため、それらを全てなくすためです。

実際これは管理人が全ての余白がゼロの状態から始めたいという個人的な都合によるもので、別に無理に全ての余白を0にしなくてもよいです。

01@charset "shift_jis";
02<span>* {
03    margin:0;
04    border:0;
05    padding:0;
06    }</span>
07body {
08    background-color:#efe;
09    }
10h1,h2,h3,p,ul,address,hr,dl {
11    <span>margin:10px 0 0 10px;</span>
12    width:610px;
13    }
14h2 {
15    font-size:16px;
16    width:400px;
17    color:#494;
18    <span>border-left:solid 10px #494;
19    border-bottom:dotted 1px #494;
20    padding-left:5px;</span>
21    }
22h3 {
23    font-size:14px;
24    color:#f44;
25    }
26dl {
27    background-color:#fff;
28    <span>margin-left:30px;</span>
29    width:400px;
30    }
31dt,dd {
32    font-size:13px;
33    <span>line-height:20px;</span>
34    }
35dt {
36    width:80px;
37    }
38<span>dd {
39    margin-left:80px;
40    margin-top:-20px;
41    }</span>
42ul {
43    <span>margin-left:30px;</span>
44    font-size:14px;
45    line-height:20px;
46    color:#555;
47    }
48a {
49    padding:0 10px;
50    }
51address {
52    font-style:normal;
53    <span>padding:2px 0 5px 5px;
54    border-top:double 3px #494;</span>
55    }

もうひとつ解説が必要になると思われる部分は、"dd"に指定しているマイナスマージン（ネガティブマージン）と"dt,dd"に新たに指定したline-heightでしょうか。

これは、dtとddが縦に並んでいるのを、横に並べるテクニックです。

dtの幅の分だけddの左ネガティブマージンを取り、dtの文字の高さ分だけddの上ネガティブマージンを取ることで、dtとddを横並びにします。

01dt,dd {
02    font-size:13px;
03    <span>line-height:20px;</span>
04    }
05dt {
06    width:80px;
07    }
08<span>dd {
09    margin-left:80px;
10    margin-top:-20px;
11    }</span>

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson3～CSSを使った装飾～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>