CSSのレスポンシブについて

始めて質問させていただくので質問するにあたり至らぬ点があるかもしれませんがご了承ください。

プロゲートで学習したアウトプットも兼ねて自分でホームページを１から作成しております。

ある程度完成し、スマートフォンでも適切に表示されるようにレスポンシブのコードを書いているのですが、反映されません。

プロゲートのスライドなども確認したのですがどうしても出来ないのでどなたかご教授いただければ幸いです。

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

レスポンシブが反映されない
スマホ表示時にレイアウトが崩れる

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <title>NGIS</title>
7    <link rel="stylesheet" href="NGIS.css">
8    <link rel="stylesheet" href="responsive1.css">
9  </head>
10  <body>
11    <div class="header">
12      <div class="header-logo">
13        <a href="">
14        <img src="header-logo.png" alt="NGIS">
15        </a>
16      </div>
17    </div>
18    <div class="main">
19      <div class="main-logo">
20        <div class="container">
21          <h1>最高の４年間を</h1>
22          <h1>NGISと共に</h1>
23        </div>
24      </div>
25      <div class="main-list">
26        <ul>
27          <a href="">
28          <li class="btn about">NIGSについて</li>
29          </a>
30          <a href="">
31          <li class="btn detail">活動内容</li>
32          </a>
33          <a href="">
34          <li class="btn leaders">幹部紹介</li>
35          </a>
36          <a href="">
37          <li class="btn questions">Q&A</li>
38          </a>
39        </ul>
40      </div>
41    </div>
42    <div class="footer">
43
44    </div>
45  </body>
46</html>
47

CSS
1@media screen and (max-width:670px) {
2  .container h1{
3    font-size: 120px;
4  }
5}
6

CSS
1
2body{
3  font-style: normal;
4  margin: 0;
5  width: 100%;
6}
7
8li{
9  list-style: none;
10}
11
12ul{
13  padding: 0 40px;
14}
15
16a{
17  display: block;
18  text-decoration: none;
19}
20
21.header-logo{
22  text-align: center;
23}
24
25.header-logo:active{
26  opacity: 0.5;
27}
28
29.header-logo img{
30  width: 180px;
31  height: 83.875px;
32  margin-top: 10px;
33
34}
35
36.header{
37  width: 100%;
38  height: 100px;
39  padding: 20px;
40  background-color: white;
41  position: fixed;
42  z-index: 999;
43  margin: 0 auto;
44  top: 0;
45  left: 0;
46  box-shadow: 0px 5px #000000;
47}
48
49.main-logo{
50  height: 800px;
51  background-image: url(IMG_2917.JPG);
52  background-size: cover;
53  background-position: 50% 50%;
54}
55
56.container{
57  padding: 0px px;
58  margin-left: auto;
59  margin-right: auto;
60  margin-top: 140px;
61  height: 800px;
62  width: 100%;
63}
64
65.container h1{
66  text-align: center;
67  font-size: 200px;
68  color: white;
69  opacity: 0.7;
70  margin: 100px 0;
71  line-height: 400px;
72}
73
74.main-list li{
75  border: 2px solid #000000;
76  height: 300px;
77  padding: 40px;
78  margin-top: 60px;
79  color: rgba(0, 0, 0, 0.5);
80}
81
82.main-list li:active{
83  opacity: 0.7;
84}
85
86.btn{
87  font-size: 200px;
88  padding: 30px;
89  text-align: center;
90}
91
92.about{
93  background-image: url(IMG_3808.JPG);
94  background-size: cover;
95}
96
97.detail{
98  background-image: url(IMG_3805.jpg);
99  background-size: cover;
100}
101
102.footer{
103  height: 250px;
104  background-color: #000000;
105  margin-top: 150px;
106}
107

試したこと

・スタイルシートとレスポンシブでCSSを分けていたのをレスポンシブのコードをスタイルシートのファイルの中に書き込んだ。

・viewportについて検索→あまり理解できず。（viewportのコードについてはコピペしても問題ないと書いていたサイトのものをコピペして使いました。

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

コードはAtomで書いています。

使っているPCはWindowsです。

m.ts10806

2019/12/07 09:28

body内のhtmlも提示されないと「何も表示させてない」だけです。 CSSは何が影響するか分からないのでなるべく全て提示してください。もし長いようであれば現象が確認できる最小構成のコードを改めて作って提示してください。

m.ts10806

2019/12/07 09:35

質問は編集できますしコメント欄ではマークダウン使えません。あくまでこちらは「質問への追記修正依頼」です。質問を編集して返すのが通例です。

programist

2019/12/07 09:36

あ、ごめんなさい。質問を修正させていただきます。

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

回答2件

そもそもぱっとみたかんじ、ただのpxで指定してませんか。vw,vhで指定するか、メディアクエリを使ってないのに、レイアウトがレスポンシブで正しく表示される方がおかしくないですか。

投稿2019/12/07 11:10

taiyakix

総合スコア427

programist

2019/12/08 02:22

回答ありがとうございます。まだ初心者ですので今までpxで指定する方法しか知りませんでした。vw、vh指定の方法も調べながら修正しようと思います。ありがとうございました。

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

ベストアンサー

キャッシュの可能性もありますので、使用されているブラウザのキャッシュをクリアしてから確認するのも試してみてください。

responsive1.cssに下記を記述して、背景が赤くならないなら読み込まれていません。ファイル名などを確認しましょう。

CSS
1body{background-color:red;}

それの問題が無い場合、下記のように記述して、背景が赤くならないならメディアの指定が効いていないことになります。

CSS
1@media screen and (max-width:670px) {
2  body{background-color:red;}
3}

投稿2019/12/07 10:08

編集2019/12/07 10:08

kei344

総合スコア69407

programist

2019/12/07 11:14

回答ありがとうございます。 body{background-color:red;} では背景は赤くなったのですが @media screen and (max-width:670px) { body{background-color:red;} } では背景が変わりませんでした。メディアの指定が効いていないという点についてもう少し詳しく聞いてもよろしいでしょうか？

kei344

2019/12/07 12:01

@mediaの指定は入れ子↓になっていたりしませんよね？ @media screen and (max-width:670px) { @media screen and (max-width:670px) { body{background-color:red;} } } たとえば、 @media screen and (max-width:3000px) など数値を大きくしても変わりませんか？

programist

2019/12/07 14:53

入れ子にはなっていませんね。 @media screen and (max-width:3000px)では背景が赤くなりました。おそらくレスポンシブの反映の問題ではなく、そもそものレイアウトに問題があるような気がしてきました。明日CSSの値を見直してみたいと思います。質問文内にあるCSSに指摘点などがあればご教授いただければ幸いです。

kei344

2019/12/07 15:06

> 質問文内にあるCSSに指摘点既に回答で指摘があるように、大きいレイアウト部分（特にwidthとheight）でpxで固定するとレスポンシブ対応する時に困ることが多いです。

programist

2019/12/08 02:24

今回質問するまでpxで指定する方法しか知りませんでした。vw、vhで指定する方法につきましては自分で調べながら取り入れていきたいと思います。ありがとうございました。

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

あなたの回答