max-wid600pxの時所々動きません。（例えばpage-titleクラスのfont-sizeやpost-dateクラスのfont-sizeやwidth,heightなど）ブラウザーはクロムです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>WCB Cafe</title>
7  <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8  <meta name ="viewport" content="width=device-width,initial-scale =1">
9  <link rel ="stylesheet" href="news.css">
10  <link rel ="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11  <link href ="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
12  <link rel ="icon" type="image/png" href="images/favicon.png"> 
13</head>
14  
15<div id ="news" class="big-bg">
16    <header class="wrapper">
17      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WVBカフェホーム"></a></h1>
18      <nav>
19        <ul class="main-nav" >
20          <li><a href="news.html">news</a></li>
21          <li><a href="menu.html">menu</a></li>
22          <li><a href="contact.html">contact</a></li>
23        </ul>
24      </nav>
25
26    </header>
27    <div class="wrapper">
28      <h2 class="page-title">news</h2>
29    </div>
30    
31    
32</div>
33<div class="news-contents wrapper">
34  <article>
35    <header class="post-info">
36      <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
37      <p class="post-date">12/27<span>2020</span></p>
38      <p class="post-cat">カテゴリー:お店の紹介</p>
39
40    </header>
41    <img src="images/wall.jpg" alt="店内の様子">
42    <p>体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。美味しいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。美味しいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。</p>
43    <p>体に優しい自然食を提供する、WCB CAFE。</p>
44  </article>
45  <aside>
46    <h3 class="sub-title">カテゴリー</h3>
47    <ul class="sub-menu">
48      <li><a href="#">お店の紹介</a></li>
49      <li><a href="#">期間限定メニュー</a></li>
50      <li><a href="#">イベント</a></li>
51      <li><a href="#">お客様の会話</a></li>
52
53    </ul>
54    <h3 class="sub-title">このお店について</h3>
55    <p>体に優しい自然食を提供する、WCB CAFE。無添加食材を利用したメニューが特徴です。おいしいブレンドコーヒーとオーガニックフードで体の内側から癒やされてください。</p>
56  </aside>
57</div>
58<footer>
59  <div class="wrapper">
60    <p><small>&copy; 2019 Manabox</small></p>
61  </div>
62</footer>
63
64</body>
65</html>

