レスポンシブが効いてない原因がわかりません。

responsive.cssの.naviに!importantを書いてもダメでした。
Googleの検証画面では、下ように表示されています。

コードは以下の通りです。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>山岳環境研究室</title>
6		<meta name="viewpoint" content="width=device-width, initial-scale=1">
7		<link rel="stylesheet" href="common.css">
8		<link rel="stylesheet" href="index.css">
9		<link rel="stylesheet" href="responsive.css">
10		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300" rel="stylesheet">
11	</head>
12	<body>
13		<header>
14			<div class="header-left">
15				<img src="image/c4b8a8a39852b9e6ada1f21c7efb50db0_4620693218554957477_200127_0001.jpg" alt="山岳環境研究室" class="header-logo"> 
16				<h1 class="header-title">山岳環境研究室</h1>
17			</div>                                                                   
18		</header><!-- /header -->
19		<div class="top"></div>		
20		<div class="navi" id="global-nav">
21			<div class="menu home">
22				<a href="index.html">ホーム</a>
23			</div>
24			<div class="menu research">
25				<a href="research.html">研究</a>		
26			</div>
27			<div class="menu achievement">
28				<a href="achievement.html">実績</a>
29			</div>
30			<div class="menu access">
31				<a href="access.html">アクセス</a>
32			</div>
33			<div class="menu gallery">
34				<a href="gallery.html">ギャラリー</a>
35			</div>
36		</div>
37	</body>
38</html>

↓common.css

css
1@charset "utf-8";
2*{
3    margin:0;
4    padding:0;
5}
6body{
7    width:960px;
8    margin:0 auto;
9    letter-spacing: 1.5px;
10    }
11header{
12    height:90px;
13    background-color:rgba(34, 49, 52, 0.9);
14    border-bottom:1px solid #CCCCCC;
15}
16.header-left{ 
17    display:flex;
18}
19.header-logo{
20    height:90px;
21    display:inline-block;
22    margin-left:10px;
23}
24.header-title{
25    color:white;
26    margin-top:30px;
27    margin-left:4px;
28    font-family:'Alegreya Sans SC', sans-serif;
29    font-size:25px;
30}
31.navi{
32    height:55px;
33    background-color:rgba(34,49,52,0.9);
34    display:inline-block;
35    width:100%;
36    display:flex;
37    border-top:1px solid #CCCCCC;
38    border-bottom:1px solid #CCCCCC;
39}
40.fixed {
41  position:sticky;
42  width: 960px;
43  top: 0;
44  z-index: 1000;
45}
46.menu{
47    border-left:1px dashed white;
48    height:55px;
49    line-height:55px;
50    width:20%;
51}
52.menu:hover{
53        background-color:rgba(73,104,110,0.9);
54        transition:background-color 0.5s;
55    }
56.menu a{
57    color:white;
58    display:inline-block;
59    width:100%;
60    text-align:center;
61    text-decoration:none;
62}
63.home{
64    border-left:none;
65}

↓responsive.css

css
1@charset "utf-8";
2@media (max-width:670px){
3	.menu{
4		height:80px ;
5	}
6}

よろしくお願いします。

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

回答4件

ベストアンサー

HTML
1<meta name="viewpoint" content="width=device-width, initial-scale=1">
2```↓
3```HTML
4<meta name="viewport" content="width=device-width, initial-scale=1">

投稿2020/03/27 17:12

kei344

総合スコア69400

reo_fukkase

2020/03/28 05:19

私の不注意でした、ありがとうございました！

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

レスポンシブが効いてない原因がわかりません。

ナビゲーションの横幅がはみ出してしまう、という問題だと認識しました。
こちらでいかがでしょうか?

CSS
1@media screen and (max-width: 960px) {
2  body {
3    width: auto;
4  }
5}

bodyにwidth: 960px;が指定されているので、画面幅が960pxを下回ると横幅ははみ出ます。

「レスポンシブが効いてない」というのが、何を指しているのかがわからないので勘で追記します。

「responsive.css」に書いた記述が何一つ効かない

responsive.cssを読み込めていない可能性があります。
responsive.cssで、bodyに関する以下のような記述を追加してみてください。
bodyの背景色が赤にならなければ、「responsive.css」を読み込めていないので
「レスポンシブが効いてない」状態になります。

CSS
1@charset "utf-8";
2body {
3    background: #f00; /* こちらを追加 */
4}
5@media screen and (max-width: 670px) {
6    /* 省略 */
7}

画面幅を狭めていっても、レスポンシブが効かない

画面幅を、十分に狭めきれていない可能性もあります。
「画面幅670px」についてのreo_fukkaseさんのサイズ感がズレているかもしれないので、
以下のようにbodyに背景色赤の指定をしてブラウザの限界まで画面幅を狭めてみてください。

このとき、ブラウザの表示設定で縮小表示をしている場合は「等倍」など標準の設定に戻してください。

@charset "utf-8";

@media screen and (max-width: 670px) {
    body {
        background: #f00; /* こちらを追加 */
    }
}

画面幅が670px "以上" のときレスポンシブを効かせたい

「画面幅が670px以下」ではなく「画面幅が670px以上」のとき、height: 80px;にしたいのであれば、「min-width」を使ってください。

CSS
1/* @media (max-width: 670px) { */
2@media screen and (min-width: 670px) {

投稿2020/03/27 15:23

編集2020/03/28 02:07

new1ro

総合スコア4528

reo_fukkase

2020/03/27 16:42 編集

やはり変化がありませんでした。検証画面のSourcesでは、私が投稿雨した一枚目の画像のようにしっかり入力したものが反映されるのですが、Elementsではどれも表示されていません。font-sizeの変更も試してみましたが、それも同じような状態で効きませんでした。

hatena19

2020/03/28 01:23

@media (max-width:670px) の部分は、画面幅を670px以下にしないとElementsには現れませんよ。

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

.menuの高さは変わっていますが、親(.navi)が変わってないのが原因ですね。

css
1@media screen and (max-width:670px){
2   .navi, .menu{
3        height: 80px;
4    }
5}

ヘッダー、ナビゲーションが画面からはみだすのか問題なら、

css
1body{
2  max-width: 960px; /* width → max-width */
3  margin:0 auto;
4  letter-spacing: 1.5px;
5}

ただ、直接 body に幅を設定するより、なんらかのラッパーで囲んでそれに幅を設定したほうがいいと思います。

投稿2020/03/26 20:53

編集2020/03/28 01:12

hatena19

総合スコア33699

reo_fukkase

2020/03/27 15:09

教えていただいた通りに変更しましたが、変わりありませんでした。

hatena19

2020/03/28 01:21

https://codepen.io/hatena19/pen/zYGydMP 上記サンプルで画面幅が670px以下になるとナビゲーションの高さが 55pxから80pxに変わると思いますが、変わりませんか。期待していることはこれとは違うのですか。期待している「レスポンシブ」とは具体的になんでしょうか。

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

@media screen and (max-width:670px){
    .menu{
        height:80px ;
    }
}

でいかがですか？

投稿2020/03/26 15:27

annaPanda

総合スコア130

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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