レスポンシブ対応の正方形の作成 | 知恵袋（Tips） | HTML-CSS 入門講座

説明

概要

CSS でレポンシブ対応の正方形を作成する方法を説明します。

正方形の画像ファイルを使用する場合であればレスポンシブ対応の正方形を作成を作成することは容易ですが文字列などを記載するための領域をレスポンシブ対応の正方形として作成するには工夫が必要であり、以下の方法があります。

上下の padding プロパティの特性を利用して作成
aspect-ratio プロパティを使用して作成

以前は、上下の padding プロパティを使用する方法が一般的でしたが、CSS の強化により aspect-ratio プロパティを利用する方法が一般的になっています。

(1) 上下の padding プロパティの特性を利用して作成

(a) 上下のパディング特性の確認

padding-top（パディングトップ）や padding-bottom（パディングボトム）の値をパーセンテージ（%）で指定する場合は、親要素の横幅に対する比率の指定になります。下記の例では、領域（水色）の width（幅）を 30% に設定し、padding-top も 30% に設定しています。この指定を行うことで親要素（ピンク）の幅に対して 30% の正方形を作成することができます。親要素の幅比率で作成されますのでレスポンシブ対応ができていることになります。ただし、この領域は、padding 領域なので文字を記載することは出来ません。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-01）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square1 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
	</ul>
	<div class="wrapper">
		<div class="square1">
		</div>
	</div>
</div>

</body>
</html>

(b) 正方形内に文字を記載

正方形内に文字を記載する場合は、子要素を作成して子要素内に文字を記載します。その子要素は、width（幅）と height（高さ）の両方を 100% にすることで親要素と同じ大きさにした後に position（ポジション）を使用して親要素と重ねます。このようにすることで正方形の中に文字を記載することができます。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-02）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square2 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
	position: relative;
}
.square2 p {
	width: 100%;
	height: 100%;
	padding: 10px;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
		<li>水色領域内に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square2">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(c) 正方形の中央に文字を配置

正方形の中央に文字を配置する場合は、子要素の width（幅）は 100% のままで、height（高さ）の指定はなしにします。このように指定することで高さは記載した文字の高さに設定されます。横中央の指定は、 text-align: center; を指定することで中央配置を行います。縦中央は、ポジションの位置を top: 50%; にして、さらに transform: translateY(-50%); を指定することで縦中央に配置されます。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-03）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square3 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
	position: relative;
}
.square3 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
		<li>水色領域内の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square3">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(d) 親要素の対して 3 個の正方形を配置

応用編ですが、親要素に対して 3 個の正方形を並べる場合は、親要素に対して display: flex; を指定して、子要素の幅と高さに calc(100% / 3) を指定します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-04）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square4 {
	width: calc(100% / 3);
	padding-top: calc(100% / 3);
	position: relative;
}
.square4:nth-child(1) {
	background: skyblue;
}
.square4:nth-child(2) {
	background: yellow;
}
.square4:nth-child(3) {
	background: orange;
}
.square4 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の正方形を並べる</li>
		<li>正方形内の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(e) 親要素の対して 3 個の正円を配置

応用編のその 2 ですが、親要素に対して 3 個の正円を並べる場合は、上記の指定に追加して、子要素に border-radius: 50%; を追加します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-05）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square5 {
	width: calc(100% / 3);
	padding-top: calc(100% / 3);
	position: relative;
	border-radius: 50%;
}
.square5:nth-child(1) {
	background: skyblue;
}
.square5:nth-child(2) {
	background: yellow;
}
.square5:nth-child(3) {
	background: orange;
}
.square5 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の円を並べる</li>
		<li>円の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(2) aspect-ratio プロパティを使用して作成

(a) aspect-ratio プロパティを使用して正方形を作成

aspect-ratio プロパティを使用することで領域の縦横比を指定することができます。下記の例では、領域（水色）の width（幅）を 30% に設定し、aspect-ratio: 1 / 1; を指定しています。この指定を行うことで親要素（ピンク）の幅に対して 30% の正方形を作成することができます。親要素の幅比率で作成されますのでレスポンシブ対応ができていることになります。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-11）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square11 {
	width: 30%;
	aspect-ratio: 1 / 1;
	background: skyblue;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形（aspect-ratio: 1 / 1; を使用）</li>
	</ul>
	<div class="wrapper">
		<div class="square11">
		</div>
	</div>
</div>

</body>
</html>

(b) 正方形内に文字を配置

正方形内に文字を記載する場合は、子要素を作成して子要素内に文字を記載します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-12）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square12 {
	width: 30%;
	aspect-ratio: 1 / 1;
	background: skyblue;
}
.square12 p {
	padding: 10px;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形（aspect-ratio: 1 / 1; を使用）</li>
		<li>水色領域内に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square12">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(c) 正方形の中央に文字を配置

正方形の中央に文字を記載する場合は、子要素が1つだけのフレックスレイアウトを作成します。

フレックスレイアウトを使用して justify-content プロパティや align-items プロパティを使用することで子要素を縦方向も横方向も自由な位置に配置を行うことができます。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-13）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square13 {
	width: 30%;
	aspect-ratio: 1 / 1;
	background: skyblue;
	display: flex;
	justify-content: center;
	align-items: center;
}
.square13 p {
	padding: 10px;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形（aspect-ratio: 1 / 1; を使用）</li>
		<li>水色領域内の中央に文字を配置（フィレックスレイアウトを使用）</li>
	</ul>
	<div class="wrapper">
		<div class="square13">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(d) 親要素の対して 3 個の正方形を配置

応用編ですが、親要素に対して 3 個の正方形を並べる場合は、子要素を 3 個のフレックスレイアウトを作成します。子要素の幅には、width: calc(100% / 3); を指定します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-14）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square14 {
	width: calc(100% / 3);
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.square14:nth-child(1) {
	background: skyblue;
}
.square14:nth-child(2) {
	background: yellow;
}
.square14:nth-child(3) {
	background: orange;
}
.square14 p {
	padding: 10px;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の正方形を並べる（aspect-ratio: 1 / 1; を使用）</li>
		<li>正方形内の中央に文字を配置（フィレックスレイアウトを使用）</li>
	</ul>
	<div class="wrapper">
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(e) 親要素の対して 3 個の正円を配置

応用編のその 2 ですが、親要素に対して 3 個の正円を並べる場合は、子要素を 3 個のフレックスレイアウトを作成します。子要素の幅には、width: calc(100% / 3); を指定し、さらに border-radius: 50%; を指定して正円にします。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示（レスポンシブ対応の正方形の作成-15）

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ正方形の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>

* {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
.container {
	border: #fff 1px solid;
}
ul {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 10px 10px 30px;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square14 {
	width: calc(100% / 3);
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.square14:nth-child(1) {
	background: skyblue;
}
.square14:nth-child(2) {
	background: yellow;
}
.square14:nth-child(3) {
	background: orange;
}
.square14 p {
	padding: 10px;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の円を並べる（aspect-ratio: 1 / 1; を使用）</li>
		<li>円の中央に文字を配置（フィレックスレイアウトを使用）</li>
	</ul>
	<div class="wrapper">
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square14">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>