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

スタイルシートだけだと、どうしてもカクカクした感じのデザインになってしまいます。 そこで、画像を使ってもうちょっとオシャレにしてみましょう。
初回は角を折ったメモ帳風にしてみます。

テクニック使用前

テクニック失敗

テクニック使用後

やり方

まず角になる画像を用意します。 （分かりやすいように大きくしてあります。）
大事なのは、背景を透過させないこと。透過させてしまうと失敗します。

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

<div class="sample">
<p class="sample">
画像とテクニックを使えばこんなこともできます。
</p>
</div>

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

div.sample{
    width:200px;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
}
p.sample{
    background:url(../img/kado.gif) no-repeat right bottom;
    margin:0em;
    padding:1em;
    position:relative;
    top:2px;
    left:2px;
}

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

全てのポイントはp.sampleにあります。
まず、背景画像を右下に一回だけ表示させます。

つづいてmargin:0em;でDIVまでの余白を無くし、文字を読みやすくさせるためpadding:1em;を追加します。 ここまでやったのが、上のテクニック失敗例です。

最後にポジション関連を使って位置の微調整をします。サンプルの2pxというのはDIVに指定したborderの幅と同じです。 p自体には背景色を指定していないので、枠線が透けて見えますが、背景があるところだけは枠線が隠されてしまい、完成図のように見えます。 これが今回のからくりです。

---

使いこなすための＋α

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

<div class="sample">
<p class="dan-1">
段落をたくさん入れる場合はちょっとややこしいかも。
</p>
<p class="dan-2">
一番下の段落になるところにだけ背景画像を指定します。
</p>
</div>

div.sample{
    width:200px;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
}
p.dan-1{
    margin:0em;
    padding:1em;
    padding-bottom:0em;
}
p.dan-2{
    margin:0em;
    padding:1em;
    background:url(../img/kado.gif) no-repeat right bottom;
    position:relative;
    top:2px;
    left:2px;
}

角にする画像と、ボーダーの色がときどき合わないことがあります。 なるべくWEBセーフカラーを使うようにするといいでしょう。

---