ボックスデコレーション２

画像を使わなくても工夫次第で様々な装飾ができるのがCSSのいいところ。
今回はボーダーで一工夫です。

やり方

HTMLはこんな感じになります。

<div class="sample">
<p class="sample">
ちょっと工夫すれば、こんなことができます。
</p>
</div>

スタイルシートはこんな感じになります。

div.sample{
    width:200px;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
}
p.sample{
    position:relative;
    width:180px;
    margin:-3px auto;
    padding:1em 0em;
    background-color:#FFFFFF;
}

div.sampleはborderを指定しているだけなので、特に難しいところはありません。

p.sampleのmargin:-3px auto;が今回のポイントです。
marginに−の値を指定すると、要素を重ねることができます。
今回はこれを利用してDIVの上下のボーダーの一部を隠してしまいました。
background-color:#FFFFFF;を忘れるとボーダーが見えてしまうのでご注意を。

position:relative;とwidth:180px;はIEのために書いています。 これを忘れるとIEで上手く表示されないことがあります。

---

使いこなすための＋α

段落をいくつか入れる場合は次のようなソースになります。

<div class="sample">
<p class="dan-1">
段落をたくさん入れる場合はちょっとややこしいかも。
</p>
<p class="dan-2">
真ん中の段落
</p>
<p class="dan-3">
一番上と下の段落になるところにだけ−マージンを指定します。
</p>
</div>

div.sample{
    width:200px;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
}
p.dan-1{
    position:relative;
    width:180px;
    margin:-3px auto 0em auto;
    padding:1em 0em;
    background-color:#FFFFFF;
}
p.dan-2{
    position:relative;
    width:180px;
    margin:0em auto;
    padding:0em;
}
p.dan-3{
    position:relative;
    width:180px;
    margin:0em auto -3px auto;
    padding:1em 0em;
    background-color:#FFFFFF;
}

一番上の段落には上に−マージン、 一番下の段落には下に−マージンをとります。

ちょっと工夫すると、横のボーダーを消すこともできます。チャレンジしてみてください。

---