CSS3のborder-radiusで正円を作るときの数値指定とベンダープレフィックスについて

CSS3の中でも、border-radiusは特によく使うプロパティです。

このプロパティに関して、少し思うことがあったので軽くまとめておきます。

数値指定について

例えば、半径75ピクセルの円を作るとき

.example {
	width: 150px;
	height: 150px;
	border-radius: 75px; 
}

としている例をよく見かけるですが、こういう時って

.example {
	width: 150px;
	height: 150px;
	border-radius: 50%; 
}

としたほうが効率よくないですか？確かドットインストールのCSS3入門でやっていたと思うんですが･･･。

ありましたね。

border-radiusはCSS3でもかなり使うプロパティである分、こうやって指定しておくと後々メンテナンスとかやりやすいと思います。

CSS3の実装時に気になるベンダープレフィックスですが、正直自分はborder-radiusに関してはつけなくてもいいような気がします。

というのも、きちんと現行ブラウザでは表示がされるからです。

「いやいや、古いブラウザのことも考えないとダメだよ！」と思う方もいらっしゃるかもしれませんが、個人的には古いブラウザの対応はあまり考えたくないというか･･･まぁめんどくさいです（笑）

ですから、自分はborder-radiusにベンダープレフィックスはつけていません。

今回の記事の主題とは逸れますが、CSS3の実装時に気になるのがブラウザの対応状況です。

確認方法はいろいろあるかと思いますが、今回記事を書くにあたって色々調べていると便利なサイトを見つけましたので、最後にリンクを貼っておきます。

CSS3プロパティとブラウザの対応状況が一覧で確認できるページです。

少し古いのですが、軽く見る程度なら十分使えると思います。

また、最新情報はこの書籍から確認できるそうです。参考までに。

[amazonjs asin=”4839946965” locale=”JP” title=”CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)”]