今回はCSSでコーディングし、まん丸（正円）を作りたいと思います。
完成形はこちら↓
実際にブラウザを縮めてみてください。
最初の円のテキストだよ！
２つ目のテキスト！
さて、どうなるかな？
さて、どうなるかな？
みみこパソコン・スマホで見た時はまん丸になってて、Chromeとかのブラウザを変更して見た時って案外バランス崩れたりするんですよね…
おかぴーブラウザを縮めた時に幅と高さが楕円形になってバランスが潰れてしまわないように、レスポンシブ対応した円を作っていこうと思います！
こんな方に読んで欲しい
- CSSでまん丸を作りたい
- 中にテキストを入れて、上下中央に配置したい
- ブラウザを縮めたりしてもずれないようにしたい
目次
まん丸（正円）のコード
<div class="seien_demo">
<div>最初の円のテキストだよ！</div>
<div>２つ目のテキスト！<br>さて、どうなるかな？</div>
</div>/*円の配置*/
.seien_demo{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}
/*円と文字*/
.seien_demo div{
width: calc(90% / 2);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #4c4c4c;
border: 1px solid #4c4c4c;
background:#ffffbc;
text-align:center;
}
/*擬似要素*/
.seien_demo div:before{
content: '';
display: block;
padding-top: 100%;
}それぞれ解説していきますね。
円の親要素
/*円の配置*/
.seien_demo{
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;→文字を円に対して、左右の中央に配置
align-items: center;→文字を円に対して、上下の中央に配置
color: #4c4c4c;→文字色。お好みで
border: 1px solid #4c4c4c;→円の枠線の色・お好みで
background:#ffffbc;→円の背景色・お好みで
text-align: center;→文字を改行した場合の中央寄せ
円の擬似要素
.seien_demo div:before{
display: block;
content: '';
padding-top: 100%;
}「content: ”;」という記述がないと、擬似要素が表示されません。
「padding-top」を100%にすることで、親要素（今回だと、.seienというクラス名のdiv）の幅を参照して、同じ高さを反映させてくれます。
これがあることで、どんな幅になってもまん丸になるんですね。
まとめ
画像を使ってデザインするのもありですけど、コーディングでもうまくレスポンシブなまん丸を表現することができました^^
padding-top: 100%;って便利ですね〜
コメント