このページは、CSS で要素の余白と境界線を指定する書き方を説明したものです。「テキスト編」で作成した HTML 文書に、このページで解説した CSS を設定したサンプルを用意したので参考にして下さい。
「要素とボックス」で説明した通り、全ての要素には境界線の外側に余白があります。CSS では、この余白を上下左右別に設定することができます。次の例は、CSS を使って上下左右すべての余白を広く指定する場合です。
body { margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em; }
まず、セレクタで body 要素を選びます。プロパティに設定した margin-top、margin-right、margin-bottom、margin-left は、それぞれ、上側の余白、右側の余白、下側の余白、左側の余白のことです。そして値に 2em、つまり、 文字2つ分のサイズを表すことになります。
上下左右の余白をまとめて設定する方法もあります。次の例を見てください。
body { margin: 2em 2em 2em 2em; }
この例は、先にあげた例と同じ設定をしています。プロパティの margin では、上側の余白、右側の余白、下側の余白、左側の余白の順で値を指定します。ここでは body 要素に対して余白を設定しましたが、もちろん他の要素にも余白を設定することが出来ます。
サンプルでは、body 要素の左右の余白を 40px に指定しています。
全ての要素には境界線があります。CSS では、色、幅、スタイルを組み合わせて設定することができます。border-color、border-width、border-style の3つのプロパティを使います。
blockquote { border-color: #000000; border-width: 2em; border-style: solid; }
この場合は、引用部分(blockquote)を 黒の 2em の幅の境界線で囲むようになります。border-color と border-width プロパティは、すぐに分かると思います。
border-style には、none、dotted、dashed、solid、double、groove、ridge、inset、outset というスタイルを指定できます。それぞれのスタイルの表示は次のようになります。
div {
border-style: none;
}
div {
border-style: dotted;
}
div {
border-style: dashed;
}
div {
border-style: solid;
}
div {
border-style: double;
}
div {
border-style: ridge;
}
div {
border-style: groove;
}
div {
border-style: outset;
}
div {
border-style: inset;
}
上下左右で違う値を設定することもできます。次の例では、リンク(a)の文字列に 2em の幅の点線の下線がつきます。
a { border-bottom-width: 2em; border-bottom-style: dashed; }
また、border-color、border-width、border-styleの3つのプロパティをまとめて設定するプロパティもあります。
blockquote { border: #000000 2em solid; } a { border-bottom: 2em dashed; }
サンプルでは、表(teble、tr、td、th)、引用部分(blockquote)、見出し(h2、h3)に境界線を引いています。
CSS では、境界線の内側の余白を上下左右別に設定することができます。次の例は、引用部分に対して、上下左右すべての内側の余白を広く指定する場合です。
blockquote { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
まず、セレクタで引用部分(blockquote) を選びます。プロパティに設定した padding-top、padding-right、padding-bottom、padding-left は、それぞれ、上側の余白、右側の余白、下側の余白、左側の余白のことです。そして値に 2em、つまり、 文字2つ分のサイズを表すことになります。
marginと同じように、上下左右の余白をまとめて設定する方法もあります。次の例を見てください。
body { padding: 2em 2em 2em 2em; }
この例は、先にあげた例と同じ設定をしています。プロパティの padding では、上側の余白、右側の余白、下側の余白、左側の余白の順で値を指定します。
サンプルでは、表(tr、td、th)、引用部分(blockquote)に境界線の内側の余白を設定しています。
