Q&A
HTML、CSSが別ファイルなのであればコードも別にしてください
手元で再現確認する際に、結構手間になるのです。
ファイル名
```言語名
コード
```
ファイル名
```言語名
コード
```
前提
htmlで模写コーディングしていたのですが、余白ができてしまいました。marginやpaddingは0にしたのですが直すことはできませんでした。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
・空白をなくす。
発生している問題・エラーメッセージ
タイトル通りheaderが親要素を貫通して右側にずれてしまうことによって左側に余白ができてしまっています。また、上側にも同様のものとみられる空白があります。
該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ページタイトル</title> <link rel="stylesheet" href="css/stylesheets.css"> <link rel="shortcut icon" href="img/favicon.ico"> </head> <body> <header id=header><!-- ヘッダー --> <img class=logo src=img/logo.svg alt=ロゴ><!-- ロゴ --> </header> <main><!-- メイン --> <section class=wrapper id=Aspecial><!-- A special, long article in a newspaper or magazine --> <h1>A special, long article in a newspaper or magazine</h1><!-- A special, long article in a newspaper or magazineタイトル --> <p><!-- A special, long article in a newspaper or magazineテキスト --> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <br> テキストテキストテキストテキストテキストテキストテキストテキスト </p> <div class=flex> <a class=item href=#><!-- Achiveリンク --> <img src=img/magazine-archive.jpg alt=magazine-archive><!-- Achive画像部分 --> <div class=text><!-- Achive文字部分 --> <p class=text-title>Achive</p> <p>テキストテキストテキストテキストテキストテキストテキスト</p> </div> </a> <a class=item href=#><!-- Newリンク --> <img src=img/magazine-new.jpg><!-- New画像部分 --> <div class=text><!-- New文字部分 --> <p class=text-title>New</p> <p>テキストテキストテキストテキストテキストテキストテキスト</p> </div> </a> </div> </section> <section class=wrapper id=Fashion&Style><!-- Fasion & Style --> <h1>Fashion & Style</h1><!-- Fasion & Styleタイトル --> <p><!-- Fasion & Styleテキスト --> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト <br> テキストテキストテキストテキストテキストテキストテキストテキスト </p> <button class=ReadMorebutton type=button><a href=#>Read More</a></button><!-- Read Moreボタンリンク --> <img src=img/fasion.jpg alt=Fasion&Styleimage><!-- Fasion & Styleの画像 --> </section> <section class=wrapper id=Catalog><!-- Catalog --> <div class=flex><!-- Catalogの画像左、タイトルテキスト右 --> <img src=img/catalog.jpg alt=Catalogimage><!-- Catalogの画像 --> <div class=flex-titletext><!-- Catalogのタイトルとテキストまとめ --> <h1>Catalog</h1><!-- Catalogタイトル --> <p><!-- Catalogテキスト --> テキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキスト テキストテキストテキストテキストテキストテキストテキストテ キスト テキストテキストテキストテキストテキストテキストテキストテキスト テキスト </p> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキスト テキストテキストテキストテキストテキストテキストテキストテ キスト テキストテキストテキストテキストテキストテキストテキストテキスト テキスト </p> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキスト テキストテキストテキストテキストテキストテキストテキストテ キスト テキストテキストテキストテキストテキストテキストテキストテキスト テキスト </p> </div> </div> </section> <section class=wrapper id=Antique><!-- Antiue --> <div class=flex><!-- Antiqueのタイトルテキスト左、画像右 --> <div class=flex-titletext> <h1>Antique</h1><!-- Antiqueタイトル --> <p><!-- Antiqueテキスト --> テキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキスト テキストテキストテキストテキストテキストテキストテキストテ キスト テキストテキストテキストテキストテキストテキストテキストテキスト テキスト </p> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキ ストテキスト テキストテキストテキストテキストテキストテキストテキストテ キスト テキストテキストテキストテキストテキストテキストテキストテキスト テキスト </p> <button class=ReadMorebutton type=button><a href=#>Read More</a></button><!-- Read Moreボタンリンク --> </div> <img src=img/antique.jpg alt=Antipueimage><!-- Anticueの画像 --> </div> </main> <footer id=footer><!-- フッター --> <div class=flex id=footer-black><!-- フッター背景黒 --> <img class=logo src=img/logo.svg><!-- ロゴ --> <diV class=flex-titletext-footer> <!-- footerのタイトルとテキスト、リストの方 --> <h2>タイトル</h2> <ul> <li>::before"テキストテキストテキスト"</li> <li>::before"テキストテキストテキスト"</li> <li>::before"テキストテキストテキスト"</li> <li>::before"テキストテキストテキスト"</li> <li>::before"テキストテキストテキスト"</li> </ul> </diV> <div class=flex-titletext-footer><!-- footerのタイトルとテキスト --> <h2>タイトル</h2> <p> テキストテキストテキストテキストテキストテキストテキス トテキストテキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキストテキストテ キストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <div id=footer-white><!-- フッター背景白 --> <p>© Mag88</p> </div> </footer> </body> </html>
CSS
@charset "UTF-8"; html { font-size: 100%; } body { font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif"; font-size: 0.875rem; color: #2a2a2a; width:100%; } .wrapper{ max-width:1200px; margin: 0 auto; padding: 0 5%; } header{ height:100vh; background-image:url("../img/mainvisual.jpg"); background-size:cover; background-position: center top; background-repeat: no-repeat; position:relative; width:100%; } #footer-black{ max-width:1200px; }
試したこと
marginやpaddingは弄りましたが解決には至りませんでした。
補足情報（FW/ツールのバージョンなど）
とくになし。
回答1件
0
ベストアンサー
ブラウザデフォルトの余白があるので、それをリセットすればいいでしょう。
とりあえず、body に margin: 0; を設定すればメインビジュアル周りの余白はなくなります。
ブラウザデフォルトのスタイルが、このように影響を及ぼしたり、ブラウザ間で異なることがあるので、これをリセットするリセットCSSというのがありますので、これを導入することを検討してもいいでしょう。
投稿2022/09/13 00:09
総合スコア33699
あなたの回答
tips
プレビュー
