角丸にチャレンジ – JavaScript編

今回は、画像を使わずに 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 あたりで探してみてはいかがでしょうか？