CSSで円を作る方法【現役エンジニアが解説】
今回は、CSSで円を作る方法について、塗りつぶす場合と塗りつぶさない場合に分け、簡単に解説していきます。
塗りつぶす場合
円を作るには、border-radiusプロパティの値を50%にします。
円を塗りつぶす場合には、backgroud-colorプロパティを指定するだけです。
.circle{ width:50px; height:50px; border-radius:50%; background-color:red; }
上記のコードでは、幅と高さが50ピクセルの円を作り、赤色で塗りつぶしています。
塗りつぶさない場合
塗りつぶさない場合には、background-colorプロパティを指定しません。
代わりに、borderプロパティを指定することで、円周の線を引くようにします。
.circle{ width:50px; height:50px; border-radius:50%; border:solid 1px green; }
上記のコードでは、幅と高さが50ピクセルの円を作成し、塗りつぶさず、緑色の円周の線を引いています。
文字を中心に書く場合
文字を書く場合には、displayプロパティの値をinline-blockと指定します。
また、文字の中央寄せにはline-heigthプロパティとtext-alignプロパティを使用します。
.circle{ width:50px; height:50px; border-radius:50%; background-color:blue; display:inline-block; text-align:center; line-height:50px; }
上記のコードでは、幅と高さが50ピクセルの円を表現し、青色で塗りつぶしたうえで、文字を中央に表示させています。