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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

解決済

ヘッダーを固定したら wrapperが効かなくなってしまいました。なぜでしょうか?

negiremi
negiremi

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

1回答

0評価

0クリップ

345閲覧

投稿2022/08/10 04:35

編集2022/08/11 22:31

position : fixed;でヘッダーを固定したところ
class="wrapper"で左右に余白を作っていましたが、左端に寄ってしまいました。
誤字がないか確認したり、コードを入力し直したりしました。半日試行錯誤しましたが、どうしてもwrapperが効きません、、なぜだか分かる方いらっしゃいますか?
イメージ説明

html

<!doctype html> <html> <head> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <meta charset="UTF-8"> <title>grid design</title> </head> <body> <header class="wrapper"> <h1 class="wrapper"><strong>Grid Design</strong></h1> <div class="sp-menu"> <span class="material-icons" id="open">menu</span> </div> <div class="overlay"> <span class="material-icons" id="close">close</span> <nav> <ul class="wrapper"> <li><a href="#">PRODUCT</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </header> <section id="photo" class="wrapper"> <ul class="kontena"> <li><a href=""><img src="img/item1.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item2.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item3.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item4.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item5.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item6.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item7.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> <li><a href=""><img src="img/item8.jpeg" class="item"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a></li> </ul> </section> <footer class="wrapper"> <ul> <li><a href="" target="blank">INSTAGRAM</a></li> <li><a href="" target="blank">TWITTER</a></li> <li><a href="" target="blank">FACEBOOK</a></li> </ul> <p class="copyright">©︎Grid design</p> </footer> <script src="js/main.js"></script> </body> </html>

css

@charset "UTF-8"; /* CSS Document */ body{ font-size: 1rem; margin-bottom: 500px; } .wrapper{ width: 1300px; margin: 0 auto; background-color: pink; } h1{ font-size: 1.2rem; padding: 15px 0 15px 0; } .kontena{ display: grid; width: 100%; height: auto; grid-template-columns: auto auto auto auto; grid-auto-rows: auto auto; gap: 35px; padding: 0; padding-top: 100px; } .item{ width: 100%; margin-bottom: 5px; } li{ list-style: none; } #photo p{ font-size: 0.75rem; margin: 0; } a{ text-decoration: none; color: black; transition: all 0.5s; } a:hover { opacity: 0.7; } /*フッター*/ footer{ max-width: 100%; display: flex; justify-content: space-between; } footer li{ margin-right: 20px; } footer ul{ display: flex; padding: 0; margin-bottom: 5px; } footer a{ text-decoration: none; font-size: 0.75rem; } .copyright{ padding: 0; font-size: 0.5rem; } /*ハンバーガーメニュー*/ header{ display: flex; justify-content: space-between; position: fixed; z-index: 999; padding: 0; margin: 0; background: rgba(200,255,255,1); } .sp-menu #open{ padding: 15px 0 15px 0; font-size: 2rem; cursor: pointer; } .overlay{ position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(255,255,255,0.95); margin-top:20px; opacity: 0; pointer-events: none; } .overlay #close { font-size: 2rem; display: block; text-align: right; cursor: pointer; } .overlay ul{ text-align: center; margin-top: 50px; } .overlay li{ margin-top: 30px; } .overlay.show{ opacity: 1; pointer-events: auto; } .sp-menu #open.hide{ display: none; }

javascript

'use strict'; { const open = document.getElementById('open'); const overlay = document.querySelector('.overlay'); const close = document.getElementById('close'); open.addEventListener('click', () => { overlay.classList.add('show'); open.classList.add('hide'); }); close.addEventListener('click', () => { overlay.classList.remove('show'); open.classList.remove('hide'); }); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

slemntqe

2022/08/10 04:39

「効か亡くなって」「半バーガーメニュー」誤字が目立ちますので訂正して下さい。
slemntqe

2022/08/10 04:40

「色々試しましたが」具体的に何を試しましたか?明示して下さい。
slemntqe

2022/08/10 04:42

main.jsが質問本文に含まれてないのは何故でしょうか。HTMLで参照されている以上質問本文に加えるべきです。main.jsが今回の問題に関係があるかどうかを判断するのは回答者です。main.jsが提示されない限りmain.jsが問題の原因である可能性が消えません。
negiremi

2022/08/10 04:49

お返事ありがとうございます。失礼いたしました。内容修正させて頂きました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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