今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」

このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。

指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。

導入の仕方

導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。

イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。

また、指定する要素には CSS セレクタのように指定します。（ただし、+ や ~ などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。

複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）

この記事のカテゴリー一覧を見る⇒Javascript関連

• パーマリンク
• コメント(0)
• トラックバック(0)

• <<各ブラウザで先行実装しているCSS3プロパティまとめ
• |
• Safariに搭載されているwebインスペクタで新規スタイルを適用する方法>>