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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2051閲覧

外枠と中身に微妙なずれが生じてしまいました。

takawork

総合スコア95

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/04 16:03

編集2020/09/05 07:10

イメージ説明

画像のように外枠と中身の間にスキマが出来てしまいました。
どうすればこのスキマを無くせますか?

scss

1/* CSSのリセット */ 2* { 3 margin: 0; 4 padding: 0; 5 -webkit-box-sizing: border-box; 6 box-sizing: border-box; 7 outline: none; 8 font-family: 'Roboto', sans-serif; 9} 10 11 12 13/* メインビジュアル */ 14.mv { 15 height: 500px; 16 background-color: #ABCDD6; 17 /* MV右側 */ 18} 19 20.mv-item { 21 max-width: 1140px; 22 margin: 0 auto; 23 display: -webkit-box; 24 display: -ms-flexbox; 25 display: flex; 26} 27 28.mv-left { 29 width: 50%; 30 padding-top: 20px; 31 padding-left: 35px; 32 /* border:2px solid red; */ 33} 34 35.mv-left h1 { 36 font-size: 36px; 37 /* border:2px solid red; */ 38} 39 40.mv-left-search span { 41 font-size: 28px; 42 color: red; 43 font-weight: bold; 44} 45 46.mv-input { 47 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); 48 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); 49 border-radius: 8px; 50 display: -webkit-box; 51 display: -ms-flexbox; 52 display: flex; 53 margin-top: 8px; 54 max-width: 480px; 55 /* border:2px solid red; */ 56} 57 58.mv-input > * { 59 height: 50px; 60 padding: 8px; 61 -webkit-box-sizing: border-box; 62 box-sizing: border-box; 63 outline: none; 64 border: 2px solid black; 65} 66 67.mv .search-input { 68 width: 100%; 69 font-size: 16px; 70 border-right: none; 71 border-radius: 8px 0 0 8px; 72} 73 74.mv .search-btn { 75 width: 100px; 76 font-size: 32px; 77 line-height: 1; 78 cursor: pointer; 79 border-radius: 0 8px 8px 0; 80 background-color: #ffcc00; 81} 82 83.mv .recomend-keyword { 84 padding-top: 12px; 85} 86 87.mv .recomend-keyword-tag { 88 list-style: none; 89 padding-top: 12px; 90 display: -webkit-box; 91 display: -ms-flexbox; 92 display: flex; 93 -ms-flex-wrap: wrap; 94 flex-wrap: wrap; 95} 96 97.mv .recomend-keyword-tag a { 98 background-color: #00acee; 99 border: 2px solid black; 100 margin-left: 6px; 101 margin-top: 6px; 102 border-radius: 4px; 103 padding: 2px 10px; 104 font-weight: bold; 105 cursor: pointer; 106 font-size: 12px; 107 font-weight: bold; 108 display: block; 109 padding: 7px; 110 font-size: 12px; 111 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); 112 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); 113 border-radius: 8px; 114} 115 116.mv-right { 117 width: 50%; 118 padding-top: 20px; 119 padding-right: 35px; 120 position: relative; 121 /* border:2px solid red; */ 122} 123 124.mv .japanMap { 125 height: 400px; 126 margin: 0 auto; 127 /* border:2px solid red; */ 128} 129 130.mv .map-area { 131 -webkit-box-sizing: border-box; 132 box-sizing: border-box; 133 width: 66px; 134 border: 2px solid black; 135 border-radius: 6px; 136 overflow: hidden; 137} 138 139.mv .map-area li { 140 list-style: none; 141 border-bottom: 2px solid black; 142 padding: 2px; 143 width: 66px; 144 height: 28px; 145 font-size: 14px; 146 font-weight: 700; 147 overflow: hidden; 148 background-color: #ffcc00; 149 display: -webkit-box; 150 display: -ms-flexbox; 151 display: flex; 152 -webkit-box-pack: center; 153 -ms-flex-pack: center; 154 justify-content: center; 155} 156 157.mv .map-area a { 158 color: #030201; 159 text-decoration: none; 160} 161 162.mv .map-area li:last-child { 163 border-bottom: none; 164} 165 166/* 以下2列(.multi)の場合 */ 167.map-area.multi { 168 display: -webkit-box; 169 display: -ms-flexbox; 170 display: flex; 171 width: 136px; 172 -ms-flex-wrap: wrap; 173 flex-wrap: wrap; 174} 175 176.map-area.multi li:nth-child(odd) { 177 border-right: 2px solid black; 178} 179 180.map-area.multi li:nth-last-child(2) { 181 border-bottom: none; 182} 183 184/* 県ごと */ 185.map-area.kyushu { 186 position: absolute; 187 top: 100px; 188 left: 10px; 189 -webkit-box-shadow: 0 2px 4px black; 190 box-shadow: 0 2px 4px black; 191 border-radius: 8px; 192} 193 194.map-area.chugoku { 195 position: absolute; 196 top: 100px; 197 left: 80px; 198 -webkit-box-shadow: 0 2px 4px black; 199 box-shadow: 0 2px 4px black; 200 border-radius: 8px; 201} 202 203.map-area.kansai { 204 position: absolute; 205 top: 156px; 206 left: 150px; 207 -webkit-box-shadow: 0 2px 4px black; 208 box-shadow: 0 2px 4px black; 209 border-radius: 8px; 210} 211 212.map-area.shikoku { 213 position: absolute; 214 top: 320px; 215 left: 100px; 216 -webkit-box-shadow: 0 2px 4px black; 217 box-shadow: 0 2px 4px black; 218 border-radius: 8px; 219} 220 221.map-area.chubu { 222 position: absolute; 223 top: 300px; 224 left: 245px; 225 -webkit-box-shadow: 0 2px 4px black; 226 box-shadow: 0 2px 4px black; 227 border-radius: 8px; 228} 229 230.map-area.hokuriku { 231 position: absolute; 232 top: 100px; 233 left: 290px; 234 -webkit-box-shadow: 0 2px 4px black; 235 box-shadow: 0 2px 4px black; 236 border-radius: 8px; 237} 238 239.map-area.touhoku { 240 position: absolute; 241 top: 200px; 242 left: 400px; 243 -webkit-box-shadow: 0 2px 4px black; 244 box-shadow: 0 2px 4px black; 245 border-radius: 8px; 246} 247 248.map-area.kantou { 249 position: absolute; 250 top: 300px; 251 left: 400px; 252 -webkit-box-shadow: 0 2px 4px black; 253 box-shadow: 0 2px 4px black; 254 border-radius: 8px; 255} 256 257.map-area.hokkaido { 258 position: absolute; 259 top: 60px; 260 left: 430px; 261 -webkit-box-shadow: 0 2px 4px black; 262 box-shadow: 0 2px 4px black; 263 border-radius: 8px; 264} 265 266.map-area.okinawa { 267 position: absolute; 268 top: 400px; 269 left: 10px; 270 -webkit-box-shadow: 0 2px 4px black; 271 box-shadow: 0 2px 4px black; 272 border-radius: 8px; 273} 274 275

【HTML】
https://harigami.jp/cd?hsh=b527d0d6-a731-4170-8dfc-071eaa403d17

コードが長すぎて貼れなかったので、上のサイトに貼りました。

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

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

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

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

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

Lhankor_Mhy

2020/09/05 02:18

SCSSが省略されすぎていますので、問題が再現するコードをご提示ください。
takawork

2020/09/05 06:40

該当部分の全体のscssを載せてみました。よろしくお願いします。
Lhankor_Mhy

2020/09/05 06:45

コンパイルエラーが出ます。
Lhankor_Mhy

2020/09/05 06:47

.mv { 〜〜〜 この部分が不要であるように思えたので削除してみました。 やはり、問題が再現しませんでした。 takaworkさんの環境ではご提示のコード*だけ*で問題が再現しますか?
Lhankor_Mhy

2020/09/05 06:56

ああ、なるほど。 HTMLの最初に <section class="mv"> <div class="mv-item"> が、省略されているのですね? しかしながら、やはり問題が再現しませんでした。
takawork

2020/09/05 07:09

修正で新たにscssとHTMLを貼りました。このコードで該当部分は表示できております。これで再現出来ますでしょうか?
Lhankor_Mhy

2020/09/05 07:16

拝見しましたが、問題が再現しませんでした。 ただ、いくつかのスクリプトのコードが不明だったので、それは無視しています。
takawork

2020/09/05 07:18

回答者様の方では綺麗に表示されているということでしょうか?
Lhankor_Mhy

2020/09/05 07:21

はい、そうですね。 もしかしてなのですが、ズームしてませんか?
takawork

2020/09/05 07:26

なるほど、ズームをしておりました。実際のサイズに変更をしたところ、綺麗に写りました。ありがとうございます。 このようなデザインは基本的には、ズームをしたりすると崩れるのでしょうか?一般的なサイトはこういったズームに対してもレスポンシブ設定を行っているのでしょうか? 今後のサイト制作の方針にしたいと思います。
Lhankor_Mhy

2020/09/05 07:34

ズームに対して細かい表示の対応をするのは難しいかと思います。 ご解決されて何よりです。 自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself ついでに一言言わせていただきますと、次に質問するときは、初めから問題が再現するコードをご提示ください。時間の無駄です。 技術が不足しているのは学習途中ですから恥じる必要はないと思いますが、これはコミュニケーションの問題ですから、解消可能なはずです。
takawork

2020/09/05 07:36

かしこまりました。必要十分なコードかと思っておりましたが、確認不足でした。次回からは気をつけます。ご回答ありがとうございました。またよろしくお願いします。
guest

回答1

0

自己解決

画面の拡大をしていたことが原因でした。Lhankor_Mhyさんに解決して頂きました。ありがとうございます。

投稿2020/09/05 07:29

takawork

総合スコア95

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問