CSSのdivタグで円を描く方法

CSSのdivタグで円を描く方法

DIVタグなどのブロック要素でborder-radiusを50%で指定すれば、円を描けることが出来ます。

前提として、widthとheightは同じであることとなります。でないと楕円形になってしまいます。

上記は以下のように記述しています。

<div style="width: 30px; height: 30px; border-radius: 50%; background-color: blue;"></div>

円を中央寄せで描く

divタグを中央寄せするにはmarginを使用します。

widthを指定したうえでmargin:0 auto;とすることで中央寄せすることが可能です。

<div style="width: 30px; height: 30px; border-radius: 50%; background-color: blue; margin: 20px auto;"></div>

marginについては「今更ながらCSSのmarginについて勉強してみました」を参照ください。

円を中央寄せで描く

先ほどはmarginを使用しましたが、今度は親要素、子要素で中央寄せしてみたいと思います。

円にはdisplay:inline-block;を指定します。

親要素にtext-align:center;を指定します。

<div style="text-align: center;">
  <div style="display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: blue;"></div>
</div>

コメント

タイトルとURLをコピーしました