レスポンシブなサイトのメニューレイアウト崩れについて

前提・実現したいこと

エンジニア・コーダーの先輩方初めまして。

独学でHTML,CSS,JavaScript,jQueryを学習し、現在、ポートフォリオ用のウェブサイトを作成しています。
使用している言語はHTML,CSS,jQueryで、多少動きがあり、且つ、シンプルな構成のサイトを目指しています。

レスポンシブなデザインにするにあたり、想定通りに実装できないのでご教授いただきたく質問する次第です。

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

問題点としては以下の２点です。

・ハンバーガーメニューは動いているが、中身の要素が中央揃えに出来ない。
・iPadのみメニューが消える。

具体的には...

768pxをブレイクポイントとし、PC表示ではメニューが横並びになり、スマホ等ではハンバーガーメニューになるというコードを書いたのですが、デベロッパーツールで確認するとなぜか**"iPad"**で表示した場合、メニューが全く表示されず消えてしまいます。
また、768px以下ではハンバーガーメニューでメニューの中身を中央揃えにしたいのですが、微妙にズレが生じてしまいます。

自分なりに書籍やブログ等を調べて問題解決に勤しみましたが、これ以上時間を無駄にするわけにはいかないので、解決策を探しております。
ご指摘いただけると幸いです。

該当のソースコード

HTML
1
2</head>
3<body>
4	<header>
5		<div class="container header-container">
6      <div class="sns-icons">
7        <div class="instagram-btn">
8          <a href="https://www.instagram.com/xxy0/" target="_blank"><i class="fab fa-instagram"></i></a>
9        </div>
10        <div class="facebook-btn">
11          <a href="https://www.facebook.com/profile.php?id=100021649801829" target="_blank"><i class="fab fa-facebook-f"></i></a>
12        </div>
13        <div class="twitter-btn">
14          <a href="https://twitter.com/Phycodurus3" target="_blank"><i class="fab fa-twitter"></i></a>
15        </div>
16      </div>
17			<div class="header-inner">
18				<h1 class="header-logo">
19          <a href="./index.html"><img alt="logo" src="img/Reverie.png" srcset="img/Reverie.png 1x,img/Reverie@2x.png 2x"></a>
20        </h1>
21        </div>
22
23
24        <!-- menu -->
25        <div class="nav-container">
26          <input id="my-parts-checkbox" class="my-parts-hidden icon-hamburger" type="checkbox">
27          <label id="my-parts-icon" for="my-parts-checkbox"><span></span></label>
28        <!-- </div> -->
29        <!-- <div class="nav-container"> -->
30          <nav class="menu-container">
31            <ul class="menu">
32              <li class="menu-item"><a href="about/index.html">About</a></li>
33              <li class="menu-item"><a href="works/index.html">Works</a></li>
34              <li class="menu-item"><a href="contact/index.html">Contact</a></li>
35            </ul>
36          </nav>
37        </div>
38        </div>
39	</header>

