メディアクエリは適用されるが、CSSが適応されない。

前提・実現したいこと

初歩的な質問で申し訳ございません。
ただいまWEB制作に取り組んでおり勉強中でなのですが、メディアクエリを適用されなくて困っております。

昨日はレスポンシブを別ファイルで作成し、きちんとCSSも適用されていましたが、
本日scssを試してみたいと思い変更をしたところCSSが適用されなくなってしまいました。

Chromeの検証にて、画面を変更した時に各それぞれのブレイクポイントで機能はしているのですが、CSSが適用されません・・・。

html {
scroll-behavior: smooth;
font-size: 16px;
}

しかし上記のようにfont-sizeを全体に指定して、それぞれのブレイクポイントではfont-sizeを小さくしてますが、そちらは適用されています。
その他がChrome検証にてCSSが斜線で適用されません。

色々と調べて試してみましたが改善されません。

どなたかご教示いただけませんでしょうか。

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="css/portfolio.css" />
8    <title>TMTN</title>
9  </head>
10  <header>
11    <div class="nav-inner flex">
12      <div class="nav-title flex font-title">
13        <div class="nav-main-title">TMTN</div>
14        <div class="nav-sub-title"></div>
15      </div>
16      <div class="nav-header-menu">
17        <nav class="nav-sns-menu">
18          <ul class="nav-sns-list">
19            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-twitter"></a></i></li>
20            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-instagram"></i></a></li>
21            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-facebook-square"></i></a></li>
22          </ul>
23        </nav>
24        <nav class="nav-menu">
25          <ul class="nav-list">
26            <li class="nav-item"><a href="#about">ABOUT</a></li>
27            <li class="nav-item"><a href="#selfpr">SELF PR</a></li>
28            <li class="nav-item"><a href="#vision">VISION</a></li>
29            <li class="nav-item"><a href="#works">WORKS</a></li>
30            <li class="nav-item"><a href="#contact">CONTACT</a></li>
31          </ul>
32        </nav>
33      </div>
34    </div>
35    <div class="burger-btn">
36      <span class="bar bar_top"></span>
37      <span class="bar bar_mid"></span>
38      <span class="bar bar_bottom"></span>
39    </div>
40  </header>
41  <body>
42    <div id="content" class="top">
43      <a href="#" id="top-button"><i class="fas fa-chevron-up"></i></a>
44    </div>
45    <div class="main-header-inner flex">
46      <div class="main-header-items">
47        <div class="main-header-item-box-a"></div>
48        <div class="main-header-item-font font-title">TMTN</div>
49        <div class="main-header-item-img"></div>
50        <div class="main-header-item-box-b"></div>
51        <div class="main-header-item-skill">
52          <ul>
53            <li>Lorem ipsum dolor sit amet, consectetur adip</li>
54            <li>Lorem ipsum dolor sit amet, consectetur adip</li>
55            <li>Lorem ipsum dolor sit amet, consectetur adip</li>
56          </ul>
57        </div>
58      </div>
59    </div>
60   <h2 class="about-title fade-in-bottom flex font-title animate" id="about">ABOUT</h2>
61    <div class="about-inner flex">
62      <div class="about-inner-items flex">
63        <div class="about-img"></div>
64        <div class="about-intro">
65          <ul>
66            <li>INTRO</li>
67            <li>ABOUT</li>
68            <li>ME</li>
69          </ul>
70          <div class="about-name">
71            <ul>
72              <li>Hellow!</li>
73              <li>I'm TMTN</li>
74            </ul>
75          </div>
76          <div class="about-carrier">
77            <ul>
78              <li>Lorem ipsum dolor sit amet, consectetur adip</li>
79              <li>Lorem ipsum dolor sit amet, consectetur adip</li>
80              <li>Lorem ipsum dolor sit amet, consectetur adip</li>
81              <li>Lorem ipsum dolor sit amet, consectetur adip</li>
82            </ul>
83          </div>
84        </div>
85        <div class="about-circle animate-about"></div>
86      </div>
87    </div>
88  </body>
89</html>