css
1@charset "utf-8";
2
3body {
4  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", sans-serif;
5  line-height:1.7;
6  color:#432;
7}
8@media (max-width: 600px) {
9  .news-contents {
10    flex-direction :column;
11
12  }
13
14  .page-title {
15    margin-top:30px;
16    font-size:10px;
17
18  }
19  aside {
20    margin-top:60px;
21
22  }
23  .post-info {
24    margin-bottom:30px;
25  }
26  .post-date {
27    width:70px;
28    height:70px;
29    font-size:1rem;
30  }
31  
32
33}
34
35html {
36  font-size:100%;
37}
38img {
39  max-width:100%;
40}
41
42a {
43  text-decoration:none;
44}
45header {
46  display:flex;
47  justify-content:space-between;
48  
49}
50.wrapper {
51  max-width:1100px;
52  padding:0 4%;
53  margin:0 auto;
54}
55.logo {
56  width:210px;
57  margin-top:14px;
58}
59
60.main-nav {
61  display:flex;
62  font-size:1.25rem;
63  text-transform:uppercase;
64  margin-top:34px;
65  list-style:none;
66  text-align:right;
67}
68
69.main-nav li {
70  margin-left:36px;
71}
72.main-nav a {
73  color:#432;
74}
75.main-nav a:hover {
76  color:#0bd;
77}
78/*  */
79
80
81.home-content {
82  margin-top:10px;
83  text-align:center;
84  margin-top:10%;
85}
86.home-content p {
87  font-size:1.125rem;
88  margin:10px 0 42px;
89
90}
91.page-title {
92  font-size:5rem;
93  text-transform:uppercase;
94  font-family:'Philosopher', serif;
95  font-weight:normal;
96  display:block;
97  
98
99}
100
101.button:hover {
102  background:#0090aa;
103}
104
105.big-bg {
106  background-size:cover;
107  background-position:center top;
108  background-repeat:no-repeat;
109}
110#home {
111  background-image:url(images/main-bg.jpg);
112  min-height:100vh;
113  /* background-color:#0bd; */
114  /* background-blend-mode:hard-light; */
115 
116  /* background-blend-mode:luminosity; */
117
118}
119#home .page-title {
120  text-transform:none;
121
122}
123.button {
124  font-size:1.375rem;
125  background:#0bd;
126  color:#fff;
127  border-radius:5px;
128  padding:18px 32px;
129}
130.button:hover {
131  padding:#0090aa;
132
133}
134
135#news {
136  background-image:url(images/news-bg.jpg);
137  height:270px;
138  margin-bottom:40px;
139  
140}
141#news .page-title {
142  text-align:center;
143}
144.post-info {
145  position:relative;
146  padding-top:4px;
147  margin-bottom:40px;
148  display:block;
149}
150.post-date {
151  background-color:#0bd;
152  width:100px;
153  height:100px;
154  color:#fff;
155  position:absolute;
156  border-radius:50%;
157  top:0;
158  padding-top:10px;
159  text-align:center;
160  font-size:1.625rem;
161
162}
163.post-date span {
164  font-size:1rem;
165  border-top:1px rgba(255,255,255,.5) solid;
166  padding-top:6px;
167  display:block;
168  width:60%;
169  margin:0 auto;
170}
171.post-title {
172  font-size:2rem;
173  font-family:"Yu Mincho", "YuMincho", serif;
174  font-weight:normal;
175}
176.post-title,
177.post-cat {
178  margin-left:120px;
179  
180}
181.post-cat {
182}
183article {
184  width:74%;
185}
186article img {
187  margin-bottom:20px;
188}
189article p {
190  margin-bottom:1rem;
191}
192aside {
193  width: 24%;
194}
195aside p {
196  padding:12px 10px;
197}
198.sub-title {
199  border-bottom:2px solid #0bd;
200  font-size:1.375rem;
201  font-weight:normal;
202  padding:0 8px 8px;
203}
204.sub-menu   {
205  list-style:none;
206  margin-bottom:60px;
207}
208.sub-menu li {
209  border-bottom:2px solid #eee;
210}
211.sub-menu a {
212  padding:10px;
213  display:block;
214  color:#432;
215}
216.sub-menu a:hover {
217  color:#0bd;
218}
219.news-contents {
220  display:flex;
221  justify-content:space-between;
222  margin-bottom:50px;
223  
224}
225footer {
226  background:#432;
227  text-align:center;
228  padding:26px 0;
229}
230
231footer p {
232  color:#fff;
233  font-size:0.875rem;
234}

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

回答1件

ベストアンサー

仮に、このようなCSSがあったとします。

css
1@media (max-width: 600px) {
2  .media-query-first {
3    color: red;
4  }
5}
6
7.media-query-first {
8  color: black;
9}

ビューポートの幅が610pxの時、このCSSは次のCSSと同義です：

css
1.media-query-first {
2  color: black;
3}

ここまでは想定の通りですね。

しかしメディアクエリ（@media ...）には詳細度（優先度）が存在しません。ビューポート幅が600pxの時、このCSSは次のCSSと同義です：

css
1.media-query-first { // --+
2  color: red;        //   |
3}                    //   +-- 詳細度が同じであるため、下にあるcolor: black;が最後に適用される
4                     //   |
5.media-query-first { // --+
6  color: black;
7}

これに対応するため、優先したいメディアクエリを下に移動します：

css
1.media-query-last {
2  color: black;
3}
4
5@media (max-width: 600px) {
6  .media-query-last {
7    color: red;
8  }
9}

ビューポート幅が600pxの時、このCSSは次のCSSと同義です：

css
1.media-query-last { // --+
2  color: black;     //   |
3}                   //   +-- 詳細度が同じであるため、下にあるcolor: red;が最後に適用される
4                    //   |
5.media-query-last { // --+
6  color: red;
7}