divパズルをPC表示とSP表示で完成させたい

コード
```divパズルをPC表示とSP表示で完成させたい

HTMLとCSSでdivパズルを作っています。

PC表示はうまく行ったのですが、SP表示がうまく出来ません。

調べたら＠media screenを使う様ですが、どこに書くのか、いまいち分かりません。

また、vsコードを使っていますがコード内のプレビュー機能ではパズルが表示されるのに対してChromeでは表示されないバグのようなものがあるのですが対処法はありますでしょうか。

ご回答よろしくお願いします。

SP表示の場合
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-01/c0b2e6d5-bfd0-4f09-be75-57a09b1ebcfb.png)

PC表示の場合

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>divパズルlv1</title>
	<link rel="stylesheet" href="puzzle01.css">
</head>
<body>
	<div class="wrapper">
		<div class="header">
		<!--  end of .header -->
		</div>
		<div class="main clearfix">
			<div class="content">
			</div>
			<div class="side">
			</div>
		<!--  end of .main -->
		</div>
		<div class="footer">
		<!--  end of .footer -->
		</div>
	<!--  end of .wrapper -->
	</div>
</body>
</html>


body {
	width: 100%;
}
.wrapper {
	width: 400px;
	margin: 0 auto;
}
.header {
	width: 400px;
	height: 100px;
	background: #739aff;
}
.content {
	float: left;
	width: 150px;
	height: 250px;
	background: #ffa473;
}
.side {
	float: right;
	width: 250px;
	height: 250px;
	background: #e6ff73;
}
.footer {
	width: 400px;
	height: 100px;
	background: #ff7376;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

hoshi-takanori

2023/09/30 19:05

divパズルとは？とりあえずソースを貼ってもらわないと答えようがないですね…。

akigogo

2023/10/01 03:10

コメントありがとうございます。情報が足りず申し訳ございません。コードとスクリーンショットを質問内容に添付したので確認をよろしくお願いいたします。 PC表示がコードでスクリーンショットがSP表示させたいパズルです。

行動規範の内容に同意します

回答1件

ベストアンサー

puzzle01.css の末尾にこちらを追加してみてください。
望んでいる形に近くなるかと思います。

@media screen and (max-width: 480px) {
	.content {
		float: none;
		width: 400px;
		height: 250px;
		background: #ffa473;
	}
	.side {
		float: none;
		width: 400px;
		height: 250px;
		background: #e6ff73;
	}
}

CSSのメディアクエリの使い方やCSSを書いていく順番等は調べて勉強されてみると良いかと思います。

投稿2023/10/01 08:40

編集2023/10/01 09:59