2014年7月17日木曜日

【HTML & CSS】 border-radiusプロパティで角を丸くする

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

まずはボックスの角を丸くする方法です。
今までは画像を使って角丸を実現してきましたが、CSS3からはスタイルシートを使って簡単に角丸を実現できるようになりました。

時間が無かったり、めんどくさかったりで、ただ罫線で囲んだだけの味気ないボックスを
ほんの少し角を丸くするだけで、すこしはマシなデザインになるかも?です。

ボックスの4隅の角を丸くする

まずは、ボックスの4隅の角をまとめて丸くする方法です。
border-radius: 20px;


4隅の角をそれぞれ指定するには、border-radius: 左上 右上 右下 左下; と指定します。
border-radius: 20px 30px 40px 50ox;


4隅の角の指定を100%にすると、円も表現できます。



他にも指定方法は色々あります。
複雑な事はしないので、基本的な設定方法だけまとめてみました。


border-radiusの各ブラウザ対応状況


border-radiusプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
border-radiusのサポート状況からベンダープレフィックスは必要なさそうです。
IEIE9よりサポート
ChromeChrome5.0よりサポート
FirefoxFirefox4.0よりサポート
SafariSafari5.0よりサポート
iOsiOS4.0よりサポート
AndroidAndroid2.2よりサポート


border-radiusの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、border-radiusの設定が簡単に作成・確認できます。

0 件のコメント: