メディアクエリが適用されない

#問題点
メディアクエリが適用されません。
#試したこと
・開発者ツールにそもそもメディアクエリがない。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" type="text/css" href="style.css">
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div class="intro-wrapper">
10      <div class="intro-inner">
11        <h2>Sample theme #2</h2>
12        <p>THis is a sample WordPress theme for beginners.Check it out!</p>
13      </div>
14    </div>
15
16    <div class="photos">
17      <h3 class="text-center">Photo</h3>
18      <div class="pictures row clearfix">
19        <a class="col-4" href="#"><img src="img/aomori.jpg" alt="Loading_page"></a>
20        <a class="col-4" href="#"><img src="img/fukushima.jpg" alt="Loading_page"></a>
21        <a class="col-4" href="#"><img src="img/okinawa.jpg" alt="Loading_page"></a>
22        <a class="col-4" href="#"><img src="img/saga-_Okusu__in_Takeo-s.jpg" alt="Loading_page"></a>
23        <a class="col-4" href="#"><img src="img/shizuoka-Sand_Dunes_at_Nakatajima-s.jpg" alt="Loading_page"></a>
24        <a class="col-4" href="#"><img src="img/yamagata-Ginzan_Onsen-s.jpg" alt="Loading_page"></a>
25      </div>
26    </div>
27
28  </body>
29</html>
30

css
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" type="text/css" href="style.css">
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div class="intro-wrapper">
10      <div class="intro-inner">
11        <h2>Sample theme #2</h2>
12        <p>THis is a sample WordPress theme for beginners.Check it out!</p>
13      </div>
14    </div>
15
16    <div class="photos">
17      <h3 class="text-center">Photo</h3>
18      <div class="pictures row clearfix">
19        <a class="col-4" href="#"><img src="img/aomori.jpg" alt="Loading_page"></a>
20        <a class="col-4" href="#"><img src="img/fukushima.jpg" alt="Loading_page"></a>
21        <a class="col-4" href="#"><img src="img/okinawa.jpg" alt="Loading_page"></a>
22        <a class="col-4" href="#"><img src="img/saga-_Okusu__in_Takeo-s.jpg" alt="Loading_page"></a>
23        <a class="col-4" href="#"><img src="img/shizuoka-Sand_Dunes_at_Nakatajima-s.jpg" alt="Loading_page"></a>
24        <a class="col-4" href="#"><img src="img/yamagata-Ginzan_Onsen-s.jpg" alt="Loading_page"></a>
25      </div>
26    </div>
27
28  </body>
29</html>
30

css
1* , *::before , *::after {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7}
8
9/* --------------------------------
10 * イントロセクションCSS（Lesson1）
11 * -------------------------------- */
12
13.intro-wrapper {
14  height: 300px;
15  max-width: 1300px;
16  margin: 0 auto;
17  background-color: #fff;
18  position: relative;
19  top: 0px;
20  padding: 80px 0px 0px 25px;
21}
22
23.intro-inner {
24  width: 80%;
25}
26
27.intro-inner h2 {
28  font-size: 2.0rem;
29  display: block;
30}
31
32/* --------------------------------
33 * ギャラリーセクションCSS(Lesson2)
34 * -------------------------------- */
35img {
36  vertical-align: top;
37  transform: none;
38}
39
40a {
41  margin: 0;
42  text-decoration: none;
43}
44
45.photos h3 {
46}
47
48.row {
49  max-width: 1245px;
50  margin: 0 auto;
51}
52
53.clearfix::after {
54  content: "";
55  display: block;
56  clear: both;
57}
58
59.pictures a {
60  display: inline-block;
61}
62
63.pictures img {
64  width: 100%;
65  height: 300px;
66  transition: all 0.3s ease-out;
67}
68
69.col-4 {
70  width: 33.3%;
71  float: left;
72}
73
74.text-center {
75  text-align: center;
76}
77
78.pictures a:hover img {
79  opacity: 0.5;
80}
81
82/*reponsive*/
83
84 @media (max-width: 480px) {
85   .col-4 {
86     width: 100%;
87   }
88 }
89
90 @media (min-width: 480px) and (max-width: 767px) {
91   .col-4 {
92     width: 50%;
93   }
94 }
95

otamunote

2019/04/23 01:36

メディアクエリが反映されないというのは、.col-4に対するwidthのことですか？ chromeで確認する限りでは、見た目のレイアウト・デペロッパーツールともに反映を確認しました。 ivrpocari様の環境やブラウザでの見え方など、もう少し具体的に記載されると状況が分かりやすいかもしれません。

ivrpocari

2019/04/23 03:49

対象は、.col-4に対するwidthのことです。 Chromeのデベロッパーツールで確認しました。横幅を変えても、写真が横３列になったままです。どうしてでしょうか？

otamunote

2019/04/23 04:00

質問に送付いただいたコードは私の環境では問題ないので、該当URLやブレイクポイントごとのスクショなどがあると回答がいただきやすいかと思います。また質問は編集できますので、環境なども合わせて質問を編集で追加いただけますと幸いです。

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

回答1件

ベストアンサー

viewportを指定しましょう。

HTML
1<meta name="viewport" content="width=device-width,initial-scale=1">

【もう逃げない。HTMLのviewportをちゃんと理解する - Qiita】
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

投稿2019/04/23 04:13

kei344

総合スコア69407

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

メディアクエリが適用されない

関連した質問