角丸にチャレンジ – 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 あたりで探してみてはいかがでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>