【レスポンシブデザイン】スマホ版、タブレット版の切り替えがうまくいきません。なぜでしょうか？

前提・実現したいこと

レスポンシブデザインがうまくきかないことについて。
「レスポンシブデザインがきかない」というと、表現の仕方が誤解を生みそうですが、厳密にはうまくcssが切り替わらず、例えばスマホ版で文字を16pxにしたいと指示を出すと、スマホ版でもタブレット版でも16pxが適用されてしまうといった具合です。

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

後に書いたものもしくは優先度の高いもの、どちらか一方の通った指示がスマホ版タブレット版両方に適用されてしまう。

該当のソースコード

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

該当のソースコード（style.css）

CSS
1@charset "UTF-8";
2@mata charset="utf-8";
3/*共通レイアウト*/
4html {
5  font-family: "Helvetica", "YuGothic";
6  text-align: center;
7  line-height: 1.5;
8  font-size: 16px;
9}
10
11section {
12  padding: 80px 0;
13}
14
15wrapper {
16  max-width: 800px;
17}
18
19img {
20  width: 100%;
21  vertical-align: bottom;
22}
23
24h2 {
25  color: #E47B12;
26  font-size: 30px;
27  padding-bottom: 50px;
28}
29
30/*ヘッダー*/
31.header-top {
32  background-color: #E47B12;
33}
34.header-top h1 {
35  color: #fff;
36  padding: 20px 0;
37  font-size: 40px;
38}
39
40/*メインビジュアル*/
41.main-visial {
42  background-image: url(../images/kv-img.jpg);
43  background-size: cover;
44  background-position: center;
45  padding: 155px 0;
46}
47.main-visial .kv-copy {
48  color: #fff;
49  font-size: 30px;
50  line-height: 45px;
51}
52
53/*はじめに*/
54.section-text {
55  padding: 0 20px;
56  /*末端に文字がくっつかないようにする*/
57  margin: auto;
58  /*要素そのものはまんなか寄せ*/
59  max-width: 800px;
60  /*その範囲（折り返し）を決める*/
61  text-align: left;
62  /*そのなかで文字を左寄せ*/
63  line-height: 24px;
64}
65
66/*心構え*/
67.bg-gray {
68  background-color: #f0f0f0;
69}
70
71.atitude-container li {
72  font-size: 16px;
73  padding-bottom: 15px;
74}
75
76/*学習すること*/
77.content-wrapper {
78  max-width: 800px;
79  /*その範囲（折り返し）を決める*/
80  margin: 0 auto 50px;
81  /*左右に50の余白を取る*/
82}
83.content-wrapper .content-container {
84  display: flex;
85  justify-content: space-between;
86}
87.content-wrapper .content-container .content-item {
88  padding: 0 40px;
89  padding-bottom: 20px;
90  /*ボタンとの距離 各コンテンツ距離*/
91}
92.content-wrapper .content-container .content-item p {
93  font-weight: bold;
94  text-align: left;
95}
96
97/*ボタン*/
98.btn {
99  background-color: #E47B12;
100  text-decoration: none;
101  color: #fff;
102  padding: 12px 40px;
103}
104
105/*フッター*/
106footer {
107  background-color: #222222;
108}
109footer p {
110  font-size: 12px;
111  color: #fff;
112  padding: 15px 0;
113}

該当のソースコード(responsive.css)

