スタッフブログ

  • 最新配信
  • RSS

DD_roundiesで角丸表現

 : 技術全般 2009/5/1 9:08

Blogger's Avatar

satoです。


(CSSの)borderを角丸にしたい、というのはデザインでよくある要望の1つだと思います。
以前はNifty Corners Cubeを使用していたのですが、条件によって一部ブラウザで表示がおかしくなることがあり、代替ライブラリを探していました。

いくつか調べたところ、DD_roundiesというライブラリを見つけました。

使い方は簡単で、このファイルを読み込んだ後に、
DD_roundies.addRule([セレクタ], [角丸量], true);
というのを書いていくだけです。
最後のtrueをfalseにしたり、省略したりするとIE専用になるようです。どういう違いがあるのかわかりませんが、一部の紹介記事では省略された状態になっているので、必ずtrueを付けるようにしてください。
セレクタは、普通のスタイルシートの指定と同様の感じで書けます。
.class
div.class
div#id a
角丸量は、




指定数順序例の解説
1全部10px全ての角を10px丸める
2(左上 右下)、(右上 左下)10px 5px左上と右下を10px、右上と左下を5px丸める
3(左上)、(右上 左下)、(右下)10px 5px 3px左上を10px、右上と左下を5px、右下を3px丸める
4左上、右上、右下、左下10px 5px 3px 1px左上を10px、右上を5px、右下を3px、左下を1px丸める

となっております。
2〜3指定がわかりづらいので、全部同じか全部個別指定がいいと思います。

例えば、この記事限定でこのファイルを読み込むようにしてありますので、アドレスバーに、
javascript:DD_roundies.addRule('#rd3blogHeader', '20px', true);
と入力すると、この記事の上部の「スタッフブログ - DD_roundiesで角丸表現」という箇所の角が丸くなっているのがわかると思います。

MITライセンスを採用しているため、再配布も容易です。テーマやモジュール制作を行っている方も使用してみてはいかがでしょうか。

jQueryを使っている場合であれば、jQueryを使用した角丸ライブラリがいくつかあるようなので、そちらを使ってみるといいかもしれません。いろいろ試してみてください。

トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.