CSS
1/* menu */
2.icon-hamburger {
3  background: #fff;
4  border: 1px solid #ccc;
5  cursor: pointer;
6  height: 50px;
7  position: relative;
8  width: 50px;
9  display: none;
10  margin-bottom: 0.4em;
11}
12
13.icon-hamburger span {
14  background: #cccccc;
15  display: block;
16  height: 16%;
17  left: 50%;
18  margin: -8% 0 0 -42%;
19  position: absolute;
20  top: 50%;
21  width: 84%;
22}
23
24.icon-hamburger span::before,
25.icon-hamburger span::after {
26  background: #cccccc;
27  content: "";
28  display: block;
29  height: 100%;
30  left: 50%;
31  margin: -8% 0 0 -50%;
32  position: absolute;
33  top: 50%;
34  width: 100%;
35}
36
37.icon-hamburger span::before {
38  margin-top: -38%;
39}
40
41.icon-hamburger span::after {
42  margin-top: 19%;
43}
44
45@media screen and (max-width: 768px) {
46  .icon-hamburger {
47    display: inline-block;
48  }
49}
50/* 追加 */
51.my-parts-hidden {
52  display: none;
53}
54
55#my-parts-icon {
56  cursor: pointer;
57  display: inline-block;
58  height: 35px;
59  position: relative;
60  width: 35px;
61  float: right;
62}
63
64@media screen and (min-width: 768px) {
65  #my-parts-icon {
66    display: none;
67  }
68}
69
70#my-parts-icon span {
71  background:  #333;
72  border-radius: 4px;
73  display: block;
74  height: 16%;
75  left: 50%;
76  margin: -8% 0 0 -42%;
77  position: absolute;
78  top: 50%;
79  transition: all 0.3s ease-in-out;
80  width: 84%;
81}
82
83#my-parts-icon span::before,
84#my-parts-icon span::after {
85  -webkit-transform: rotate(0);
86  background: #333;
87  border-radius: 4px;
88  content: "";
89  display: block;
90  height: 100%;
91  left: 50%;
92  margin: -8% 0 0 -50%;
93  position: absolute;
94  top: 50%;
95  transform: rotate(0);
96  transition: all 0.3s ease-in-out;
97  width: 100%;
98}
99
100#my-parts-icon span::before {
101  margin-top: -38%;
102}
103
104#my-parts-icon span::after {
105  margin-top: 19%;
106}
107
108#my-parts-checkbox:checked ~ #my-parts-icon span {
109  background: rgba(51, 51, 51, 0);
110}
111
112#my-parts-checkbox:checked ~ #my-parts-icon span::before,
113#my-parts-checkbox:checked ~ #my-parts-icon span::after {
114  content: "";
115  display: block;
116  height: 100%;
117  left: 50%;
118  margin: -8% 0 0 -42%;
119  position: absolute;
120  top: 50%;
121  width: 100%;
122}
123
124#my-parts-checkbox:checked ~ #my-parts-icon span::before {
125  -webkit-transform: rotate(-45deg);
126          transform: rotate(-45deg);
127}
128
129#my-parts-checkbox:checked ~ #my-parts-icon span::after {
130  -webkit-transform: rotate(45deg);
131          transform: rotate(45deg);
132}
133
134.menu-container {
135  margin: 0;
136}
137
138.menu-container ul {
139  float: right;
140}
141
142.menu-container .menu {
143  /* border: 1px solid #ccc; */
144  display: flex;
145  justify-content: space-between;
146  list-style: none;
147  margin: 0;
148  padding: 0;
149}
150
151.menu-container .menu .menu-item {
152  flex: 1;
153}
154
155@media screen and (max-width: 48em) {
156  /* .menu-container .menu .menu-item {
157    padding-bottom: 15px;
158    max-width: 50%;
159    margin: 0 auto;
160  } */
161  .menu-container {
162    /* background: orange; */
163    width: 300px;
164    position: relative;
165    display: table-cell;
166    vertical-align: middle;
167    /* height: 200px; */
168  }
169  .menu-container .menu .menu-item {
170    width: 220px;
171    display: block;
172    vertical-align: middle;
173    padding-bottom: 15px;
174    margin: 0 auto;
175  }
176}
177.menu-container .menu .menu-item a {
178  background: #fff;
179  /* border-right: 1px solid #ccc; */
180  color: #333;
181  display: block;
182  /* padding: 0 20px 0 0; */
183  text-align: right;
184  text-decoration: none;
185  padding-left: 50px;
186}
187
188@media screen and (max-width: 768px) {
189  .menu-container .menu  {
190    text-align: center;
191  }
192}
193
194.menu-container .menu .menu-item a:hover {
195  /* background: #ccc; */
196  /* color: #ffffff; */
197  text-decoration: underline;
198  opacity: 0.5;
199}
200
201.menu-container .menu .menu-item:last-child a {
202  border-right: none;
203}
204
205@media screen and (max-width: 768px) {
206  .menu-container .menu {
207    display: none;
208    width: 100%;
209  }
210  .menu-container .menu .menu-item a {
211    /* border-bottom: 1px solid #ccc; */
212    border-right: none;
213  }
214  .menu-container .menu .menu-item:last-child a {
215    border-bottom: none;
216  }
217}
218
219

jQuery
1$(function() {
2
3  jQuery('.icon-hamburger').on('click', function() {
4  if(jQuery('.menu-container .menu').css('display') === 'block') {
5    jQuery('.menu-container .menu').slideUp('1500');
6  }else {
7    jQuery('.menu-container .menu').slideDown('1500');
8  }
9});
10
11  $('#back-to-top a').click(function() {
12    $('html,body').animate({scrollTop:0},500,'linear');
13    return false;
14  });
15
16
17});
18

