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>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント