HOMEUP

CSSと画像で角丸四角形を作成

GoogleやYahooで「角丸四角形」のキーワードで検索してこのサイトを見にきてくれる人が多いみたいなので恥ずかしながら私がよくやる方法を書きます。昔はテーブルでやっていたのですが最近はCSSと画像でやっています。他にJavaScriptのライブラリを使うとかサーバーサイドで画像を作成するとかの方法もあるのですが画像さえ用意すれば使用できるので使う角丸の数が少ない時には楽です。

まあ自分のサイトならIEを無視して-moz-border-roundとか使ってもいいのですが…(あかんよ^^;)

画像を用意する

角丸左上
images/kadomaruTL.png
左上の画像 		角丸右上
images/kadomaruTR.png
右上の画像
角丸左下
images/kadomaruBL.png
左下の画像 		角丸右下
images/kadomaruBR.png
右下の画像

GIMPとかで適当に円を描いて左の用に分割します。ちょっと色が薄かった。この例では#eeeeee;の色で30x30の円を描いて4分割しています。


CSS

次に以下のようなCSSを用意します。

.kadomaru1 {
background-image: url(images/kadomaruTL.png);
background-repeat: no-repeat;
background-position: 0 0;
background-color: #eeeeee;
}
.kadomaru2 {
background-image: url(images/kadomaruTR.png);
background-repeat: no-repeat;
background-position: 100% 0;
}
.kadomaru3 {
background-image: url(images/kadomaruBL.png);
background-repeat: no-repeat;
background-position: 0 100%;
}
.kadomaru4 {
background-image: url(images/kadomaruBR.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}

使い方

使い方は簡単、恐怖のdiv入れ子!

<div class="kadomaru1">
<div class="kadomaru2">
<div class="kadomaru3">
<div class="kadomaru4">
ここに角丸で囲みたいものを入れる
</div>
</div>
</div>
</div>
こんな感じです。
<div>の入れ子が見苦しい^^;

角丸を使いまくるんならphpとかで画像作った方がいいかもしれません。(処理が重いかな？)

面白そうなんで今度作ってみます。 メモメモφ-_-


HOMEUP