試したこと

色々と状況を見ながら試してみましたがこれ以上は現在の私のスキルでは解決不可と判断しました。

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

エディタは最新のAtom、ブラウザは最新のchrome、jQueryも最新バージョンです。
玄人の方が見ればわかると思うのですが、綺麗なコードではありません。それ故間違い等も見つけにくいかと思いますが、何卒よろしくお願い致します。

liveasnotes

2019/04/03 08:40

抜粋されたコードですが，インデントや（スコープ的な意味での）階層が怪しいのと，コピペしただけだと，ちゃんと動かない（中央揃え云々が表示されすらしない）のが気になりました．こういうコード間の依存関係が大事なものは，https://jsfiddle.net/ などのオンラインエディタで，状況を共有してもらえると分かりやすいです．再現性のあるコードかつ，すぐに調査可能な状態（コードが書かれたオンラインエディタのページに飛ぶリンクがある，など）であれば，回答しやすくなります． jsFiddleの使い方に関しては，ここ（https://haniwaman.com/js-fiddle/）などを参考にしてください

Phycodurus3

2019/04/03 14:46

liveasnotes様お忙しい中、貴重なお時間を割いていただいて本当にありがとうございます。はにわまんさんのブログサイトは私も拝見しています。 jsfiddleの存在は知りませんでした。素晴らしい情報ありがとうございます！改めて使い方等を確認し、後程共有できるようにします。当初は本文内のコードに全コードを記載するつもりでしたが、文字数がオーバーしてしまったので、問題のメニュー部分のみを抜粋した次第です。おっしゃる通り、全体が見えないと色々と問題点が把握できませんよね.....。ということで、明日にでもjsfiddleにて共有できるように致します。今後とも何卒よろしくお願い致します。ちなみにiPadのみ表示されない問題に関してですが、メディアクエリーのmax-widthを767.98pxに設定したところ、なぜか表示されるようになりました（他の方のブログ記事を参照しました）。後はハンバーガーメニュー内の要素を768px以下では中央揃えで固定し、スマホ表示からPCサイズに戻した時もメニューの表示が消えないようにしたいです。

Phycodurus3

2019/04/04 09:42

liveasnotes様お世話になります。 jsfiddleにて状況を共有できるようにしたので、お時間のある際にご確認していただけると幸いです。 https://jsfiddle.net/dx6wkp05/2/#&togetherjs=jK9ah8nSv7 全ページに共通するヘッダー、メニュー部分、フッターを作っている最中に、メニュー部分でつまづいてしまったという状況です。何卒よろしくお願い致します。

Phycodurus3

2019/04/05 10:00

liveasnotes様お世話になります。再び自分なりにコードを見直し、不要な記述等を添削し、.menu-containerのwidthを60%にしたところ、メニュー内の要素が中央揃えになりました。改めて更新したコードが以下になります↓ https://jsfiddle.net/dx6wkp05/3/#&togetherjs=jK9ah8nSv7 あとはハンバーガーメニューを開いたまま画面幅をPC表示に戻した際にメニューが再び横並びになるようにできれば問題は解決しそうです。その辺りのアドバイスや解決の糸口があればご教授いただけると幸いです。何卒よろしくお願い致します。

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

回答4件

ベストアンサー

質問者さんのjsFiddle見てきたんですが，要らない部分が多そうで見るのが面倒（正直！）だったので，たぶん，こういうことがしたいんだろうなあ，という部分を抽象化したコードを書いてきました．

できるだけ装飾は入れずに組みました．それから，コードにコメントを添えているように，アニメーション周りの配慮を忍ばせているので，ヒントとして見てもらえればと思います．

https://jsfiddle.net/liveasnotes/w3p08qym/

html
1<input type="checkbox" id="menu_tgl">
2<label for="menu_tgl" data-ui>menu</label>
3<header>
4  <nav>
5    <ul id="menu_list">
6      <li><a href="#">AAA</a></li>
7      <li><a href="#">BBB</a></li>
8      <li><a href="#">CCC</a></li>
9    </ul>
10  </nav>
11</header>

