レスポンシブサイトの不具合で困っています。URLあり。

現在、コーディング練習をしているところなのですが、
レスポンシブサイトにて横幅指定、中央揃えがうまくできません。
URLは
https://mystyle.xrea.jp/practis/
です。

メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。
またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただければ幸いです。

2日ほどソースとにらみっこしていますが、なかなか解決できないのでお力いただけると助かります。
URLは https://mystyle.xrea.jp/practis/ です。

以上、よろしくお願いいたします。

※下記にソースコードを載せておきます。

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  <link rel="icon" href="favicon.ico">
7  <link rel="stylesheet" href="./css/reset.css">
8  <link rel="stylesheet" href="./css/style.css">
9  <title>デイトラ | 無料体験</title>
10</head>
11<body>
12    <header>
13        <h1>
14          30DAYSトライアル
15        </h1>
16        <nav>
17          <ul>
18            <li><a href="#">デイトラとは</a></li>
19            <li><a href="#">コース一覧</a></li>
20            <li><a href="#">お問い合わせ</a></li>
21          </ul>
22        </nav>
23    </header>
24
25    <div class="header_img">
26      <p class="header_upper">
27        1日1題30日で<br>
28        プロのWebエンジニアになろう！
29      </p>
30      <p class="header_bottom">
31          毎日設定された課題をこなすだけ！<br class="kaigyo">未経験から30日でプログラミングスキルが身につきます
32      </p>
33    </div>
34  <div class="container">
35      
36    <h2>デイトラとは</h2>
37    <div class="about">
38      <div class="about_left">
39        <img src="./img/about.png" alt="デイトラとは">
40      </div>
41      <div class="about_right">
42        <p>
43          デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>
44          1日1題30日でプロのWebエンジニアを目指しましょう！
45        </p>
46      </div>
47    </div>
48    <div class="kuhaku"></div>
49    <h2>コース一覧</h2>
50    <div class="course">
51      <div class="course_item">
52         <img src="./img/web_first.png" alt="初級コース">
53         <p class="course_setsumei">
54          HTML / CSS / Bootstrap
55        </p>
56      </div>
57      <div class="course_item">
58        <img src="./img/web_second.png" alt="中級コース">
59        <p class="course_setsumei">
60          HTML /CSS / JavaScript / JQuery
61        </p>
62      </div>
63      <div class="course_item">
64        <img src="./img/web_third.png" alt="上級コース">
65        <p class="course_setsumei">
66          PHP / WordPress
67        </p>
68      </div>
69    </div>
70
71    <div class="kuhaku"></div>
72
73    
74      <h2>お問い合わせ</h2>
75      <p>さあ今日から30日間を始めよう!</p>
76      
77      <form action="#" method="post">
78        <input type="email" name="email" placeholder="メールアドレス" class="email">
79        <p>
80          <a href="#"><button type="submit" class="buttom">無料ではじめる</button></a>
81        </p>
82      </form>
83    
84
85    <footer>
86      Copyright(C) 2020 東京フリーランス ALL Rights Reserved.
87    </footer>
88
89  </div>
90</body>
91</html>

