Q&A
「効か亡くなって」「半バーガーメニュー」誤字が目立ちますので訂正して下さい。
position : fixed;でヘッダーを固定したところ
class="wrapper"で左右に余白を作っていましたが、左端に寄ってしまいました。
誤字がないか確認したり、コードを入力し直したりしました。半日試行錯誤しましたが、どうしてもwrapperが効きません、、なぜだか分かる方いらっしゃいますか？
html
1<!doctype html> 2<html> 3<head> 4<link rel="stylesheet" href="css/style.css"> 5<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 6<meta charset="UTF-8"> 7<title>grid design</title> 8</head> 9<body> 10 <header class="wrapper"> 11 <h1 class="wrapper"><strong>Grid Design</strong></h1> 12 <div class="sp-menu"> 13 <span class="material-icons" id="open">menu</span> 14 </div> 15 <div class="overlay"> 16 <span class="material-icons" id="close">close</span> 17 <nav> 18 <ul class="wrapper"> 19 <li><a href="#">PRODUCT</a></li> 20 <li><a href="#">ABOUT</a></li> 21 <li><a href="#">COMPANY</a></li> 22 <li><a href="#">CONTACT</a></li> 23 </ul> 24 </nav> 25 </div> 26 27 </header> 28 29 <section id="photo" class="wrapper"> 30 <ul class="kontena"> 31 <li><a href=""><img src="img/item1.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 32 <li><a href=""><img src="img/item2.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 33 <li><a href=""><img src="img/item3.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 34 <li><a href=""><img src="img/item4.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 35 <li><a href=""><img src="img/item5.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 36 <li><a href=""><img src="img/item6.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 37 <li><a href=""><img src="img/item7.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 38 <li><a href=""><img src="img/item8.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> 39 </ul> 40 </section> 41 <footer class="wrapper"> 42 <ul> 43 <li><a href="" target="blank">INSTAGRAM</a></li> 44 <li><a href="" target="blank">TWITTER</a></li> 45 <li><a href="" target="blank">FACEBOOK</a></li> 46 </ul> 47 <p class="copyright">©︎Grid design</p> 48 </footer> 49 <script src="js/main.js"></script> 50</body> 51</html>
css
1@charset "UTF-8"; 2/* CSS Document */ 3body{ 4 font-size: 1rem; 5 margin-bottom: 500px; 6} 7.wrapper{ 8 width: 1300px; 9 margin: 0 auto; 10 background-color: pink; 11} 12h1{ 13 font-size: 1.2rem; 14 padding: 15px 0 15px 0; 15} 16 17.kontena{ 18 display: grid; 19 width: 100%; 20 height: auto; 21 grid-template-columns: auto auto auto auto; 22 grid-auto-rows: auto auto; 23 gap: 35px; 24 padding: 0; 25 padding-top: 100px; 26} 27.item{ 28 width: 100%; 29 margin-bottom: 5px; 30} 31li{ 32 list-style: none; 33} 34#photo p{ 35 font-size: 0.75rem; 36 margin: 0; 37} 38a{ 39 text-decoration: none; 40 color: black; 41 transition: all 0.5s; 42} 43a:hover { 44 opacity: 0.7; 45} 46/*フッター*/ 47footer{ 48 max-width: 100%; 49 display: flex; 50 justify-content: space-between; 51} 52footer li{ 53 margin-right: 20px; 54} 55 56footer ul{ 57 display: flex; 58 padding: 0; 59 margin-bottom: 5px; 60} 61footer a{ 62 text-decoration: none; 63 font-size: 0.75rem; 64} 65.copyright{ 66 padding: 0; 67 font-size: 0.5rem; 68} 69 70 71/*ハンバーガーメニュー*/ 72header{ 73 display: flex; 74 justify-content: space-between; 75 position: fixed; 76 z-index: 999; 77 padding: 0; 78 margin: 0; 79 background: rgba(200,255,255,1); 80} 81 82.sp-menu #open{ 83 padding: 15px 0 15px 0; 84 font-size: 2rem; 85 cursor: pointer; 86} 87 88.overlay{ 89 position: fixed; 90 top: 0; 91 bottom: 0; 92 right: 0; 93 left: 0; 94 background: rgba(255,255,255,0.95); 95 margin-top:20px; 96 opacity: 0; 97 pointer-events: none; 98} 99.overlay #close 100{ 101 font-size: 2rem; 102 display: block; 103 text-align: right; 104 cursor: pointer; 105} 106.overlay ul{ 107 text-align: center; 108 margin-top: 50px; 109} 110.overlay li{ 111 margin-top: 30px; 112} 113 114.overlay.show{ 115 opacity: 1; 116 pointer-events: auto; 117} 118.sp-menu #open.hide{ 119 display: none; 120} 121
javascript
1'use strict'; 2 3{ 4 const open = document.getElementById('open'); 5 const overlay = document.querySelector('.overlay'); 6 const close = document.getElementById('close'); 7 8 9 open.addEventListener('click', () => { 10 overlay.classList.add('show'); 11 open.classList.add('hide'); 12 13 14 }); 15 16 close.addEventListener('click', () => { 17 overlay.classList.remove('show'); 18 open.classList.remove('hide'); 19 20 21 }); 22}
「色々試しましたが」具体的に何を試しましたか？明示して下さい。
main.jsが質問本文に含まれてないのは何故でしょうか。HTMLで参照されている以上質問本文に加えるべきです。main.jsが今回の問題に関係があるかどうかを判断するのは回答者です。main.jsが提示されない限りmain.jsが問題の原因である可能性が消えません。
お返事ありがとうございます。失礼いたしました。内容修正させて頂きました。
回答1件
0
ベストアンサー
中央に寄せることができれば解決であれば、以下のCSSを追加してみるとどうでしょうか？
css
1header { 2 display: flex; 3 justify-content: space-between; 4 position: fixed; 5 z-index: 999; 6 padding: 0; 7 margin: 0; 8 background: rgba(200, 255, 255, 1); 9 inset: auto 0; /* ←これ */ 10}
メインコンテンツにヘッダーがかぶっているのも気になるのですが、そこは大丈夫ですか？
なお、固定配置をするとマージンが効かなくなる理由は、固定配置や絶対配置の時にleft rightがautoだと、margin-left: auto margin-right: autoはmargin-left: 0 margin-right: 0として扱われる、という仕様によるものです。
（↓こちらの表の「✔ ✘ ✔ any」の欄）
https://www.w3.org/TR/css-position-3/#abspos-auto
投稿2022/08/10 05:11
編集2022/08/10 05:37
総合スコア36104
回答ありがとうございます。
inset: auto 0;
で出来ました！
固定配置するとマージンが効かなくなるのですね！勉強になりました。ありがとうございます！
メインコンテンツにヘッダーが被っているとのことですが、こちらのブラウザでは問題がないです。
確認させて頂きます。ご指摘ありがとうございました！
あなたの回答
tips
プレビュー
