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

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

ただいまの
回答率

89.53%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 149

reo_fukkase

score 23

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山岳環境研究室</title>
        <meta name="viewpoint" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="common.css">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="responsive.css">
        <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="header-left">
                <img src="image/c4b8a8a39852b9e6ada1f21c7efb50db0_4620693218554957477_200127_0001.jpg" alt="山岳環境研究室" class="header-logo"> 
                <h1 class="header-title">山岳環境研究室</h1>
            </div>                                                                   
        </header><!-- /header -->
        <div class="top"></div>        
        <div class="navi" id="global-nav">
            <div class="menu home">
                <a href="index.html">ホーム</a>
            </div>
            <div class="menu research">
                <a href="research.html">研究</a>        
            </div>
            <div class="menu achievement">
                <a href="achievement.html">実績</a>
            </div>
            <div class="menu access">
                <a href="access.html">アクセス</a>
            </div>
            <div class="menu gallery">
                <a href="gallery.html">ギャラリー</a>
            </div>
        </div>
    </body>
</html>


↓common.css

@charset "utf-8";
*{
    margin:0;
    padding:0;
}
body{
    width:960px;
    margin:0 auto;
    letter-spacing: 1.5px;
    }
header{
    height:90px;
    background-color:rgba(34, 49, 52, 0.9);
    border-bottom:1px solid #CCCCCC;
}
.header-left{ 
    display:flex;
}
.header-logo{
    height:90px;
    display:inline-block;
    margin-left:10px;
}
.header-title{
    color:white;
    margin-top:30px;
    margin-left:4px;
    font-family:'Alegreya Sans SC', sans-serif;
    font-size:25px;
}
.navi{
    height:55px;
    background-color:rgba(34,49,52,0.9);
    display:inline-block;
    width:100%;
    display:flex;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
}
.fixed {
  position:sticky;
  width: 960px;
  top: 0;
  z-index: 1000;
}
.menu{
    border-left:1px dashed white;
    height:55px;
    line-height:55px;
    width:20%;
}
.menu:hover{
        background-color:rgba(73,104,110,0.9);
        transition:background-color 0.5s;
    }
.menu a{
    color:white;
    display:inline-block;
    width:100%;
    text-align:center;
    text-decoration:none;
}
.home{
    border-left:none;
}


↓responsive.css

@charset "utf-8";
@media (max-width:670px){
    .menu{
        height:80px ;
    }
}


よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/28 14:19

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

    キャンセル

0

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


でいかがですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

body{
  max-width: 960px; /* width → max-width */
  margin:0 auto;
  letter-spacing: 1.5px;
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/28 00:09

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

    キャンセル

  • 2020/03/28 10:21

    https://codepen.io/hatena19/pen/zYGydMP

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

    キャンセル

0

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

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

@media screen and (max-width: 960px) {
  body {
    width: auto;
  }
}

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


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

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

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

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

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

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

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

@charset "utf-8";

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/28 01:42 編集

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

    キャンセル

  • 2020/03/28 10:23

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

    キャンセル

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

  • ただいまの回答率 89.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる