制作者の活動(PR)。

サイト表紙
しらぎくのウェブサイト作成入門
CSSの小技集
ブロックの枠線より下にブロックの内容の一部を配置する方法

ブロックの枠線より下にブロックの内容の一部を配置する方法。

平成18年 6月23日公開

CSSの小技として、同じブロックレヴェル要素の中にある一部要素を、その要素の下枠線より下に配置する方法をご紹介します。

要素には、CSSのborderプロパティなどを用いる事で枠線を引く事が出来ます。

この要素の内容の一部を、下枠線の下に表示させたいとします。

分かり易く言えば、要素の一部を、当該ブロック要素の次のブロックレヴェル要素であるかのように配置したいとします。

このような事をCSSで行うくらいなら、外に出したい要素を別のブロックレヴェル要素としてマークアップすれば良いのですが、構造上の理由からマークアップ上は同じブロックに入れたいと考える事もあるかも知れません。

例えば、表題を<h1>要素で見出しにする際に、サブタイトルを添えたいと思う場合があります。

この場合、サブタイトルを別の<h1>要素でマークアップするのが一番簡単でしょう(この場合、サブタイトルには"subTitile"と言うクラス名でも与えておく)。

すなわち、以下のようにマークアップする事になるでしょう。
- 二つに分けるマークアップ例を読み飛ばす
```
<h1>タイトル</h1>
<h1 class="subTitle">サブタイトル</h1>
```
- 二つに分けるマークアップ例はここまで
- 尚、サブタイトルについては、見出しの等級を下げるべきと言う考えもありますが、文書内の構造からは同一階層と考えたため、同じ<h1>要素でマークアップしております。
このマークアップでも良いのですが、表題とサブタイトルが一つの見出しと考えるべきだと思うなら、それを一纏めに<h1>要素とする事も出来ます。

その場合は、サブタイトル部分に<small>要素か物理要素が好ましく無いと思うなら<span>要素などに"subTitle"と言うクラス名を与えておけば良いでしょう。

すなわち、以下のようなマークアップも考えられるでしょう。
- 一纏めにするマークアップ例を読み飛ばす
```
<h1>
    タイトル
    <small class="subTitle">サブタイトル</small>
    </h1>
```
- 一纏めにするマークアップ例はここまで

そのような場合には、CSSで目的を果たすという選択肢もあります。

その方法を考えて見ましょう。

一番簡単な方法はポジショニング？
- ポジショニングの問題点
もう一つの方法 - 枠線を引き直す
- 枠線を引き直す方法の問題点

一番簡単な方法はポジショニング？

▲記事先頭
△前項目
▽次項目

一番簡単と思われる方法は、ポジショニングを利用する方法かも知れません。

例えば、上記の例を考えて見ましょう。

この場合、外側の<h1>要素に対してpositionプロパティを与える事で、実現させる事が可能です。

ポジショニングのCSS記述例を読み飛ばす

h1 {
    font-size: 200%;
    line-height: 1em;
    color: #090;
    padding: 6px;
    margin: 0 0 1em;
    border: #fd0 2px solid;
    position: relative;
    top: 0;
    left: 0;
    }

h1 .subTitle {
    font-size: 50%;
    line-height: 1.5em;
    display: block;
    background: #fff;
    margin: 1em 0 0;
    padding: 2px 6px;
    position: absolute;
    top: 2em;
    left: 0;
    }

ポジショニングのCSS記述例はここまで

このスタイル定義の原理は、以下の二つです。

要素の枠線は、下位要素でpositionプロパティにabsolute値を与えられた要素を無視して引かれる

単純にdisplayプロパティにblock値を与えてブロックレヴェルボックス化しただけでは、この要素を含んで枠線が描かれます。

positionプロパティにabsolute値を与える事で、初めてこの要素の存在を無視した枠線が実現します。

positionプロパティにabsolute値を与える要素を配置する適切な位置を決めるために、元の要素のpositionプロパティにrelative値を与える

positionプロパティにabsolute値を与える場合、ポジショニングの基準となる点は、上位要素でpositionプロパティにstatic値以外の値が与えられたものが無い限り、スクリーン基準となります。

ここでは、subTitleクラス名を与えられた<h1>要素の下位要素(HTMLでは<small>要素)は、<h1>要素の一文字分下に配置されるようにしております。

<h1>要素のfont-sizeプロパティ値が200％＝デフォルトの二文字分に対して、下位要素のfont-sizeプロパティ値は50％ = 親要素の半分 = デフォルトの二文字分の半分 = デフォルト一文字分となります。

依って、下位要素のtopプロパティ値は 2em = 二文字分 = デフォルト一文字分の二文字分 = 親要素一文字分となります。

すなわち、<h1>要素の一行下に配置されるようにしております。

ポジショニングの問題点。

▲記事先頭
△前項目
▽次項目

ポジショニングは最も簡単で確実な方法です。

恐らく、巧く行かないのはネットスケープ 4.xとインターネットエクスプローラ 4.xくらいでしょう。

しかしながら、下位要素の配置条件が固定されてしまいます。

ポジショニングの記述例では、親要素となる<h1>要素の一行下に配置されますが、<h1>要素が二行以上に跨った場合には、確実に<h1>要素の二行目に重なってしまいます。

もう一つの方法 - 枠線を引き直す。

▲記事先頭
△前項目
▽次項目

そこで、もう一つの方法として、親要素の外に配置したい下位要素で枠線を引き直すと言う方法があります。

具体的には以下のようになります。

枠線を引き直すCSS記述例を読み飛ばす

h1 {
    font-size: 200%;
    line-height: 1em;
    color: #090;
    padding: 6px;
    margin: 0 0 1em;
    border: #fd0 2px solid;
    }

h1 .subTitle {
    font-size: 50%;
    line-height: 1.5em;
    display: block;
    background: #fff;
    margin: 6px -8px -8px;
    padding: 2px 6px;
    border-top: #fd0 2px solid;
    z-index: 1;
    }