スタッフブログ
satoです。
(CSSの)borderを角丸にしたい、というのはデザインでよくある要望の1つだと思います。
以前はNifty Corners Cubeを使用していたのですが、条件によって一部ブラウザで表示がおかしくなることがあり、代替ライブラリを探していました。
いくつか調べたところ、DD_roundiesというライブラリを見つけました。
使い方は簡単で、このファイルを読み込んだ後に、
というのを書いていくだけです。
最後のtrueをfalseにしたり、省略したりするとIE専用になるようです。どういう違いがあるのかわかりませんが、一部の紹介記事では省略された状態になっているので、必ずtrueを付けるようにしてください。
セレクタは、普通のスタイルシートの指定と同様の感じで書けます。
角丸量は、
となっております。
2〜3指定がわかりづらいので、全部同じか全部個別指定がいいと思います。
例えば、この記事限定でこのファイルを読み込むようにしてありますので、アドレスバーに、
と入力すると、この記事の上部の「スタッフブログ - DD_roundiesで角丸表現」という箇所の角が丸くなっているのがわかると思います。
MITライセンスを採用しているため、再配布も容易です。テーマやモジュール制作を行っている方も使用してみてはいかがでしょうか。
jQueryを使っている場合であれば、jQueryを使用した角丸ライブラリがいくつかあるようなので、そちらを使ってみるといいかもしれません。いろいろ試してみてください。
(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);
MITライセンスを採用しているため、再配布も容易です。テーマやモジュール制作を行っている方も使用してみてはいかがでしょうか。
jQueryを使っている場合であれば、jQueryを使用した角丸ライブラリがいくつかあるようなので、そちらを使ってみるといいかもしれません。いろいろ試してみてください。