Q&A
ご提示のページを拝見しましたが、「大画面でもハンバーガーメニューのまま」という問題は再現しませんでした。
↓html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>イオ太ノート</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" type="text/css" href="maistyle.css"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><!--ファビコンhttps://realfavicongenerator.net/ --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>--> <!-- jQueryの読み込み --> <!-- スマホナビの表示・非表示 「humに入れた要素」を「クリック」したら 「navに入れた要素」に「toggleというclass」を「足したり・消したり」する--> <script> $(function() { const hum = $('#hamburger, .close') const nav = $('.sp-nav') hum.on('click', function(){ nav.toggleClass('toggle'); }); }); </script> <!--<link href="jquery.mb.bgndgallery.min.css" rel="stylesheet" media="all" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.mb.bgndGallery.min.js"></script> --> <link href="jquery.mb.bgndgallery.min.css" rel="stylesheet" media="all" type="text/css" /> <script type="text/javascript" src="./js/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="jquery.mb.bgndGallery.min.js"></script><!--https://blog.raizzenet.com/how-to-use-jquery-mb-bgndgallery/--> <script type="text/javascript"> $(function(){ $.mbBgndGallery.buildGallery({ containment:"body", timer:500, effTimer:8000, effect:"zoom", autoStart:true, images:[ "./imagesi/i1.jpg", "./imagesi/i2.jpg", "./imagesi/i3.jpg", "./imagesi/i4.jpg", "./imagesi/i5.jpg", "./imagesi/i6.jpg", "./imagesi/i7.jpg", "./imagesi/i8.jpg", ] }); }); </script> </head> <body> <header> <div id="logo"> <a href="index.html"><img src="title.gif" alt="イオ太ノート" class="iota"></a> </div> <nav id="gloval-nav"> <ul> <li><a href="index.html" class="arrow arrow--right" style="color: #938b4b">トップ</a></li> <li><a href="profi-ru.html" class="arrow arrow--right" style= "color: #ffffff;">プロフィール</a></li> <li><a href="seicyou.html" class="arrow arrow--right" style= "color: #ffffff;">成長記録</a></li> <li><a href="sakuhinnsyuu.html" class="arrow arrow--right" style= "color: #ffffff;">作品集</a></li> <li><a href="photo.html" class="arrow arrow--right" style= "color: #ffffff;">写真集</a></li> <li><a href="dokusyo.html" class="arrow arrow--right" style= "color: #ffffff;">読書リスト</a></li> <li><a href="guzzu.html" class="arrow arrow--right" style= "color: #ffffff;">持ち物</a></li> </ul> </nav> <nav class="sp-nav"> <ul> <li><a href="index.html" class="arrow arrow--right" style="color: #938b4b">トップ</a></li> <li><a href="profi-ru.html" class="arrow arrow--right" style= "color: #ffffff;">プロフィール</a></li> <li><a href="seicyou.html" class="arrow arrow--right" style= "color: #ffffff;">成長記録</a></li> <li><a href="sakuhinnsyuu.html" class="arrow arrow--right" style= "color: #ffffff;">作品集</a></li> <li><a href="photo.html" class="arrow arrow--right" style= "color: #ffffff;">写真集</a></li> <li><a href="dokusyo.html" class="arrow arrow--right" style= "color: #ffffff;">読書リスト</a></li> <li><a href="guzzu.html" class="arrow arrow--right" style= "color: #ffffff;">持ち物</a></li> <li class="close"><span>閉じる</span></li> </ul> </nav> <div id="hamburger"> <span></span> </div> </header> ↓css /*ヘッダーゾーン*/ header { position: relative; z-index: 2; flex-grow: 0; /* 省略可 */ flex-basis: auto; /* 省略可 */ width: 100%; margin: 0 15px 0 auto; position: fixed;/*positionプロパティーで画面の上部にヘッダーを固定このせいでmainが潜るのでmargin-topで調整する*/ top: 0;/*画面上から0pxのところに配置*/ display: flex;/*header直下の子要素のレイアウトをコントロールできる状態*/ align-items: center;/*子要素が縦方向中心配置*/ } /*#logo img { padding: 6px; } .iota { margin-left: 8px; }*/ ul { list-style: none;/*.を消して無駄な余白をなくす*/ margin: 0 80px 0 auto; display: flex;/*横並び*/ justify-content: space-around;/*両端ボックスは始端、終端からボックス間隔の半分の距離*/ } li { margin: 0 0 0 20px; font-size: 14px; color: #203744; align-items: center; } nav { margin: 0 0 0 auto;/*nav要素の外側の余白を調整する「margin」にautoを設定して、 タイトルとナビゲーションが両サイドの配置になるように 「nav」要素を右端に配置したいので、左マージンに「auto」を設定します。 すると、左側に余白ができて、nav要素を右端まで押し出してくれます。*/ } /*indexスライドショー*/ body { z-index:0; margin:0; padding:0; } /*ヘッダー ナビゲーション */ #gloval-nav { width: 100%; white-space: nowrap; } .nav { list-style:none; margin: 0 auto 0 auto; display: flex; } .nav li{ } .nav li:last-child { border-right: #888 1px solid; } .nav li:hover { background-color: #1f3134;/*桃入茶ももしおちゃ*/ } a { display: block; /*padding: 1.3em 0;*/ text-decoration: none; } /*メインゾーン*/ #two-column { flex-grow: 1; flex-basis: 0; } main { flex-grow: 1; flex-basis: 0; overflow-y: scroll; overflow-y: scroll; background-color: yellow; padding: 0 8%; margin-top: 15vh; display: flex; justify-content: space-between; align-items: flex-start; } /*メディアクエリ 中間サイズ*/ @media screen and (max-width: 1019.9px) { #gloval-nav { display: none; } #logo img { max-width:180px; /* 画像の最大幅 */ margin: 12px 0 0 18px; } #hamburger { position: relative;/*配置基準*/ display: block; width: 30px; height: 25px; margin: 0 50px 0 auto; } #hamburger span { position: absolute;/*上から丁度半分のところから配置する*/ top: 50%; left: 0; display: block;/*ブロック要素にする*/ width: 100%; height: 2px; background-color: #634950;/*濃色 こきいろ*/ transform: translateY(-50%); } /*メディアクエリ 中間 要素の高さの「50％分」を上にズラす ハンバーガーメニュー*/ #hamburger::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #634950; } #hamburger::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%;/*短めにデザイン*/ height: 2px; background-color: #634950; } .sp-nav { z-index: 1;/*要素の重なり前面表示１*/ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: block; width: 100%; background: rgba(0, 0, 0, .8); transition: all .2s ease-in-out;/*表示非表示の変化を0.2秒でアニメーション*/ opacity: 0;/*メニューは透明、画面外に出ている状態*/ transform: translateY(-100%);/*画面と同じ高さ上にずらす*/ } .sp-nav ul { padding: 0; display: flex;/*縦並びで画面中心*/ flex-direction: column;/*デフォルトではrow*/ justify-content: center; align-items: center; height: 100%; } .sp-nav li { margin: 0; padding: 0; } .sp-nav li span { font-size: 15px; color: #fff; } .sp-nav li a, .sp-nav li span { display: block; padding: 20px 0;/*指でタップし易く余白を確保*/ } /*メディアクエリ 中間 閉じるアイコン*/ .sp-nav .close { position: relative; padding-left: 20px;/*閉じるが重ならないようスペース*/ } /*メディアクエリ 中間 バツ印線1*/ .sp-nav .close::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( 45deg );/*時計回り４５度*/ } /*メディアクエリ 中間 バツ印線2*/ .sp-nav .close::after { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( -45deg ); } .toggle { transform: translateY( 0 ); opacity: 1;/*位置と透明度をリセット*/ } }/*←中間ここまで*/ /*メディアクエリ 小サイズ*/ @media screen and (max-width: 400px) { main { box-sizing: border-box; } #logo img { max-width:100px; /* 画像の最大幅 */ margin: 3px 0 0 3px; } .toph1 { font-size: 30px; color: rgba(211,227,242,0.3);/*薄い青*/ text-align: center; } h1 { font-size:25px; color: rgba(211,227,242); margin: 0 0 0 7%; } p { font-size: 15px; } /*main { margin-top: 20vh; }*/ .gyou { clear: both; } } /*メディアクエリ 大サイズ*/ @media screen and (min-width: 1020px) { .sp-nav { display: none; } } ```### 前提・実現したいこと この不具合の原因を知って、正しく（cssの通りに）表示されるようにし、今後このようなトラブルを回避できるようにしたいです。 ### 発生している問題・エラーメッセージ 練習で作成しているウェブサイトが、クロームブラウザに正しく表示されません。一昨日までは問題無かったのですが、昨日、ファイルをサーバーに更新したところ急にこうなってしまいました。 検証ツールの画面、IEブラウザでは正確（cssの通り）に表示されます。 ### 該当のページ http://vera.html.xdomain.jp/ ＊ヘッダーは大画面でグローバルナビ、中～小画面でハンバーガーメニューになるように設定していますが、大画面でもハンバーガーメニューのままです。←これでトラブルに気付くことができました。 サイトは作成途中です。トップページ のみ完成としていて、二枚目のプロフィールは概ね完成、他はほぼ手つかず（一度つくりかけたものを一からやり直し中）います。 ### 試したこと キャッシュクリア 同様のトラブルがないかネット検索した。クロームが更新されズレが生じたので微調整した件は有ったが、これは数pxのズレとかではなく、何故か検証ツールでは正確に表示される為違うと判断。 ### 補足情報（FW/ツールのバージョンなど） （http://vera.html.xdomain.jp/)
見ていただきありがとうございます。ちなみにお使いのブラウザは何でしょうか。当方のPCでもIEブラウザでは正常に表示されています。クロームのみ、表示がおかしく、キャッシュクリアしてもなおらずなのです。。
どういったcssを指定することで、どういったレイアウトになることを想定しており、実際にはどのようなレイアウトになってしまうかを書いてください。
Win10 Chrome92です。Firefox90でも問題ありません。
（可愛い赤ちゃんの写真ですね）
私の環境でも再現しませんでした。（Win10 Chrome92）
Chromeのプライバシーモードで表示しても同じ現象でしょうか？
ku--ra--geさん ありがとうございます。ヘッダーに限っていうと、大画面で横並びのメニュー、その他でハンバーガーメニューになるようにｃｓｓを書いています。それが、昨日よりクロームで再現されなくなりました（すべてがハンバーガーメニューになってしまう）。初めは、意図せずコードを弄ってしまったのかと思いましたがしかし、検証ツールの画面や、IE では正常に表示されます。原因が分からずこちらで質問させていただきました。コードを追記いたしました。よろしくお願いいたします。
当方でさらに試したところ、ズームレベルを拡大していくとハンバーガーメニューが表示されました。
mei.m さんの環境のズームレベルは100%になっていますか？
Ｌhankor-Mhyさん odataikiさん ありがとうございます。Ｌhankor-Mhyさんのご指摘通り確認すると、ズームレベル、100％以上になっていました。そのせいだったのですね。。ズームレベル、普段意識出来ていなかったです。odataikiさんのご環境でも再現されなかったというのは、多分当方と同様にズームレベルが１００％以上だからからなのでしょうか。やっと原因が分かって感謝です。
ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いします。
回答1件
0
自己解決
画面のズームレベルがいつの間にか大きくなりすぎており、そのせいで
大画面ではエリア外にずらしているハンバーガーメニューが見え、かわりにグローバルナビが見えなくなっていたことが原因でした。
単純なことでしたが全然思い至らず、Ｌhankor-Mhyさんのご指摘のおかげで気づくことができました。
投稿2021/08/08 07:38
総合スコア2
あなたの回答
tips
プレビュー