CSS
1body {
2  text-align: center;
3  color: #082b48;
4  font-family: Verdana, Geneva, Tahoma, sans-serif;
5  line-height: 1.5;
6}
7
8img {
9  width:100%;
10  height: auto;
11 }
12
13header {
14  width: 90%;
15  max-width: 980px;
16  height: 76px;
17  display: flex;
18  margin: 0 auto;
19}
20
21h1 {
22  font-size: 24px;
23  font-weight: 900;
24  margin: auto 0;
25}
26
27nav {
28  margin-left: auto;
29}
30
31nav ul {
32  list-style: none;
33  margin: 0;
34  padding: 0;
35  display: flex;
36}
37
38nav li {
39  width: 134px;
40  text-align: center;
41  line-height: 76px;
42}
43
44nav a {
45  text-decoration: none;
46  font-size: 15px;
47  font-weight: 600;
48  color: #082b48;
49}
50
51a:hover {
52  opacity: 0.7;
53  cursor: pointer;
54}
55
56.header_img {
57  background-image: url("../img/main-vsual-nontitle.png");
58  background-size: cover;
59  padding: 80px;
60}
61
62.header_upper {
63  margin-top: 35px;  
64  margin-bottom: 25px;
65  font-size: 45px;
66  font-weight: bold;
67}
68
69.header_bottom {
70  margin-top: 50px;
71  font-size: 16px;
72  font-weight: bold;
73  width: 350px;
74  margin: 0 auto;
75}
76
77.kaigyo {
78  display: none;
79}
80
81.container {
82  width: 90%;
83  max-width: 980px;
84  margin: 0 auto;
85}
86
87h2 {
88  margin: 50px;
89  font-size: 30px;
90  font-weight: bold;
91}
92
93.about {
94  display: flex;
95  justify-content: space-between;
96}
97
98.about_left {
99  width: 48%;
100}
101
102.about_right {
103  width: 48%;
104  text-align: left;
105}
106
107.kuhaku {
108  height: 35px;
109}
110
111.course {
112  display: flex;
113  justify-content: space-between;
114}
115
116.course_item {
117  width: 30%;
118}
119
120.course_setsumei {
121  text-align: left;
122}
123
124.email {
125  width: 600px;
126  height: 50px;
127  border-radius: 30px;
128  font-size: 18px;
129  padding-left: 10px;
130  margin-bottom: 25px;
131}
132
133.buttom {
134  background-color: #EC6D64;
135  width: 42%;
136  height: 80px;
137  font-size: 25px;
138  font-weight: bold;
139  color: #fff;
140  border-radius: 10px;
141}
142
143.buttom:hover {
144  cursor: pointer;
145}
146
147footer {
148  border-top: 2px solid rgb(212, 212, 212);
149  margin-top: 130px;
150  margin-bottom: 30px;
151  padding-top: 15px;
152  float: right;
153  font-size: 13px;
154}
155
156/* スマホ */
157
158@media (max-width:767px) {
159  
160  header {
161    display: initial;
162  }
163
164  nav {
165    margin-left: none;
166    margin: 0 auto;
167  }
168
169  .header_img {
170    padding: 120px 0;
171  }
172
173  .header_bottom {
174    width: auto;
175  }
176
177  .kaigyo {
178    display: block;
179  }
180
181  .about {
182    margin: 0 auto;
183    display: initial;
184    justify-content: initial;
185  }
186
187  .about_left {
188    width: 90%;
189  }
190  
191  .about_right {
192    width: 90%;
193    text-align: left;
194  }
195
196  .course {
197    display: initial;
198    justify-content: initial;
199  }
200
201  .course_item {
202    width: 100%;
203  }
204
205  .course_setsumei {
206    text-align: left;
207    margin-bottom: 20px;
208  }
209
210  .email {
211    width: 90%;
212  }
213
214  footer {
215    float: none;
216  }
217
218
219}

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

回答2件

ベストアンサー

デイトラの課題ということで、直接的な回答ではなく考え方、調べ方を書きます。
（魚を恵んでもらう方法ばかりを教えて、肝心の魚の釣り方を教えないのがデイトラの欠点だと思います）

メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。

現段階(2021.05.30 14:30)で見る限り、メディアクエリは767pxを境界できちんと有効になっています。問題ありません。
後述の検証ツールでメディアクエリを設定している要素のスタイルをチェックすれば、どの時点でメディアクエリが有効になるか目視で分かります。

またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただければ幸いです。

中央寄せの方法については、以下のサイトが非常に参考になるので全て読んでから適切な方法で実装してください。
「中央寄せ css」で検索すれば一番上にきます（少なくとも私の環境では）
https://www.granfairs.com/blog/staff/centering-by-css
どれが適切か判断がつかなければ、とりあえず7番目の方法で実装すれば良いでしょう。（もっとも汎用的です）

他の方もおっしゃるように、検証ツールを使いこなさないとWebページ開発は覚束ないです。
各要素に適用されているスタイルを調査したり、レスポンシブデザインの確認にも重宝します。

検証ツールは非常に盛沢山の機能が備わっていますが、最低限覚えてほしいことが記載されているページを紹介します。

とりあえず簡単な使い方の紹介
https://homupedia.com/editor-devtools-features.html

詳細な機能の説明が網羅されたサイト（ちょっと難しい）
https://murashun.jp/article/performance/chrome-devtools.html

以上の説明は全てGoogle Chromeでの機能ですが、windowsでもmacでもWebデザインの開発にはchromeを使用することをお勧めします。ネットでの情報が最も多く、検証ツール自体が使いやすいです。

投稿2021/05/30 05:48

編集2021/05/30 05:49