こんにちは、５歳の息子と二人暮らし、アラフォーシンママの ’あき’ です！
WEBのことやプログラミングのことなど、お役立ち情報いろいろ解説していきますので、どうぞよろしくお願いします！
今回は、CSS角丸についてのお話。
CSSの「border-radius」プロパティを使えば、
- ・フォームに設置するボタン
- ・画像
- ・divタグなどで作ったボックス
などの角を丸くすることができます。
角を丸くすることによって、ページ全体の印象を柔らかくしたり優しい印象にすることもできますよね。
今回は、要素の角を丸くする方法の基本を解説いたします。
丸みをもたせることでサイトの見た目を柔らかく表現できる、角丸の基本をマスターしましょう！
目次
border-radiusの基本的な使い方
CSSで「 border-radius」プロパティを指定すると、要素の4つ角に丸みを持たせることができます。
基本的な書き方は、
|
1 2 3 |
セレクタ { border-radius: 数値; } |
とするだけ。
数値の単位には、pxと％を使用することができ、pxで指定するとそのままの大きさ、％で指定すると要素の比率に合わせた角丸を指定できます。
指定した数値によって角の角度を変えることができ、数値が大きければ大きいほどその要素の角が丸くなります。
そして、数値が小さければ小さいほど要素の角に角度がつき、四角に近づきます。
指定した数値が円の半径となり、その半径に合わせた円の半円が要素の角になるというかたちですね。指定した数値、すなわち半径の大きさで角の丸さが決まります。
では実際に、border-radius を使って角丸を作ってみましょう！
ボックスの角を丸くする
|
1 2 3 4 5 6 |
.box { width: 100px; height: 100px; background: #ffa500; border-radius: 10px; } |
＜結果＞
角ばった四角よりも、ほんの少しだけ角を丸くするだけでポップな印象になりますね。
画像の角を丸くする
|
1 2 3 4 5 |
img { width: 100px; height: auto; border-radius: 20px; } |
＜結果＞
このように、画像の角を取ることもできます。四角いままの画像だけでなく、いろいろな形に切り抜いた画像を表示させるのも良いですよね。
ボタンの角を丸くする
|
1 2 3 4 5 6 |
.btn { width: 100px; height: 30px; background: #ffb6c1; border-radius: 5px; } |
＜結果＞
ボタンにも色々な種類があると思いますが、角がある四角よりも上記の例のようにほんの少しだけ角丸にすることによって、よりボタンらしさを表現することができます。
円形の作り方
指定する値を50%にすると、正円や楕円を作ることもできます。
正円を作る
|
1 2 3 4 5 6 |
.box { width: 100px; height: 100px; background: #ffa500; border-radius: 50%; } |
＜結果＞
楕円を作る
|
1 2 3 4 5 6 |
.btn { width: 80px; height: 50px; background: #ffb6c1; border-radius: 50%; } |
＜結果＞
各々の角ごとに個別指定する方法
それぞれの角ごとに個別に値を指定すると、形を自在に変形させることも可能です。
|
1 2 3 4 5 6 |
div { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; } |
個別に指定する場合は、このように書きます。
が、これだと少し面倒なので、もっと簡単な方法が下記の短縮形です。
|
1 2 3 |
div { border-radius: 10px 20px 30px 40px; } |
要素の角の数値を、左上、右上、右下、左下の順に、時計回りで書けばOK。
葉っぱの形を作る
各々の角ごとに個別指定する書き方を使って、葉っぱのような形を作ってみましょう。
|
1 2 3 4 5 |
img { width: 100px; height: 100px; border-radius: 50% 50% 0 50%; } |
＜結果＞
このように、角に指定する値を変えることでさまざまな形を作ることができます。
さらに複雑な指定で変わった形を作る
ここまでで解説した指定方法は、すべて角丸の縦・横比率が同じでしたが、次は応用バージョンで、縦・横比が違う場合の書き方をご紹介します。
個別指定の方法で、各々の角の値を半角スペースで区切って指定すると、楕円の半円に沿った角丸を作ることができます。
書き方は、下記のように前側に楕円の横の半径を、スペースの後側に縦の半径を指定します。
|
1 2 3 4 5 6 |
div { border-top-left-radius: 10px 5px; border-top-right-radius: 20px 10px; border-bottom-right-radius: 30px 50px; border-bottom-left-radius: 40px 100px; } |
このように書いても良いですし、もちろん短縮形で書くこともできます。
短縮形の場合は、楕円の横の半径と縦の半径の値を / （スラッシュ）で区切り、左上、右上、右下、左下の順に、時計回りで書けばOKです。
|
1 2 3 4 5 6 |
.box { width: 100px; height: 100px; background: #ffa500; border-radius: 10px 20px 30px 40px / 5px 10px 50px 100px; } |
＜結果＞
短縮形で書くと並び方が少し複雑になるので、どの場所の値なのか混乱しそうですが、時計回りということを頭に入れておけば良いかと思います。
このように、角丸の縦横比率を変えることによって、かなり複雑で面白い形を作ることができます。
画像を使わなくても、CSSでここまで作れるって楽しいですよね！
対応ブラウザ
border-radius プロパティは、基本的にはどのブラウザでも使用することができますが、
IE8以前のブラウザは非対応となっています。
なので、もしそういったブラウザを使うといった場合は注意が必要ですね。
まとめ
以上、CSSで角丸を作る方法の基本を解説しました。
角丸を使うだけで、ボタンはボタンらしく表現できたり、全体の雰囲気を変えることもできます。
今回はシンプルな角丸のみをご紹介しましたが、角丸の活用方法はまだまだたくさんあり、いろいろな形を表現することができますので、是非いろいろためしてみてくださいね！
ということで、
溺愛息子と二人暮らし、アラフォーシンママの ’あき’ がお伝えしました。
