CSSの実習(4) - 枠線の指定。

枠線の指定で出来る事。

CSS を用いる事で、各要素の上下左右に個別に

• 枠線の色
• 枠線の形(実線か鎖線か点線か等)
• 枠線の幅(太さ)

を指定する事が出来ます。

枠線を引く事で、更に要素が見やすくなったり目立たせたりする事も可能になります。

また、枠線の概念から外れると思われるかも知れませんが、以下のような使い方も可能です。

• 見出しの場合、左だけに太い枠線を引く事で、見出しの左に長方形のマーカの代わりにする事も出来ます。
• テキストに対して、下の枠線を下線代わりにする事も出来ます。

  しかも、下枠線を用いる方法なら、text-decorationプロパティで引く下線と違い、色や形もより多彩に定める事が出来ます。

  • 但し、携帯電話のモバイルブラウザや少し前のブラウザなどでは、テキスト等のインライン要素に枠線が引かれない場合もあります。

また、<hr>要素(段落間の区切り)も枠線を用いて実現されるものです。

• HTML 4/XHTML 1 まででは、<hr>要素は横罫線と定義されておりましたが、HTML 5 では段落間の区切りと再定義されました。
• 正確には<hr>要素を表現する横罫線は枠線とは言えないのですが、現在のところ横罫線に相当するCSSのプロパティが正式に定義されていないため、現状では枠線で実現すると言う実装になっております。

• 枠線に関するプロパティについての詳細は、枠線関連の主なプロパティをご覧ください。

今回やりたい事。

今回は、以下の事をしてみましょう。

1. <h2>要素(第二等級見出し)について、黄土色の枠線を引きます。
2. <dfn>要素(定義語)について、下に黄土色の枠線を引く事で、下線代わりにします。
3. その他の要素には枠線は付けません。

但し、<hr>要素(段落間の区切り)は、通常枠線を用いて実現しております。

• 現時点では<hr>要素を表現している横罫線に相当するプロパティが存在しないためです。

このため、<hr>要素についても、ねずみ色の枠線で実現する事とします。

以上を纏めると、以下のようになります。

基本となる余白の設定

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

• 枠線は一切引かない

事とします。

<h2>要素(第二等級見出し)

以下の太さの黄土色の実線を枠線として引きます。

• 上が 1ピクセル
• 下が 4ピクセルズ
• 左右が 2ピクセルズ

<dfn>要素(定義語)

下に 2ピクセルズの黄土色の実線を下線代わりに引きます。

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

上下左右に 1ピクセルずつのねずみ色の実線を引く事で横罫線を実現します。

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

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

実際のスタイル定義。

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

• 前回は余白(マージン及びパディング)の指定をしております。

* {
    background-color: transparent;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 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;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

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

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

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 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;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    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;
    border: 1px solid #888;
    }

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

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

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    color: #f00;
    }

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

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

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

スタイルの修正 - 枠線とテキストの間隔を調整する。

さて、今回枠線を引いてみたのですが、一つだけ気になる事がありました。

それは、<h2>要素の左の枠線とテキストがちょっとくっ付き過ぎている事です。

この場合、枠線の内側の余白、すなわちパディングを指定する事で適切に引き離す事が出来ます。

そこで、スタイル定義ファイル style.css 内の<h2>要素の要素セレクタに対するプロパティ定義に、以下のように paddingプロパティを追記しましょう。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 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;
    padding: 0 6px;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    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;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    }

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

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

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    color: #f00;
    }

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

修正前のスタイル定義の場合

修正後のスタイルを適用した場合

これで、問題点が解決されました。