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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1324閲覧

レスポンシブデザインで非表示の切り替えが起こらない

corgi_

総合スコア1

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/15 16:11

前提・実現したいこと

html,css,jqueryを使って模写コーディングを行っています。
729px,880pxの二箇所をブレイクポイントとしています。
レスポンシブデザインで、729px以下の時に、display:none;で見えなくした部分がなどに不具合が生じています。

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

最初の画面を729px以下で始めると、本来非表示でない部分が見えません。また、730px以上の画面で始めると、729px以下のとき、ハンバーガーメニューをクリックすることが出来ません。 729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。

該当のソースコード

html <div id="mask"><i class="fas fa-bars"></i></div> <div id="header-right"> <div id="gnav-wrapper"> <ul> <li><a href="#">ホーム<i class="fas fa-angle-down"></i></a> <ul> <li><a href="#">→カスタマイズ</a></li> </ul> </li> <li><a href="#">ページ<i class="fas fa-angle-down"></i></a> <ul> <li><a href="#">アイキャッチ画像なしのページ</a></li> <li><a href="#">ページ(全幅テンプレート)</a></li> </ul> </li> <li><a href="#">タイポグラフィー</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <i class="fas fa-times"></i> </div> css #mask{ position: absolute; right: 10px; top: 10px; font-size: 40px; display: none; cursor: pointer; } .fa-times{ position: absolute; right: 10px; top: 20px; font-size: 50px; display: none; cursor: pointer; } #header-right{ display: flex; position: relative; } #gnav-wrapper{ padding-top: 55px; margin-right: 150px; } #gnav-wrapper ul{ display: flex; font-size: 16px; color: #333; } #gnav-wrapper li{ text-align: center; margin-right: 20px; writing-mode: ho; } #gnav-wrapper ul ul{ display: none; box-shadow: 0.5px 0.5px #f0f0f0; } #gnav-wrapper li li a{ display: block; width: 200px; padding: 10px 20px; } responsive @media(max-width:729px){ #mask{ display: block; position: fixed; } .fa-times{ display: block; position: fixed; } #gnav-wrapper{ background-color: white; opacity: 0.8; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; display: none; } #gnav-wrapper ul{ flex-flow: column; font-size: 22px; } #gnav-wrapper ul ul{ display: block; box-shadow: none; } #gnav-wrapper li{ margin-bottom: 10px; } #gnav-wrapper li li{ border: none; text-align: center; margin: 0 auto; } .fa-angle-down{ display: none; } jquery $(function(){ if(window.matchMedia('(min-width:730px)').matches){ $('#gnav-wrapper').children('ul').children('li').hover( function(){ $(this).children('ul').fadeIn(); }, function(){ $(this) .children('ul').fadeOut(); }); } else { $('#mask').click(function(){ $('#gnav-wrapper').fadeIn(); $('#mask').fadeOut(); }); $('.fa-times').click(function(){ $('#gnav-wrapper').fadeOut(); $('#mask').fadeIn(); }); } })

試したこと

レスポンシブデザインとjQueryでブレイクポイントが重なっていたため、それを変更しても変わりませんでした。

補足情報(FW/ツールのバージョンなど)

windows
ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/09/16 01:12

補足願います。 「本来非表示でない部分」とはHTMLで言うとどの要素ですか? #header-rightでしょうか? 「その部分」とはHTMLで言うとどの要素ですか? #maskですか?
Lhankor_Mhy

2021/09/16 01:15

「729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。」この一文は、前文の「730px以上の画面で始めると、」からつながっていますか? つまり、「730px以上の画面で始めると、729px以下の時はハンバーガーメニューをクリックすることができ、730px以上の時はその部分が非表示になっていません。」という意味ですか?
Lhankor_Mhy

2021/09/16 01:16

また、最終的にどのような動作にしたいのかも具体的に書いてください。
corgi_

2021/09/21 05:45

言葉足らずですみません。 「本来非表示でない部分」は#header-rightのことです。 「その部分」も#header-rightのことです。 「729px以下の時は~に対する返答ですが、ベストアンサーとさせていただいた内容から推察します。730px以上で始めると、730px以上でページが読み込まれているので、729px以下の時に表示されるハンバーガーメニューがクリックできないのだと思います。また、729px以下で始めると729px以下でページが読み込まれているので、730px以上にすると#header-rightが非表示のままなのだと思います。 最終的には、730px以上で#header-rightが表示され、729px以下でハンバーガーメニューをクリックすることが出来る状態にしたかったです。
guest

回答1

0

ベストアンサー

補足依頼を見ていただけていないようなので想像で回答します。

js

1$(function(){ 2 if(window.matchMedia('(min-width:730px)').matches){

これが原因だと思います。ビューポートのサイズをチェックしているのがページのロード時だけですので、途中でサイズが変わった場合は上手く動作しないです。

イベントリスナを使うといいかもしれないです。
MediaQueryList - Web API | MDN

投稿2021/09/18 02:37

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

corgi_

2021/09/21 05:32

返答遅れてすみません! 読み込みの問題解決しました! また別で問題も発生したのでまた考えたいと思います。 ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問