CSS
1/* <====== 全体共通 ======> */
2
3* {
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7}
8
9html {
10  scroll-behavior: smooth;
11  font-size: 16px;
12}
13
14p {
15  line-height: 2rem;
16  font-size: 0.875rem;
17}
18
19ul li {
20  list-style: none;
21  padding: 0.5rem;
22}
23
24a {
25  text-decoration: none;
26  color: #fff;
27}
28
29h2 {
30  font-size: 2rem;
31}
32
33.flex {
34  display: flex;
35  justify-content: center;
36  align-items: center;
37}
38
39.font-title {
40  font-family: "Caveat", cursive;
41}
42
43/* <====== 変数 ======> */
44
45$main-bg-color: rgba(102, 89, 89, 0.281);
46$main-color-w: rgb(255, 255, 255);
47$main-color-b: rgb(0, 0, 0);
48
49/* <====== nav-header ======> */
50
51.nav-inner {
52  width: 100%;
53  height: 4rem;
54  background-color: rgba(255, 255, 255, 0.719);
55  justify-content: space-around;
56  padding: 3rem;
57  position: fixed;
58  top: 0;
59  z-index: 1;
60
61  .nav-title {
62    width: 20rem;
63    flex-direction: column;
64
65    .nav-main-title {
66      font-size: 2rem;
67    }
68    .nav-sub-title {
69      font-size: 1rem;
70      margin-left: 1rem;
71    }
72  }
73
74  .nav-header-menu {
75    width: 30rem;
76    flex-direction: column;
77
78    .nav-sns-menu ul {
79      width: 38%;
80      display: flex;
81      justify-content: space-between;
82      padding-left: 1rem;
83    }
84  }
85}
86
87.nav-item a {
88  color: $main-color-b;
89  font-weight: bold;
90}
91
92/* <====== main-header ======> */
93
94.main-header-inner {
95  width: 100%;
96  height: 40rem;
97  margin-top: 4rem;
98
99  .main-header-items {
100    width: 80%;
101    height: 32rem;
102    position: relative;
103
104    .main-header-item-box-a {
105      width: 80%;
106      height: 19rem;
107      background-color: $main-color-b;
108      position: absolute;
109      bottom: 4rem;
110    }
111
112    .main-header-item-box-b {
113      width: 30%;
114      height: 10rem;
115      background-color: rgba(228, 222, 222, 0.753);
116      position: absolute;
117      bottom: 1rem;
118      right: 2rem;
119      z-index: -1;
120    }
121
122    .main-header-item-font {
123      color: $main-color-w;
124      position: absolute;
125      bottom: -7rem;
126      left: -6rem;
127      font-size: 21rem;
128    }
129
130    .main-header-item-img {
131      width: 51%;
132      height: 21rem;
133      background-image: url(../img/MainImg.jpg);
134      background-size: cover;
135      box-shadow: 0.5rem -0.5rem 1rem;
136      position: absolute;
137      right: 0;
138    }
139
140    .main-header-item-skill {
141      width: 25rem;
142      height: 5rem;
143      position: absolute;
144      color: $main-color-w;
145      top: 10rem;
146      left: 1rem;
147      line-height: 2rem;
148      font-size: 0.875rem;
149
150      ul li {
151        padding: 0;
152      }
153    }
154  }
155}
156
157/* <====== about ======> */
158
159h2#about {
160  padding-top: 11rem;
161  margin-top: -5rem;
162}
163
164.about-inner {
165  width: 100%;
166  height: 30rem;
167
168  .about-inner-items {
169    width: 90%;
170    height: 30rem;
171    justify-content: space-around;
172    position: relative;
173
174    .about-img {
175      width: 350px;
176      height: 350px;
177      background-image: url(../img/AboutImg.jpg);
178      background-size: cover;
179      border-radius: 50%;
180      border: 3px solid $main-bg-color;
181    }
182
183    .about-intro ul li {
184      padding: 0;
185    }
186    .about-name {
187      padding: 1rem 0;
188
189      ul li {
190        font-size: 2rem;
191        font-weight: bold;
192      }
193    }
194
195    .about-carrier ul li {
196      line-height: 2rem;
197      font-size: 0.875rem;
198    }
199
200    .about-circle {
201      width: 15rem;
202      height: 15rem;
203      border-radius: 50%;
204      background-color: $main-bg-color;
205      position: absolute;
206      right: 0;
207      bottom: 0;
208    }
209  }
210}
211
212/* <====== Media Queries======> */
213
214$breakpoint-pc: 1440px;
215$breakpoint-tablet: 1024px;
216$breakpoint-mobile: 600px;
217
218@mixin pc {
219  @media (max-width: ($breakpoint-pc)) {
220    @content;
221  }
222}
223@mixin tab {
224  @media (max-width: ($breakpoint-tablet)) {
225    @content;
226  }
227}
228@mixin sp {
229  @media (max-width: ($breakpoint-mobile)) {
230    @content;
231  }
232}
233
234/* <====== 全体共通 ======> */
235
236html {
237  @include tab {
238    font-size: 13px;
239  }
240  @include sp {
241    font-size: 8px;
242  }
243}
244
245.nav-list {
246  @include pc {
247    display: flex;
248  }
249  @include tab {
250    display: flex;
251  }
252}
253
254/* <====== about ======> */
255
256.about-title {
257  @include sp {
258    margin-bottom: 2rem;
259  }
260}
261
262.about-img {
263  @include pc {
264    width: 350px;
265    height: 350px;
266  }
267  @include tab {
268    width: 300px;
269    height: 300px;
270  }
271  @include sp {
272    width: 200px;
273    height: 200px;
274  }
275}
276
277.about-intro {
278  @include tab {
279    width: 45%;
280  }
281  @include sp {
282    width: 45%;
283  }
284}
285
286/* <====== main-header ======> */
287
288.main-header-item-font {
289  @include sp {
290    left: -4rem;
291    font-size: 17rem;
292  }
293}
294

