この記事を読むのに必要な時間は約 3 分です。
トッド
どうすれば良いだろうか？
cssを使った四隅の角丸表示を行いときはborder-radiusを使います。
border-radiusの使い方はとても簡単です。上記の画像のようにスタイリングすることで適応されます。
全ての値が25pxなのは、分かり易さを強調したいが為であり、他の数値であっても問題ありません。
サンプルで入力されている数値は“/”で挟み、4つずつ分かれていますよね。これは左側が「水平方向」を表し、右側が「垂直方向」を表しています。
それぞれ4つずつ数値を割り当てることができます。これは「左上」「右上」「右下」「左下」というように“/”を介した左側と右側の数値にそれぞれ対応しています。
paddingとかmarginの数値を指定する時と同じ要領です。
border-radiusを指定した要素の四隅には円(楕円)が形成されていると考えると分かりやすいかもしれません。
画像を見てもらう方が分かりやすいかもしれませんが、サンプルの数値は全て25pxなので、四隅が均等に角丸が適応されています。一方で、水平方向と垂直方向の値を互いに、異なる数値を指定してあげると楕円形になることにより、少しばかり複雑な形状を表現することもできます。
実際にcssで記述すると以下のような使い方になります。↓
ココでは、borderクラスにborder-radiusを指定し、それをdiv要素に付与した例になります。
ココで紹介しているサンプルは直感的に理解ができるものだと思いますが、先ほども言いましたが複雑な形状を表現したい場合もあると思います。
そんな時は、Fancy Border Radius Generator というブラウザツールがあります。
こちらを使うとborder-radiusで表現する複雑な形状を常時リアルタイムで見比べながら作業ができるので使い勝手が良いです。
複雑な角丸の用途としては、基本的に要素は四角い形状で表示されますよね。その四角い要素ではなくて、遊びが欲しいレイアウトを考えたときにborder-radiusの数値を詳細に決め込んで表現する……好みの問題ですね。
以上、border-radiusについてでした。