css
1*,*::before,*::after {
2  padding: 0;
3  margin: 0;
4  box-sizing: border-box;
5}
6
7[data-ui] {
8  -webkit-user-select: none;
9  -moz-user-select: none;
10  -ms-user-select: none;
11  user-select: none;
12}
13
14#menu_tgl,
15[for="menu_tgl"] {/* toggle */
16  position: fixed;
17  top: 0;
18  right: 0;
19  z-index: 0; /* @SP, for make UNtouchable */
20  display: none;
21  width: 50px;
22  height: 50px;
23  background: palegreen;
24  opacity: 0.5;
25}
26
27#menu_list {
28  display: flex;
29  list-style: none;
30  text-align: center;
31  background: palegreen;
32  transition: 0s;
33}
34
35#menu_list > li {
36  border: 1px solid gray;
37  padding: 1em;
38  margin: 1em;
39}
40
41/* at transition PC -> SP, to prevent show animation of menu, wrapper of menu need to change own position with no transition time */
42nav {
43  position: fixed;
44  top: 0;
45  left: 0;
46  width: 100%;
47}
48
49nav a {
50  display: block;
51}
52
53/* @SP */
54@media screen and (max-width: 768px) {
55  #menu_tgl,
56  [for="menu_tgl"] {
57    display: block;
58    z-index: 100; /* @SP, for make touchable */
59  }
60
61  nav {
62    top: auto;
63    bottom: 100%;
64  }
65
66  #menu_list {
67    flex-direction: column;
68    opacity: 0;
69    transition: 0.5s;
70  }
71
72  #menu_tgl:checked ~ header #menu_list {
73    transform: translateY(100%);
74    opacity: 1;
75  }
76}

js
1// cf. .matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
2// https://spyweb.media/2018/01/10/css-media-queries-in-js-matchmedia/
3
4// cssはPCファーストで書いてたけど，
5// jsはSPファーストで書いてるので，「MAX-width: 768px」ではなく，「MIN-width: 768.0001px」
6const mediaQuery = matchMedia('(min-width: 768.0001px)');
7
8function handle(mq) {
9  if (mq.matches) {
10    document.getElementById("menu_tgl").checked = false;
11  }
12}
13
14// ページが読み込まれた時に実行
15handle(mediaQuery);
16
17// ウィンドウサイズが変更されても実行されるように
18mediaQuery.addListener(handle);
19

そのほか，ひとこと（複数）：

css：同じプロパティはまとめて書いた方が良い，スタイルがぶつかっているところが見つかる．
css：メディアクエリもまとめて書く方がおすすめ，ブレークポイントを変更しやすいし．
html：個人的にはnavは統一した方が，htmlがスッキリして好き．
css,html：main要素は廃止された気がしてたけど，復活した？
css,html：質問するときは，最小コードに整形すべし∵全体像がつかめない
最小コードにする際，装飾用のCSSは消す，配置関連に関係する部分（何かしらの大きさや，配置の基準にする線や点を指定するプロパティ）は残す
JS・HTMLも同様に，本題に関係ない部分は徹底的に削る．削る途中で問題が解決したら，そこが問題の原因だったと分かる

投稿2019/04/05 12:20

編集2019/04/05 12:42

liveasnotes

総合スコア1284

liveasnotes

2019/04/05 12:36

よく見たら，アニメーション周り以外にもなんかやってますね．ボーっとしながら書いてたので忘れてました．

Phycodurus3

2019/04/06 08:17

liveasnotes様私の招いたしまった問題を解決して下さってありがとうございます。おっしゃる通り色んなコードを足しながら、様子を見ながら制作していったので、結果的にごちゃごちゃとした記述になってしまいました。自分でもどこが悪いのかわからない状態になり。まだまだ勉強不足だと痛感しました。 liveasnotes様がjsfiddleにupして下さったコードを参考に実装していきたいと思います。この度は貴重なお時間を割いていただいて本当にありがとうございました。

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

・ハンバーガーメニューは動いているが、中身の要素が中央揃えに出来ない。

CSS
1.menu-container .menu .menu-item a {
2  background: #fff;
3  /* border-right: 1px solid #ccc; */
4  color: #333;
5  display: block;
6  /* padding: 0 20px 0 0; */
7  text-align: right;
8  text-decoration: none;
9  padding-left: 50px;
10}

上記にて、text-align: right;とpadding-left: 50px;なっているため
中央揃えになっていないものと思います。

CSS
1@media screen and (max-width: 768px) {
2  /* ~~~ 省略 ~~~ */
3  .menu-container .menu .menu-item a {
4    border-bottom: none;
5    /* ~~~ 追加 ~~~ */
6    text-align: center;
7    padding-left: 0;
8  }
9}

・iPadのみメニューが消える

これは私の環境では再現しませんでした。

投稿2019/04/03 08:48

編集2019/04/04 07:41

macaron_xxx

総合スコア3191

Phycodurus3

2019/04/03 15:03

macaron_xxx様お忙しい中、貴重なお時間を割いていただいて本当にありがとうございます。大変わかりやすいご指摘だったので、すぐにmacaron_xxx様が追加した部分を実装してみましたが、メニュー内の最後の子要素のみがズレました。 text-align: right;の部分、padding-left: 50px;の部分はメディアクエリーで設定した以外の表示、つまりPC等での表示なのですが、この部分を変えてしまうと今度はPCでのレイアウトが崩れてしまいます。ちなみにiPadでメニューが表示されない問題に関しては、メディアクエリーのmax-widthを767.98pxに設定したところ、なぜか改善しました（ググって出てきたとある方のブログ記事を参照しました）。また、他の方からのご指摘では全体のスコープや階層が見えないと根本的な問題がわからない、と指摘いただいたので、jsfiddleでコードを共有できるようにしたいと思います。文章だけで伝えるのも非常に難しいですし（汗）稚拙な表現力で上手く伝えることが出来ず、申し訳ありません。今後もアドバイスいただけると幸いです。やはり第三者からの意見は非常にありがたいです。ハンバーガーメニュー内の子要素を768px以下では中央揃えで固定し、さらにスマホ表示からPC表示に再拡大してもレイアウトが崩れないようにしたいです。今思えば色々とコードを追記していってしまい、複雑にしすぎたのが問題なのでは？と感じております。

macaron_xxx

2019/04/04 07:41

間違えて`:last-child`の方に適用してました。修正しました。

Phycodurus3

2019/04/04 09:44

macaron_xxx様お世話になります。修正ありがとうございます。早速追加してみたのですが、やはり画面幅を変えるとレイアウトがズレてしまいます。 jsfiddleにて状況を共有できるようにしたので、お時間のある際にご確認していただけると幸いです。 https://jsfiddle.net/dx6wkp05/2/#&togetherjs=jK9ah8nSv7 全ページに共通するヘッダー、メニュー部分、フッターを作っている最中に、メニュー部分でつまづいてしまったという状況です。何卒よろしくお願い致します。

Phycodurus3

2019/04/05 09:56

macaron_xxx様こんばんは。お世話になります。改めまして、再修正していただいたコードを追記してみましたが、想定通りにはなりませんでした。 768px以下の画面幅ではblock表示にし、縦並びにしているためtext-align: center;が無効になってしまうそうです。そこで今日は.menu-containerのwidthを60%にしてみたところ、メニュー内の要素が中央揃えになり、且つ、画面幅を広げても固定されるようになりました。不要そうな記述や、意味がない記述を添削していった結果、不細工なコードではありますがなんとか中央揃えになりました。更新したコードをjsfiddleの方にアップしてみました↓ https://jsfiddle.net/dx6wkp05/3/#&togetherjs=jK9ah8nSv7 あとはハンバーガーメニューを開いたまま画面幅をPC表示に戻した際にメニューが再び横並びになるようにできれば問題は解決しそうです。その辺りのアドバイスや解決の糸口があればご教授いただけると幸いです。何卒よろしくお願い致します。

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

iPadの画面幅でメニューが消える問題　→　メディアクエリーのmax-width: 768pxを767.98pxに変更したところ改善
768px以下の画面幅でハンバーガーメニュー内の要素が中央揃えにならない問題　→　.menu-containerのwidthを60%に設定することで改善される。その他不要と思われる記述を削除するなどしました。

投稿2019/04/05 10:06

Phycodurus3

総合スコア13

iPadの画面幅でメニューが消える問題　→　メディアクエリーのmax-width: 768pxを767.98pxに変更したところ改善
768px以下の画面幅でハンバーガーメニュー内の要素が中央揃えにならない問題　→　.menu-containerのwidthを60%に設定することで改善される。その他不要と思われる記述を削除するなどしました。

投稿2019/04/05 10:05

Phycodurus3

総合スコア13