css
1/*レスポンシブ　タブレット版*/
2
3@media screen and (max-width:1100px) {
4
5 /*はじめに　テキスト部分*/
6 html section .section-text p {
7  font-size: 3vw;
8  line-height: 4.5vw;
9 }
10
11 /*はじめに*/
12 body .header-top h1 {
13  font-size: 8vw;
14 }
15
16 /*キャッチコピー部*/
17 main .main-visial .kv-copy {
18  font-size: 4vw;
19 }
20
21 /*学習の心構え　テキスト部*/
22 section .atitude-container .atitude-item {
23  font-size: 4vw;
24  line-height: 4.5vw;
25 }
26
27 .content-wrapper .content-container .content-item {
28  padding: 0 40px;
29  padding-bottom: 20px;
30 }
31
32
33 .main-visial {
34  font-size: 8vw;
35 }
36
37 .main-visial .kv-copy {
38  line-height: 6.2vw;
39 }
40
41 .content-container .content-item img {
42  width: 40%;
43  padding: 0 20px;
44 }
45
46
47
48 /*.content-wrapper .content-contanier .content-item p {
49  margin: 0 20 auto;
50  font-size: 7vw;
51  color: red;*/
52
53 /*文字サイズが変化しない*/
54 section .content-wrapper .content-container .content-item p {
55  font-weight: bold;
56  text-align: left;
57  padding-left: 30%;
58  font-size: 2vw
59 }
60
61 section .btn {
62  background-color: #E47B12;
63  text-decoration: none;
64  color: #fff;
65  padding: 1.2vw 3vw;
66  font-size: 4vw;
67 }
68
69 /*ボタン部*/
70}
71
72
73
74/*レスポンシブ　スマホ版*/
75@media screen and (max-width:768px) {
76
77 .header-top h1 {
78  font-size: 6vw;
79 }
80
81 .main-visial .kv-copy {
82  font-size: 5.5vw;
83 }
84
85 /*はじめに　テキスト部分*/
86 section .section-text p {
87  font-size: 4vw;
88  line-height: 4.5vw;
89 }
90
91 /*学習の心構え　テキスト部*/
92 .atitude-container .atitude-item {
93  font-size: 3vw;
94  line-height: 4.5vw;
95 }
96
97
98
99
100 .main-visial {
101  padding: 11.5vw;
102 }
103
104 .content-wrapper .content-container {
105  display: block;
106 }
107
108 /* .content-item {
109  margin: 0 auto 20px;
110 }
111*/
112 .content-contanier .content-item img {
113  width: 80%;
114  padding: 0 20px;
115 }
116
117 /*.content-contanier .content-item p {
118  padding-left: 12%;
119  font-size: 5vw;
120 }*/
121 .content-wrapper .content-container .content-item p {
122  font-weight: bold;
123  text-align: left;
124  padding-left: 30%;
125  font-size: 4vw
126 }
127
128 .btn {
129  background-color: #E47B12;
130  text-decoration: none;
131  color: #fff;
132  padding: 1.2vw 3vw;
133 }
134}
135
136
137
138
139
140
141}
142
143
144
145}
146

該当のソースコード(その他)

その他使用しているコードは

・リセットcss
・変数を設定しているcdd(カラーの指定のみ)

ですが、今回の問題点とは関係ないとみていますので、必要に応じて提示させていただきたく思います。
なお、どう間違ったのかの痕跡のため不要なcssもコメントアウトで残しておりますが、ご了承ください。

試したこと

・メディアクエリ自体が聞いていないのか色を変えるなどしてみる。
→結果、色は変えられました。メディアクエリそのものが聞いていない、viewportの設定ができていないことではなさそうです。ただし、どちらか片方に指示をするも、スマホ版、タブレット版ともにきいてしまいます。
（おそらく、後に書いたもののもしくは優先度の高いものが読み込まれるとのことで、後に書いたものの片方しか読み込まれない、あるいは優先度を上げた方の片方しか読み込まれないといったいずれも片方の指示がスマホ版、タブレット版両方に反映されてしまいます。）

・後から読み込まれるものが優先されるなら、適用したいが後から読み込まれない方の優先度をそれ以上にあげられたら適用される？
→普通に後から読み込まれる方が強いのか、打ち消されました。個人的にはタブレットの最大値1100pxまでの範囲に、スマホの最大値768pxも包括されているからかなと思いましたが、メディアクエリのmax-widthの設定は他でも同様にされているのでそこではないのかなという半信半疑な状態です。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

mix-maxで挟んでみての現在の状況

ちなみにhtml内でビューポートの前にレスポンシブ.cssを読み込んでしまっている件に関しては、手元のcssにおいては修正済みでございます。
混乱を避けるため、上記の提示部はそのままにしておきます。

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

回答2件

基本的に条件を満たす場合、詳細度の高いもの、後から書いたものが優先で効きます。
CSS詳細度(MDN Web dDocs)
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編

また、

css
1@media screen and (min-width:768px) and ( max-width:1024px) {
2/* 略 */
3}

という書き方もできますがそれはご存じですか。指定した範囲内にのみスタイルが効きます。
レスポンシブの基本、メディアクエリの書き方(それからデザイン)

あと、直接関係ないですがresponsive.cssの最後の}2つはおそらく不要かと思います。（転記の際のミスでしょうか）

加えて、@media screen and (max-width:1100px) {}内のコメントアウトしてある/*.content-wrapper .content-contanier .content-item p {/*略*/　の中身が効かないのが問題だとしたらクラス名のスペルミスが原因だと思います。
誤.content-contanier→正.content-container

