CSSでブラウザを縮めても楕円にならず、まん丸（正円）で文字を中心に配置する方法

おかぴーです。

今回はCSSでコーディングし、まん丸（正円）を作りたいと思います。

完成形はこちら↓
実際にブラウザを縮めてみてください。

まん丸（正円）のコード

それぞれ解説していきますね。

円の親要素

.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}

まずは親要素。

→display: flex;を使って、円２つを横並びに。
→justify-content: space-around;で均等に配置しています。

円と文字

width: calc(90%/2);

→円２つ分の幅を指定。
ブラウザ幅の90%に対して、２分割して配置。

border-radius: 100%;

→円の丸み

display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-box-pack: center;

→文字を円に対して、左右の中央に配置

align-items: center;
-webkit-box-align: center;

→文字を円に対して、上下の中央に配置

color: #4c4c4c;

→文字色・お好みで

border: 1px solid #4c4c4c;

→円の枠線の色・お好みで

background:#ffffbc;

→円の背景色・お好みで

text-align: center;

→文字を改行した場合の中央寄せ

円の擬似要素

.seien div:before{
display: block;
content: ”;
padding-top: 100%;
}

padding-topを100%にすることで、親要素（今回だと、.seienというクラス名のdiv）の幅を参照して、同じ高さを反映させてくれます。

これがあることで、どんな幅になってもまん丸になるんですね。

まとめ

画像を使ってデザインするのもありですけど、コーディングでもうまくレスポンシブなまん丸を表現することができました^^

padding-top: 100%;って便利ですね〜