htmlとcssだけでレスポンシブ対応のフレキシブルな「円」を作る

どんな画面幅でも崩れない、フレキシブルな円の作りかたです。

完成形

HTML

<div class="circle_width">
	<div class="circle_height">
		<p>まるです</p>
	</div>
</div>

1行目　横幅を制御するためのコンテナ
2行目　高さをつけるコンテナ
3行目　中に入れたい要素

CSS

.circle_width {
表示したい横幅を決める
width: 25%;

線をつける
border: 3px solid #333;

要素の角をなくす
50%でまんまるになる
border-radius: 50%;
}

.circle_height {
内包する要素の基準にする
position: relative;

paddingの％指定は親要素の横幅に依存する
padding-top: 100%にすることで親要素の横幅と同じ長さになる
親要素が正方形になる
padding-top: 100%;

要素自体の高さがあるとずれるので高さを０にする
height: 0;
}

.circle_height p {
要素のたかさをなくす
position: absolute;

正方形の幅-文字の高さ/2 で上下真ん中に要素がくる
top: calc((100% - 1em)/2);

要素伸ばす
left: 0;
right: 0;

pタグ初期値のmarginを無効に
margin: 0;

文字中央寄せ
text-align: center;
}