投稿2021/01/21 07:43

dit.

総合スコア3235

mitrasi

2021/01/21 09:09 編集

>dit.様ご回答ありがとうございます！正直今回うまくいかなくなってからから優先順位や点数があることはしりましたが、一通りそういった記事はいくつか拝読させていただいております。今回の記事の紹介も勉強させていただきます。私の推測が正しければやはり指定範囲の問題で、min-maxではさめばとは思ったのですが、他サイト様ではmaxだけできいている例が多いので本来の原因は別にあるのではないかと考えております。とはいえ、皆様がおっしゃっているmin-maxではクローム環境で確認が取れているそうなのでひとまずもう一度やってみたいと思います。 }の過不足の件も、ご指摘ありがとうございます！手元のcssでは修正いたしました。コメントアウトのミスについてもご指摘ありがとうございます！

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

ベストアンサー

@media screen and (max-width:1100px)

↓

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

以上のようにCSSを適応する最少サイズを指定するのはいかがでしょうか。

※追記

投稿2021/01/21 07:26

編集2021/01/21 09:40

nyaozym

総合スコア34

mitrasi

2021/01/21 07:42

ご回答ありがとうございます！早速試してみましたが、変化ありませんでした???? 他サイト様ではmaxの指定だけでレスポンシブやっているようなので、できるのならmaxだけでやるにはどうしたらよいのかが知りたいです。わがまま言ってすみません????

nyaozym

2021/01/21 08:13

そうだったんですね。お力になれずに申し訳ございません。私の方でChromeを使用し検証したところ上記の変更で768px時点で文字サイズに変化があったことを最後にご報告させていただきます。

mitrasi

2021/01/21 08:45

>nyaozym様そうなんですね???? 私の判断では不安なので念のため他者に確認して頂いたのですが、私の指定方法が間違っていたのかもしれません。差し支えなかければどこにどのように指定したか教えていただけませんでしょうか？私はタブレット版の方のメディアクエリに以下のように致しました↓↓ @media screen and (min-width:769px)　and (max-width:1100px) {

nyaozym

2021/01/21 08:52

私も同様のコードを指定いたしました。出先のため取り急ぎ推測での回答にはなりますが、769px)とandの間が全角スペースになっているのが原因かもしれません。

mitrasi

2021/01/21 09:03

お忙しいところ、ありがとうございます！こちらへのコピペの際に全角入ってしまったようです。大変失礼いたしました。 ↓一応現在もう一度行ってみました↓ @media screen and (min-width:769px) and (max-width:1100px) {

nyaozym

2021/01/21 09:46

いただいたコードをコピペして試したところ問題なくレスポンシブになっておりました。キャッシュの問題の可能性がございますので、検証モードで更新ボタンを左クリックで長押し後に「キャッシュの消去とハード再読み込み」等をお試し下さい。

mitrasi

2021/01/21 09:54

ご回答ありがとうございます！＞追記の直接画面値を編集する方法に関してこちらの方法では確かに正しく分かれて表示されました。でもやはり通常のやり方でできないのがひっかかります（ご教授頂いている身でうだうだ言っててほんとに申し訳ないです????）＞キャッシュの可能性キャッシュの消去等は以前にも行いましたが念のため行ったところやはり変化ありませんでした????

nyaozym

2021/01/21 10:18

通常のやり方とは、上部のデバイスを選択する方法ということでしょうか。 ipadの横幅は768pxのため、スマホ用のレスポンシブをmax-width:767px、タブレットのレスポンシブをmin-width:768pxにするのはいかがでしょうか。 max-widthのみ指定の方法は、同じcssセレクタを適用する必要がありますので、タブレット側レスポンシブを例えば body .header h1 ↓ .header h1 以上のようにスマホとタブレットを同じセレクタにしてみましょう。

mitrasi

2021/01/21 10:42

ご回答ありがとうございます！ご指摘頂いた通り、スマホのmax-width:767pxにしましたら無事解決致しました！ちなみに、この方法でしたらmin-maxで挟まずとも正しく適用されました！きっとギリギリでダブっている範囲の値だったために、同じものがきいてしまっていたんですね???? 今日半日以上費やして苦戦していたので本当に感謝です！ありがとうございます！

nyaozym

2021/01/21 11:10

お力になれて良かったです。

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

あなたの回答