A Little Each Day

note to self

CSSのborder-radiusの使い方

こんにちは。本日はCSS3から使えるようになったborder-radiusの使い方です。

要素に対して角丸を指定することができ、ボタンや画像などの角を簡単に丸くすることができます。

ボタンの角を丸くしてみよう

まずはじめに一番使うであろう要素の角を丸くする方法です。

<div class="botton">
  ボタン
</div>
.botton{
  background-color: orange;
  color: white;
  padding: 10px;
  display: inline-block;
}


f:id:chi_kun:20160630151134p:plain


今回はボタンの角を丸くしてみましょう。

CSSファイルの適用したい要素に以下を記述するだけです。

数字が大きくなればなるほど丸くなります。

border-radius: 4px;
/* 今回は4pxです。各自好きな数字にしてください。 */


f:id:chi_kun:20160630151638p:plain


きちんと角が丸くなっているのがわかると思います。


一部分だけ角を丸くしてみよう

人によっては全ての角を丸くするのではなく、一部分だけ丸くしたいと思う人もいることでしょう。

指定する方法はいくつかあります。


まず一つ目は水平方向と垂直方向を指定する方法です。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
/* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */


二つ目は角を指定する方法です。

border-top-left-radius: 10px; /* 上辺左 */
border-top-right-radius: 10px; /* 上辺右 */
border-bottom-left-radius: 10px; /* 下辺左 */
border-bottom-right-radius: 10px; /* 下辺右 */


一つ目の方法は細かく指定できますが、二つ目の方が簡単に角丸を指定できると思います。


ここでは例として二つ目の方法で上辺右の角だけを丸くしてみましょう。

<div class="botton">
  ボタン
</div>
.botton{
  background-color: orange;
  color: white;
  padding: 10px 30px;
  display: inline-block;
  border-top-right-radius: 10px;
}


すると...

f:id:chi_kun:20160630164819p:plain


きちんと上辺右が丸くなっているのがわかると思います。


アイコンを円にしてみよう

最後に要素を完全な円にする方法について見ていきましょう。

ここ近年ユーザーアイコンなどの画像を丸く表示する方法が流行っていますね。

すごくオシャレですが、こちらもborder-radiusを使えば簡単に実装することができます。


条件として
・要素の高さの数値
・要素の幅の数値
・border-radiusの数値
の3つを合わせる必要があります。

<img src="sample.png" class="icon">
.icon{
  height: 50px;
  width: 50px;
  border-radius: 50px;
  border: 2px solid gray;
}


こうすることにより以下のようになります。

f:id:chi_kun:20160630170918p:plain


ちょっと画質が悪いですが...

きちんとアイコンが丸くなっているのがわかると思います。



本日は以上です。