CSSをつかって円をつくるよ！ | border-radius

作成:2018.9.5 更新:2020.5.23

こんにちは！きっしーです。

今日は、CSSの擬似要素をつかって円を作ってみます。

CSSをつかって円をつくると、ふきだしやフェイスアイコンや画像のふちどりなんかに使えます。

CSSで真円を作る

CSSで真円（まんまる）をつくってみます。

border-radiusというプロパティをつかいます。 border-radiusはボーダーの角の丸みを指定します。

これを50%にすると幅の半分の半径でまるめるので、まんまるになります。

CSS

div {
  width:  30px;
  height:  30px; 
  border: solid 2px  #cccccc; 
  border-radius:  50%;  
}

CSSで楕円をつくってみます。widthとheightの値を変えれば楕円になります。

CSS

div { 
  width:  50px; 
  height:  30px; 
  border: solid 2px  #cccccc; 
  border-radius:  50%;  
}

CSSでフェイスアイコンをつくってみます。といっても先ほどつくった真円に背景画像を指定するだけですが。簡単ですね。

CSS

div { 
  width:  50px; 
  height:  50px; 
  background: url('face.png'); 
  border: solid 2px  #cccccc; 
  border-radius:  50%;  
}

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。