レスポンシブが反応しません。

今回お聞きしたい質問はレスポンシブについてです。

現在普通のcssが書き終わりレスポンシブを進めてい行こうかと思っていたところ、
レスポンシブが反応しませんでした。

他の作成した物のコピペで張っており、そちらの方はレスポンシブが反応しているのに対して、
今回の方は反応しません。

とりあえず、headerの部分だけで試しているのですが、何かおかしなところはありますでしょうか？

皆様方、知恵をお貸しください。

以下は、headerの部分をとりあえずdisplay:　none;にしているところです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>コーポレート_上級</title>
7  <link rel="stylesheet" type="text/css" href="https://www.jungleocean.com/demo/jquery-slick/css/slick-theme.css">
8  <link rel="stylesheet" type="text/css" href="https://www.jungleocean.com/demo/jquery-slick/css/slick.css">
9  <link rel="stylesheet" type="text/css" href="css/slick.css"/>
10  <link rel="stylesheet" href="reset.css">
11  <link rel="stylesheet" href="style.css">
12  <link rel="stylesheet" href="responsive.css">
13  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
14</head>
15<body>
16  <header>
17    <div class="header">
18      <div class="header-left">
19        <img src="https://tech-camp.in/assets/expert/common/logo-engineer-text-7c65cde11c2832e6d1fcec26aebcf33f.svg">
20      </div>
21      <div class="header-right">
22        <nav class="header-navs">
23          <div class="header-nav">
24            <h1>初めての方へ</h1>
25            <ul>
26              <li>学習内容</li>
27              <li>私達のコンセプト</li>
28              <li>オンラインで学ぶ</li>
29              <li>教室一覧</li>
30              <li>エンジニアとは？</li>
31            </ul>
32          </div>
33          <div class="header-nav">
34            <h1>選べるキャリア</h1>
35            <ul>
36              <li>エンジニア転職をしたい方</li>
37              <li>フリーランスを目指す方</li>
38            </ul>
39          </div>
40          <div class="header-nav">
41            <h1>料金</h1>
42          </div>
43          <div class="header-nav">
44            <h1>卒業生</h1>
45          </div>
46          <div class="header-nav">
47            <h1>学習の流れ</h1>
48          </div>
49          <div class="header-nav">
50            <h1>資料請求</h1>
51          </div>
52          <div class="header-nav" id="header-borderLeft">
53            <h1>採用を検討中の企業様</h1>
54          </div>
55        </nav>
56        <div class="header-btn">
57          <a href="#">無料カウンセリングの予約→</a>
58        </div>
59      </div>
60    </div>
61  </header>
62
63  <main>
64  </main>
65
66  <footer>
67  </footer>
68
69
70  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
71  <script type="text/javascript" src="js/slick.min.js"></script>
72  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
73  <script src="script.js"></script>
74</body>
75</html>

syile.css
1* {
2  box-sizing: border-box;
3  list-style: none;
4}
5
6.header {
7  display: flex;
8  justify-content: space-between;
9  padding: 0 30px 0 20px;
10  background-color: white;
11  position: fixed;
12  z-index: 10;
13  width: 100%;
14}
15
16.header-left img {
17  width: 260px;
18  cursor: pointer;
19  padding: 26px 0;
20}
21
22.header-right , .header-navs {
23  display: flex;
24  align-items: center;
25  font-size: 16px;
26  cursor: pointer;
27}
28
29.header-nav {
30  position: relative;
31}
32
33.header-nav h1 {
34  margin: 20px 25px;
35  display: inline-block;
36  position: relative;
37}
38
39.header-nav h1::after {
40  position: absolute;
41  bottom: -4px;
42  left: 0;
43  content: '';
44  width: 100%;
45  height: 3px;
46  background: #333;
47  transform: scale(0, 1);
48  transform-origin: left top;
49  transition: transform .3s;
50}
51
52.header-nav h1:hover::after {
53  transform: scale(1, 1);
54}
55
56.header-nav ul {
57  position: absolute;
58  background-color: white;
59  box-shadow: 0px 0px 10px  black;
60  display: none;
61}
62
63.header-nav:hover ul {
64  display: block;
65  z-index: 5;
66}
67
68.header-nav li {
69  width: 300px;
70  padding: 18px 50px;
71  display: inline-block;
72}
73
74#header-borderLeft {
75  display: inline-block;
76  border-left :1px solid gainsboro;
77}
78
79.header-btn a {
80  text-decoration: none;
81  background-color: orange;
82  color: white;
83  padding: 14px 10px;
84  border-radius: 5px;
85}
86
87.header-btn a:hover {
88  opacity: 0.9;
89}
90

@media screen and ( max-width: 900px) {

  .header-nav {
    display: none;
  }

}

以上になります。
今回はheaderのみ記載してあります。

Rocky

2020/06/30 04:19

これってどこの学習サイトの教材ですか？

nekomannma

2020/06/30 05:30

「https://tech-camp.in/expert/v2/online?utm_source=moshimo&utm_medium=affiliate&utm_campaign=moshimo_exp_online&argument=PZfPEMQq&dmai=a5edede3ca04d6&cid=cgga5oi71z7m&p=5bc9903cd8acb」こちらのサイトを模写しているだけです。

Rocky

2020/06/30 05:45

ではテックキャンプに問い合わせてみては？

nekomannma

2020/06/30 05:50

テックキャンプに教材を購入して進めているわけではなく、自分で模写の学習をしています。そもそも、私がお尋ねしていることはテックキャンプだからこうなったわけではありません。わかりずらい内容で申し訳ありませんが、質問の意図を理解していただくようお願いします。

Rocky

2020/06/30 06:02

そうですね、では質問を変えます。 >レスポンシブが反応しませんとありますが、具体的にはどのような動作をきたいして、どのような操作をした結果、どのようになりましたか？(なりませんでしたか？) また、きちんとcssファイルそのものは読み込めていますか？

hatena19

2020/06/30 06:05

style.css と responsive.css は HTMLファイルと同じフォルダーにありますか。

nekomannma

2020/06/30 06:42

ご質問ありがとうございます。＞レスポンシブの内容としましては、widthが900px(=PC上で画面を半分にしたとき)の時に、そのサイズに適したcssにしたいと思っております。結果としましては、上記でもあるように期待した反応を得られず、cssに変化無しの状態です。細かく追記しますと、width:900px;の時にheaderが非表示になるように設定しているつもりです。＞style.cssとresponsive.cssはhtmlとは同じフォルダ内にあります。

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

回答1件

ベストアンサー

[1] 以下の記述が原因と考えられます。

CSS
1#header-borderLeft {
2  display: inline-block;
3  border-left :1px solid gainsboro;
4}

classよりidのほうが、CSSセレクタの詳細度が高いので上書きできない状態なのだと思われます。
「#header-borderLeft」で指定していないプロパティでテストしてみてください。

CSS
1@media screen and (max-width: 900px) {
2
3  .header-nav {
4    display: none;
5    
6    /* #header-borderLeftで指定している「display」「border-left」以外のプロパティを試してみてください */
7    background: #f00;
8    font-size: 200px;
9  }
10}

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

[2] responsive.cssが読み込めていない可能性もあります。
以下の記述を追加してみて背景色が赤にならなければ、responsive.cssが読み込めていないので、
その観点で手を加えてみてください。

CSS
1/* 追加 */
2/* @mediaの外に、わかりやすい記述をしてテストしてみてください */
3body {
4  background: #f00 !important;
5}
6
7@media screen and (max-width: 900px) {
8  .header-nav {
9    display: none;
10  }
11}