おかぴーです。
今回はCSSでコーディングし、まん丸(正円)を作りたいと思います。
完成形はこちら↓
実際にブラウザを縮めてみてください。
さて、どうなるかな?




まん丸(正円)のコード
<div class=”seien”>
<div>最初の円のテキストだよ!</div>
<div>2つ目のテキスト!<br>さて、どうなるかな?</div>
</div>
.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}
/*円と文字*/
.seien div{
width: calc(90%/2);
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%;
}
それぞれ解説していきますね。
円の親要素
.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}
まずは親要素。
→display: flex;を使って、円2つを横並びに。
→justify-content: space-around;で均等に配置しています。
円と文字
width: calc(90%/2);
→円2つ分の幅を指定。
ブラウザ幅の90%に対して、2分割して配置。
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%;って便利ですね〜
コメント