2021/01/17

CSSで円を作る方法【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルの円を表現し、青色で塗りつぶしたうえで、文字を中央に表示させています。

• facebook
• Tweet
• Read Later