メディアクエリがききません。なぜでしょうか？

前提・実現したいこと

メディアクエリがききません。
なぜでしょうか？ご教授頂けますと幸いです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="UTF-8">
6 <title>サンプルページ</title>
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <meta name="viewport" content="width=device-width,initial-scale=1">
10
11
12</head>
13
14<body>
15 <header>
16  <div class="header-wrapper title wrapper">
17   <div class="header-top ">
18    <h1>はじめてのコーディング</h1>
19   </div>
20   <div class="top-message title">
21    <img class="top-image" src="images/kv-img.jpg">
22    <p class="top">コーディングを学習して、<br>オリジナルサイトを作成しよう</p>
23   </div>
24   <h2>はじめに</h2>
25   <div class="header-text">
26    <p>このサイトはコーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイト<br>を「使える状態」にすることです。</p>
27   </div>
28  </div>
29 </header>
30
31 <div class="content-wrapper title wrapper">
32  <div class="kokorogamae ">
33   <h2>学習の心構え</h2>
34   <div class="content-text">
35    <p>暗記しようとしない</p><br>
36    <p>反復練習する</p><br>
37    <p>習得するまでコピペ禁止</p><br>
38    <p>1回で理解できなくても気にしない</p><br>
39   </div>
40  </div>
41
42
43  <div class-="content wrapper">
44   <h2>学習すること</h2>
45
46   <div class="container">
47    <div class="items HTML5">
48     <img src="images/icon_html.jpg">
49     <p class="contents">HTML5</p>
50    </div>
51
52    <div class="items CSS3">
53     <img src="images/icon_css.jpg">
54     <p class="contents">CSS3</p>
55    </div>
56
57    <div class="items js">
58     <img src="images/icon_js.jpg">
59     <p class="contents">JavaScript/Jquery</p>
60    </div>
61   </div>
62
63  </div>
64 </div>
65
66
67
68 <a href="#" class="button">Webサイトを見る</a>
69
70 <footer>
71  <p>@2020cresta.design</p>
72 </footer>
73
74
75
76</body></html>
77

CSS
1@meta charset="utf-8";
2
3@import "variables";
4
5/*全体のレイアウト*/
6html {
7 width: 100%;
8 text-align: center;
9 font-family: $font;
10 box-sizing: border-box;
11}
12
13/*共通レイアウト　表題*/
14.title h2 {
15 color: $orange;
16 font-size: 25px;
17 font-weight: 500px;
18 margin-top: 100px;
19 margin-bottom: 50px;
20}
21
22/*共通レイアウト　各項目余白*/
23.wrapper {
24 margin-bottom: 100px;
25 width: auto;
26}
27
28
29
30/*メインタイトル*/
31.header-top {
32 background-color: $orange;
33 height: 30px;
34 color: $white;
35 text-align: center;
36 font-size: 33px;
37 line-height: 16px;
38 font-weight: bold;
39 padding: 30px;
40}
41
42/*親：トップ　背景画像*/
43.top-image {
44 height: 300px;
45 position: relative;
46 width: 100%;
47
48}
49
50/*子：画像上テキスト　配置*/
51.top-message p {
52 position: absolute;
53 color: white;
54 top: 30%;
55 left: 35%;
56 text-align: center;
57 font-size: 33px;
58}
59
60/*中央ぞろえ　かつ　左寄せ*/
61.header-text {
62 text-align: left;
63 display: inline-block;
64 line-height: 30px;
65}
66
67
68
69/*コンテンツ部　背景色*/
70.kokorogamae {
71 background-color: #f0f0f0;
72 padding-bottom: 100px;
73 padding-top: 30px;
74 box-sizing: border-box;
75}
76
77
78/*コンテンツ部　横ならべ*/
79.container {
80 display: flex;
81 justify-content: center;
82 align-items: center;
83
84 img {
85  width: 40%;
86  height: auto;
87 }
88
89 p {
90  text-align: start;
91  margin-left: 30%;
92 }
93}
94
95/*コンテンツ部　各三つの要素のレイアウト*/
96/*コンテンツ部　各三つの要素のテキスト部　レイアウト*/
97.items {
98 margin: 0 auto;
99 font-weight: bold;
100}
101
102/*コンテンツ部　背景*/
103.content-wrapper {
104 width: 100%;
105}
106
107
108
109/*コンテンツ部　コンテンツ間余白調整*/
110.CSS3 {
111 margin-right: -170px;
112 margin-left: -170px;
113}
114
115/*コンテンツ部　ボタンレイアウト*/
116.button {
117 width: 150px;
118 font-size: 15px;
119 text-decoration: none;
120 display: block;
121 text-align: center;
122 padding: 12px 0 12px;
123 background-color: $orange;
124 color: $white;
125 outline: 0;
126 text-align: center;
127 display: inline-block;
128 margin-top: 50px;
129 margin-bottom: 200px;
130}
131
132/*コンテンツ部　ボタン　テキスト*/
133.content p .button {
134 font-weight: bold;
135}
136
137
138
139
140/*フッター部　レイアウト設定*/
141footer {
142 background-color: darkslategray;
143 height: 5px;
144 padding-top: 15px;
145 padding-bottom: 15px;
146 color: $white;
147 font-size: 8px;
148}
149
150/*----------以下、レスポンシブデザイン------------------*/
151
152
153
154
155@media screen and(max-width: 768px) {
156
157
158 .header-top {
159  font-size: 26px;
160 }
161}
162
163

