レスポンシブのCSSが反映されません

前提・実現したいこと

https://note.com/tokyofreelance/n/n4baf7dd10306
こちらのデイトラからの模写コーディングの課題をやっているのですがレスポンシブ対応が何を打ち込んでも反映されず困っています。
ファイルの位置やviewportなどネットに載っているものは大体試しましたがレスポンシブのCSSが反映されているのかも分かりません。
ビジュアルスタジオコードにて作成していますがプレビューをスマホサイズにするとレイアウトが崩れます。
どうすればレスポンシブを反映させられるでしょうか？
（カラーをレッドやフォントサイズを小さくしているのは適応されているか分かりやすくする為です。）　

追記
こういうサイトを使うのが初めてだった為必要なところのみ抜き出せばいいかと思って省略して書いてしまいましたごめんなさい。
回答を参考に弄ってみたら反映させることができましたありがとうございます。

発生している問題・エラーメッセージ

レスポンシブが反映されない、画面を狭くするとレイアウトが崩れる


### 該当のソースコード
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">
  </head>
 <div class="copy-container">
     <h2 class="catch-copy">1日1題30日でプロのエンジニアになろう！</h2>
     <h1 class="catch-copy-2">毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます</h1>
    </div>
```CSS
.copy-container{
 margin-top:-20px;
 width:100%;
 height:290px;
 color:rgb(21, 48, 56);
 margin-left: auto;
 margin-right: auto;
 background-image:url("../img/main-vsual-nontitle.png");
}

.catch-copy{
 text-align:center;
 font-size:30px;
 padding:72px 210px 0px 210px;
}


@media screen and( max-width:480px )
{
.copy-container{
	width:100%;
	font-size:5px;
	color:red;
}


.catch-copy{
 font-size:5px;
 color:red;
}

}

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

回答2件

ベストアンサー

HTMLの基本タグがない点は、他の回答者の指摘通りですが、

html
1   <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">

この記述だと、画面幅480px以下の時しか Responsive.css を読み込んでませんが、それを認識してますか。
CSS内の @media の記述でレスポンシブ対応しているなら、media="screen and (max-width:480px)"は不要です。

次に、

css
1@media screen and( max-width:480px )

の部分、and の後に半角空白が必要です。

css
1@media screen and ( max-width:480px )

としてください。

この２つの修正で画面幅 480px で切り替わるようになります。

CSSは後の方が優先されますので、下記のような書き方でOKです。

css
1/* 全サイズ共通の設定 */
2/* 画面幅480pxより大きいときの固有の設定 */
3
4@media screen and ( max-width:480px ) {
5/* 画面幅480px以下の時の固有の設定 */
6}

投稿2020/09/21 18:18

編集2020/09/21 23:37

hatena19

総合スコア33775

まず重要タグを略さない<Body></html>とか

HTML
1<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4<title></title>
5<head>
6<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">
8</head>
9<body>
10<div class="copy-container">
11	<h2 class="catch-copy">1日1題30日でプロのエンジニアになろう！</h2>
12	<h1 class="catch-copy-2">毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます</h1>
13</div>
14</body>
15</html>

画面の幅で判断しているのでしょ？
そうしたらPCの場合も条件入れないと

CSS
1/* PCの場合幅が481px以上で適用 */
2@media screen and (min-width: 481px) { 
3	.copy-container{
4		margin-top:-20px;
5		width:100%;
6		height:290px;
7		color:rgb(21, 48, 56);
8		margin-left: auto;
9		margin-right: auto;
10		background-image:url("../img/main-vsual-nontitle.png");
11	}
12
13	.catch-copy{
14		text-align:center;
15		font-size:30px;
16		padding:72px 210px 0px 210px;
17	}
18}
19/* モバイルの場合幅が最大480pxまでで適用 */
20@media screen and (max-width: 480px) { 
21	.copy-container{
22		width:100%;
23		font-size:5px;
24		color:red;
25	}
26
27	.catch-copy{
28		font-size:5px;
29		color:red;
30	}
31}
32

投稿2020/09/21 10:51

kuma_kuma_

総合スコア2506

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！