jmblog.jp » 角丸

角丸にチャレンジ – JavaScript番外編

Yoshihide — Mon, 21 Aug 2006 13:15:13 +0000

Amazon から「インスタントストア」というサービスがはじまりました。Amazon のアソシエイトIDがあれば、独自のオンラインストアを簡単に作成できてしまうという代物です。

で、本題は「インスタントストア」ではなくここで使われている角丸です。HTMLコードを見るとあの Nifty Corners ではありませんか！これは実績十分ですねー。

というわけで、私のインスタントストアです。（いや、これが本題ではなく。）

» jmblog.jp おすすめの9冊

角丸にチャレンジ – JavaScript編

Yoshihide — Fri, 18 Aug 2006 16:52:27 +0000

今回は、画像を使わずに JavaScript だけで角丸を実現させる方法を紹介します。

角丸を表示するための JavaScript ライブラリは数多く存在します。その中からいくつかピックアップしてみました。

» Nifty Corners Cube

有名な Nifty Corners の最新バージョンです。恐らく、これが角丸用ライブラリの元祖じゃないでしょうか。初めて見たときは、「こんなことが画像なしでできてしまうのかー！」とびっくりしました。まだご存じない方も、サンプルを見ればきっと驚くはず。使い方もすごくシンプルです。どういう仕組みになっているかは、最初のバージョンのページに詳しく解説があります。

» curvyCorners

アンチエイリアスが売りのライブラリ。背景に画像があってもきれいに見えます。（デモ）

» Mochikit

Ajax なエフェクトや UI を実現させるための JavaScript ライブラリとして有名な Mochikit ですが、角丸にも対応しています。実装方法もかなり洗練されている感じ。JavaScript に通じた人ならこれが一番使いやすいかもしれないですね。（デモ）

» Rico

Mochikit と同様、こちらも有名な JavaScript ライブラリです。角丸のみ使う場合は、Encytemedia: Rico rounded corners without all of Rico で公開されているスクリプトを使うとよいでしょう。

» Spiffy Corners

こちらは JavaScript のライブラリではなく、角丸のジェネレーターです。クラス名、背景色、前景色を指定すれば、CSS と HTML を生成してくれます。（やってることは他とほぼ同じ。）JavaScript が苦手な人はこれが一番お手軽かも。

まだまだたくさんありますので、気になる方は、
del.icio.us/tag/rounded+corners+javascript あたりで探してみてはいかがでしょうか？

角丸にチャレンジ – 透過PNG画像＋CSS編

Yoshihide — Mon, 14 Aug 2006 16:05:24 +0000

前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。（なお、透過PNG画像は IE6以下では未対応です。）

この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます（サンプル）。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。

.dialog .header{
background:transparent url(rc_r1_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .header .c{
background:transparent url(rc_r1_c2.gif) no-repeat right 0px;
margin-right:-13px;
}
.dialog .body{
background:transparent url(rc_r2_c1.gif) repeat-y 0px 0px;
margin-right:13px;
}
.dialog .body .c{
background:transparent url(rc_r2_c2.gif) repeat-y right 0px;
margin-right:-13px;
}
.dialog .footer{
background:transparent url(rc_r3_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .footer .c{
background:transparent url(rc_r3_c2.gif) no-repeat right 0px;
margin-right:-13px;
}

これで、透過PNG画像でも角丸ができました。（サンプル）