試したこと

・スペルミスを疑う
ほかのサイトなどでメディアクエリ導入の記述をコピペしてみましたがききません。

補足情報（FW/ツールのバージョンなど）

Windows

m.ts10806

2021/01/15 01:31

「定義したクラスをHTMLで使っていない可能性」も含めて「スペルミス」ではないでしょうか。

mitrasi

2021/01/15 01:40

おっしゃる通り、クラス名をまちがっておりました???? 初歩的なミスでした。ご回答ありがとうございます！

m.ts10806

2021/01/15 01:45

あ、というより「スペルミスを疑う」だけでは「やったこと」は他人には伝わらない　ということが分かってもらえたらと。

mitrasi

2021/01/15 01:51

大変失礼致しました???? 質問の仕方すら模索中ですが、改善していくよう努めます。

dit.

2021/01/15 01:53

メディアクエリが効く効かないの問題が解決され解決済みにしたのであれば、この質問のコードを「解決した後」の状態に書き換えるのはやめましょう。質問と回答の内容が食い違ってしまいます。新たに質問をするか、書き換えではなく追記する形で現状のコードを提示した方がよろしいかと。

m.ts10806

2021/01/15 01:54

あと、「解決」したあとに追加質問はマナー違反かと思います。解決してないなら「解決済み」を「受付中」に戻して回答くれた人に事情を伝えられるべきで、要件変わるなら別質問にすべきです。

mitrasi

2021/01/15 01:58

>dit.様 >m.ts10806様大変申し訳ございませんでした。これ以上は控えることに致します。本当にごめんなさい

m.ts10806

2021/01/15 02:00 編集

ひとまず解決したときの状態に質問を戻すところから。

dit.

2021/01/15 02:06

文字だけだとキツい印象を持ってしまうかもしれませんが怒っていたり説教をしているわけではないのでご了承を。いつか誰かが同じ問題に直面した時、このページを見るかもしれません。そのときに「なんで問題のないコードなのに質問してるんだろう、なんで質問のコードと食い違うことを回答してるんだろう」と思われないようにしましょう、ということです。このページを見た全員が質問の編集履歴を見るわけではないので。

mitrasi

2021/01/15 02:16

>m.ts10806様 >dit.様ご指導のうえフォローまで頂き、ありがとうございます。おっしゃられる理由は十分に理解できますので、以後は解決した後も誰かが見るかもしれないことを忘れないように致します。マナーを守った質問ができるよう精進致しますので、ぜひまたご教授頂けますと幸いです。

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

回答3件

ベストアンサー

.headertop
↓
.header-top

class名ミスってる

投稿2021/01/15 01:30

yomihermit

総合スコア18

mitrasi

2021/01/15 01:34

おっしゃる通りですね！自分で何度も確認はしたつもりだったのですが、焦っていたもので見落としていました???? ありがとうございます！！

yomihermit

2021/01/15 01:38

何のブラウザ使ってるか分からんけど、CHROMEやったら「F12キー」押したら検証モード出るからそこで「Ctrl+F」押せば要素を検索する為の入力欄が出る。その入力欄で「.headertop」で検索掛けて出なければ、その要素は無いってこと。

mitrasi

2021/01/15 01:41

検証ツールは知っていましたが、その機能は初めてしりました！大変為になる情報ありがとうございます！

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

@media screen and(max-width: 768px) {


 .headertop {
  font-size: 26px;
 }
}

「.headertop」ではなく、「.header-top」ではないですか？

投稿2021/01/15 01:29

JPC

総合スコア10

mitrasi

2021/01/15 01:34

おっしゃる通りですね！自分で何度も確認はしたつもりだったのですが、焦っていたもので見落としていました???? ありがとうございます！！

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

皆さんが指摘している.headertop→.header-topの修正に加え、以下も修正が必要かと思います。

CSS
1@media screen and (max-width: 768px) {
2/*               ↑ここにスペースが必要 */

投稿2021/01/15 01:35

dit.

総合スコア3235

mitrasi

2021/01/15 01:38

ご回答ありがとうございます！スペースの追加、かしこまりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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