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

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

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

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1040閲覧

レスポンシブデザインを行った際、謎の空白が生まれる。

chikasei427

総合スコア7

CSS3

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/07/19 01:46

編集2020/07/19 02:08

前提・実現したいこと

レスポンシブデザインを実装していますが、
画面幅が狭くなった際、謎の空白ができてしまいます。
ディベロッパーツールで確認しても、marginやpaddingは見つかりませんでした。

起きている問題

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/front-page.css"> 8 <script src="https://kit.fontawesome.com/54c0367ea1.js" crossorigin="anonymous"></script> 9 <title>Write-書くためのテーマ</title> 10</head> 11<body> 12 <!-- ???? --> 13 <input type="checkbox" id="menu"> 14 <label for="menu" class="open" id="open"> 15 <div></div> 16 <div></div> 17 <div></div> 18 </label> 19 <label for="menu" class="back"></label> 20 <!-- ???? --> 21 <div class="nav-sp"> 22 <!-- <label for="menu" class="close">❌</label> --> 23 <ul> 24 <li><a href="">ホーム</a></li> 25 <li><a href="">ページ</a></li> 26 <li><a href="">タイポグラフィー</a></li> 27 <li><a href="">お問い合わせ</a></li> 28 <li><i class="fas fa-search"></i></li> 29 </ul> 30 </div> 31 <div class="container"> 32 <header> 33 <div class="logo"> 34 <h1><a href="#">Write</a></h1> 35 <p>書くためのテーマ</p> 36 </div> 37 <nav> 38 <ul> 39 <li><a href="#">ホーム</a></li> 40 <li><a href="#">ページ</a></li> 41 <li><a href="#">タイポグラフィー</a></li> 42 <li><a href="#">お問い合わせ</a></li> 43 <li><i class="fas fa-search"></i></li> 44 </ul> 45 </nav> 46 </header> 47 <div class="main-visual"> 48 <img src="image/cropped-nicole-honeywill-730102-unsplash.jpg" alt="メインビジュアル"> 49 </div> 50 <!-- /.main-visual --> 51 <div class="main-message"> 52 Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。 53 </div> 54 <article class="article"> 55 <div class="article-left"> 56 <a href="#">2018年9月1日</a> 57 </div> 58 <div class="article-right"> 59 <h2> 60 <a href="#">書くためのテーマ</a> 61 </h2> 62 <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p> 63 </div> 64 <div class="article-left"> 65 <a href="#">2018年3月5日</a> 66 </div> 67 <div class="article-right"> 68 <h2> 69 <a href="#">画像付きの投稿</a> 70 </h2> 71 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p> 72 </div> 73 <div class="article-left"> 74 <a href="#">2018年3月5日</a> 75 </div> 76 <div class="article-right"> 77 <h2> 78 <a href="#">引用付きの投稿</a> 79 </h2> 80 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p> 81 </div> 82 <div class="article-left"> 83 <a href="#">2018年3月5日</a> 84 </div> 85 <div class="article-right"> 86 <h2> 87 <a href="#">コメント付きの投稿</a> 88 </h2> 89 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p> 90 </div> 91 <div class="article-left"> 92 <a href="#">2018年3月3日</a> 93 </div> 94 <div class="article-right"> 95 <h2> 96 <a href="#">吾輩は猫である</a> 97 </h2> 98 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p> 99 </div> 100 <div class="article-left article-last"> 101 <a href="#">2018年3月3日</a> 102 </div> 103 <div class="article-right article-last"> 104 <h2> 105 <a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a> 106 </h2> 107 <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p> 108 <div class="pagenation"> 109 <p>1</p> 110 <a href="#">2</a> 111 <a href="#">3</a> 112 <a href="#">次へ</a> 113 </div> 114 </div> 115 </article> 116 <!-- article--> 117 <div class="about"> 118 <div class="about-left"> 119 <figure> 120 <img src="image/profile-m.png" alt="男性の画像"> 121 </figure> 122 <div class="about-left-items"> 123 <h3>John Doe</h3> 124 <a href="#"><i class="fab fa-twitter fa-fw"></i></a> 125 <a href="#"><i class="fab fa-facebook-f fa-fw"></i></a> 126 <a href="#"><i class="fab fa-instagram fa-fw"></i></a> 127 </div> 128 <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク(最大7つ)を設定することができます。</p> 129 </div> 130 <div class="about-right"> 131 <div class="about-right-item"> 132 <div class="item1 item"> 133 <h3>フッター右</h3> 134 <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p> 135 </div> 136 </div> 137 <div class="about-right-item"> 138 <div class="item2 item"> 139 <h3>最近の投稿</h3> 140 <span><a href="#">書くためのテーマ</a></span> 141 <span><p>2018年9月1日</p></span> 142 <span><a href="#">画像付きの投稿</a></span> 143 <span><p>2018年3月5日</p></span> 144 <span><a href="#">引用付きの投稿</a></span> 145 <span><p>2018年3月5日</p></span> 146 </div> 147 </div> 148 <div class="about-right-item"> 149 <div class="item3 item"> 150 <h3>カテゴリー</h3> 151 <a href="#">サンプル投稿</a> 152 <a href="#">投稿フォーマット</a> 153 <span><a href="#">普通の投稿</a></span> 154 <div class="wrap"> 155 <input type="text" placeholder="検索 …"> 156 </div> 157 </div> 158 </div> 159 </div> 160 </div> 161 <!-- /.about --> 162 <footer class="footer"> 163 <div class="footer-left"> 164 <a href="#"><i class="fab fa-twitter fa-fw"></i></a> 165 <a href="#"><i class="fab fa-facebook-f fa-fw"></i></a> 166 <a href="#"><i class="fab fa-instagram fa-fw"></i></a> 167 </div> 168 <div class="footer-right"> 169 <small> 170 Powered by <a href="#">WordPress</a> | Theme: <a href="#">Write</a> by Themegraphy 171 </small> 172 </div> 173 </footer> 174 <!-- /.footer --> 175 </div> 176 <!-- /.container --> 177 <script src="script.js"></script> 178</body> 179</html>

イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

試したこと

文字列検索で全角スペースを入れてみましたが、見つかりませんでした。
ハンバーガーメニューが原因かと思い、ハンバーガーメニューを
非表示にしてみても空白が生まれてしまいます。

本文が入りきらないので、CSSのコードを追記に記述させて頂きます。

ご回答頂けますと幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

幅を狭めたときに空白が生じる時はwidth系のCSSが原因だったりします。
隙間が生じるときに原因になり得るwidth指定を削除してみてください。

投稿2020/07/19 02:09

編集2020/07/19 02:10
FrontEnd_Japan

総合スコア271

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

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

chikasei427

2020/07/19 04:20

全てのwidthをmax-widthに変更することで空白が無くなりました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問