CSSの実習(3) - 余白の指定。

余白の指定で出来る事。

CSSを用いる事で、適切に各要素に余白を与える事が出来ます。

そうする事で、見易いレイアウトを実現する事が可能になります。

• 詳しくは、余白関連の主なプロパティをご覧ください。

CSS での余白には二つの種類があります。

一口に余白と書いておりますが、CSS に於いては余白とされるものには二つの種類があります。

1. まず、要素には枠線(ボーダ)を与える事が出来ます(枠線については次回解説します)。
2. その枠線の内側(枠線が無い場合も幅零の枠線が引かれているものと考えます)の余白、すなわち内側の余白をパディングと呼びます。
3. 一方、枠線の外側に与える余白をマージンと呼びます。

このように、余白には

• 内側の余白(パディング)
• 外側の余白(マージン)

の二種があると言う事になります。

そして、この二つの余白について、

• パディングには、当該要素の背景が適用され(従って背景が透明でなければ透明にならない)、
• マージンは常に無色透明となる

と言う違いがあります。

つまり、枠線があろうとなかろうと、この二つの余白は全くの別物と言えるのです。

余白を取る場合には、この違いを考慮してどちらにするかを決める必要があります。

今回やりたい事。

余白について、以下のように考えます。

1. 先ず、ページ全体に余白を与えて読み易くします。
2. 続いて、見出しには上下に大きめの余白を与えます。
   • 但し、大見出しは一番上にあるので上には見出しを与えません。
3. 次に、段落やリストなどの本文ブロックにも上に余白を与えて区切りを明確にします。

   また、これらのブロックは段落などよりも左に余白を取って見出しとの区別を容易にします。

   尚、リストは通常の段落より更に左の余白を取って右に寄せます。

4. 更に本文とフッタを区切る横罫線も上に大きめの余白を与えて見易くします。

   尚、下のフッタには一行程度のクレジットしかないので、それほど大きく開ける必要は無いでしょう。

この考えに基づき、各要素への余白は以下のようにする事にしましょう。

ページ全体の余白

ページ全体にも、

• 上下に二文字、左右に一文字の余白

を与えます。

<h○>要素(見出し)

見出しについては、見易くするため

• <h1>要素(第一等級見出し)は下のみ一文字分
• <h2>要素(第二等級見出し)は上に三文字分、下に一文字分

の余白を与えます。

その他のブロックレヴェル要素

ブロックレヴェル要素とは、CSS 及び従来の HTML 4/XHTML 1 にある概念で、見出しや段落類などの纏まったテキスト類が集まったブロックを指します。

• HTML 5 ではブロックレヴェル要素の概念は廃止される事になっておりますが、CSS に於いては今後も厳然と存在し続けるであろう重要な概念です。

  詳しくはブロックレヴェル要素とインライン要素を御覧ください。

今回の場合、以下のものが対象となります。

<p>要素(段落)

• 上に一文字分の余白
• 左に二文字分の余白

<figure>要素(挿絵や図面などのブロック)

• 上に一文字分の余白
• 左に二文字分の余白

<ul>要素(順不同リスト)

• 上に一文字分の余白
• 左に四文字分の余白

• 通常の段落が左二文字分余白を取っているので、リストも同様に左の余白が必要です。また、リストは通常の段落より字下げされる事が多く、ここでは更に二文字分の左余白を加える事としました。

<hr>要素(段落間の区切り)

• 上に三文字分の余白
• 下に一文字分の余白

<address>要素(文書作成者への連絡情報)

• 上下左右とも余白は取らない

基本となる余白の設定

尚、特に指定の無い限り自動的に適用される基本となるスタイルとしては、

• 上下左右の余白は全て零とする

事とします。

ここでは、実習としてやりたい事を挙げておりますが、もし読者の方がここで挙げているスタイルではなく、別のスタイルにしてみたいと思うのであれば、それを実際にやってみるのが何よりの実習です。

是非挑戦してみてください。

実際のスタイル定義。

さて、これから実際に前回までのスタイル定義ファイル style.css にスタイルを追記していきましょう。

• 前回はフォントやテキスト関連の設定をしております。

* {
    background-color: transparent;
    color: #000;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    background-color: #fff;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    }

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    color: #000;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    background-color: #fff;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    color: #090;
    }

em {
    color: #f00;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

前回までのスタイル定義の場合

今回のスタイルを適用した場合

更に見栄えが変わりましたね。