試したこと

「ビューポートの確認」と「メディアクエリの画面幅の確認」

Lhankor_Mhy

2021/02/02 04:57

mixinもご提示ください。

Lhankor_Mhy

2021/02/02 04:58

すみません、見落としていました。失礼しました。

Lhankor_Mhy

2021/02/02 05:03 編集

ご提示のコードを試してみましたが、scroll-behavior: smooth; は打ち消されませんでした。つまり、問題が再現しませんでした。ご提示いただいていない部分に原因があると思われます。

Lhankor_Mhy

2021/02/02 05:07

あ、いや、違うのかな？ html { scroll-behavior: smooth; font-size: 16px; } は関係なくて、その他の要素のルールのプロパティが効いていない、とかそういうことですか？

Lhankor_Mhy

2021/02/02 05:09

そういうことみたいですね。問題を把握しました。

TMTN

2021/02/02 05:11

おっしゃる通りです。そのほかの要素のプロパティが効かないてす・・例えば、aboutと作っている要素の中に、画像と説明を記述しているのですが、その画像をスマホとタブレットでそれぞれ大きさを変えたいのですが、変わらな状況です。

TMTN

2021/02/02 05:24

試してみましたが、やはり適用されないようです。 ChromeでCSSのところに横線が入ってメディアクエリが適用されてないようなんですよね。。

Lhankor_Mhy

2021/02/02 05:33 編集

自明かと思いましたので書きませんでしたが、回答のコードは一部の一例であって、全部のコードをそのように書き直さなくてはならない、という意味なのですが、伝わっていますでしょうか。

TMTN

2021/02/02 05:37

そういうことですね。大変申し訳ございません。すべて書き直して試してみます。

Lhankor_Mhy

2021/02/02 05:39

いえ、それは私が間違っていた場合に無駄足なので、一部を変更して、その部分が想定通りになっているかどうかを確認した方がいいのではありませんか？

TMTN

2021/02/02 05:40

一部変更して既に試してみましたが、それで変更がされませんでした。。

Lhankor_Mhy

2021/02/02 05:45

https://jsfiddle.net/Lhankor_Mhy/wu4fngma/ サンプルを作成しました。当方の環境ですと、.main-header-item-font の left は -4rem になっている（メディアクエリが効いている）のですが、TMTNさんの環境ではいかがですか？

TMTN

2021/02/02 08:30

すいません。用事で返事遅くなりました。メディアクエリは当方の環境でも効いておりました。崩れてしまった箇所を更に調整をしたいのですが、そちらが反映されないんですよね・・

Lhankor_Mhy

2021/02/02 08:48 編集

「崩れてしまった箇所」というのがどこなのかわかりませんので、なんとも申し上げられませんが…… もし、さらに回答を求めているのであれば、問題をもう少し詳しく説明した方がいいかもしれません。もう回答を求めていないのであれば、自己解決の処理をお願いします。

TMTN

2021/02/02 08:52

申し訳ございません。上記でも申し上げたように「about」と作っている要素の中に、 Lhankor様のサンプルにもありますように画像と説明を境に記述しているのですが、その画像は「px」表記で記述している為か固定されており、画面幅を変えてもサイズが変化しません・・・

Lhankor_Mhy

2021/02/02 08:54

そこはサンプルでは触っていないので、もちろんそのままになっていますが…… どういうところがわからないのでしょうか？　回答と同様の方法ではダメでしたか？

Lhankor_Mhy

2021/02/02 09:01

繰り返しになりますが、回答は一部（.main-header-item-font）だけしか修正していませんから、他の部分はそのままになっています。ですので、サンプルでもそのままになっています。なので、他の部分のスタイルが反映されないのは当方の意図通りです。つまり、「他の部分は自分で同様にやってくださいね」ということなんですが、伝わっていますか？

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

回答2件

自己解決

SCSSで記述し、CSS上入れ子で記述されていましたが、メディアクエリ上は入れ子で指定せずに
クラス要素に対して変更点を記述していた為、適用されませんでした。

以下のように記述すれば解決しました。

Q.about-imgの画像を画面幅を変えた時にCSSを適用させたい。

✖誤った例

.about-img {
@include pc {
width: 350px;
height: 350px;
}
@include tab {
width: 300px;
height: 300px;
}
@include sp {
width: 200px;
height: 200px;
}
}

〇正しい例

.about-inner.about-inner-items.about-img {
@include pc {
width: 350px;
height: 350px;
}
@include tab {
width: 300px;
height: 300px;
}
@include sp {
width: 200px;
height: 200px;
}
}

投稿2021/02/04 10:47

TMTN

総合スコア53

詳細度の問題です。
以下のようにしてみてください。

css
1    .main-header-item-font {
2      color: $main-color-w;
3      position: absolute;
4      bottom: -7rem;
5      left: -6rem;
6      font-size: 21rem;
7      @include sp {
8        left: -4rem;
9        font-size: 17rem;
10      }
11    }