CSSテクニック

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

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

テクニック使用前

borderを指定するだけだとこんな感じ。

テクニック失敗

背景画像を指定するだけじゃダメなんです。

テクニック使用後

画像とテクニックを使えばこんなこともできます。


やり方

1:画像を用意する

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

2:HTMLを書く

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

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

3:スタイルシートを書く

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

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セーフカラーを使うようにするといいでしょう。


一覧へ戻る


Last Modified 2005-01-10 © きくちゃん 2004 - All Rights Reserved