div要素を増やさずに「角丸」を表現する

2007.03.31 00:25

Web2.0的なデザインでよく使われるボックス四隅の角丸ですが、うちのサイトのような可変幅で表現しようとすると、無駄にdiv（もしくはspan）要素を増やさなければならなかったりします。

Javascriptで見せる方法もあるから、それを使えばソースに無駄はなくなるけど、個人的にはそれだけのためにJavascriptを使うのはどうも...てな感じだ。

ということで、今回はCSSだけで角丸をつくる方法を紹介。
（あ、四隅の画像はいりますよ。）

で、最初にことわっておくと、IEには対応してません。（7も）
「えーっ!?」と言われそうですが、Firefoxにはもちろん、IE以外のCSS2をサポートしたブラウザには対応してます。
なのでこの方法、「角丸でもよいが、まぁそうでなくてもよい」程度に思ってもらえればよいかと。

ではやり方です。

まず四隅の画像を用意
角丸にしたいdiv要素を用意（幅は50%の可変幅に設定）
これを角丸にしたいっ

CSSを以下のように設定

div#kadomaru {
   width: 50%;
   background-color: #572c00;
}

div#kadomaru:before {
   display: block;
   line-height: 0;
   content: url(top-left.gif);
   background: url(top-right.gif) no-repeat top right;
}

div#kadomaru:after {
   display: block;
   line-height: 0;
   content: url(bottom-left.gif);
   background: url(bottom-right.gif) no-repeat bottom right;
}

これだけで
Firefoxでは角丸に！

これはCSSの「:before」「:after」疑似要素、「content」プロパティを使用して表現してます。

IE7さえ対応してくれれば、もっと積極的に使っていけるんだけど。
ブラウザのシェアを考えると、仕事では使えないですね...。

個人サイトではオススメ。うちもどこかに入れようと検討中です。

Tag

Message

Trackbacks (0)

TrackBack URL