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

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

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

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

HTML5

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

Q&A

解決済

2回答

249閲覧

余分なスペースを無くしたい

risacuspin

総合スコア18

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2019/06/29 12:09

フッターの上にグレーの余分なスペースができてしまいます。(iPhone6/7/8で設定)
このスペースを消したいです。

・表示領域の指定をしようと<header>から<footer><div>で囲み、paddingをつけましたができませんでした。
・フォームの背景(薄いグレー)にheightをつけましたができませんでした。

ご教授よろしくお願いします。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<title>Contact|風景写真家「SNAPPERS」</title> 7<link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet"> 8<link rel="stylesheet" href="css/style.css"> 9</head> 10<body id="contact"> 11<div class="all-wrapper"> 12 13 <!-- header始まり --> 14 <header> 15 <div class="logo"> 16 <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a> 17 </div> 18 <nav> 19 <ul class="global-nav"> 20 <li><a href="portfolio.html">Portfolio</a></li> 21 <li><a href="about.html">About</a></li> 22 <li><a href="contact.html">Contact</a></li> 23 </ul> 24 </nav> 25 </header> 26 <!-- header終わり --> 27 28 <!-- wrap始まり --> 29 <div id="wrap"> 30 <div class="content"> 31 <div class="main-center"> 32 <h1>Contact</h1> 33 <p>SNAPPERSへのアクセス方法、お問い合わせ、撮影のご依頼フォームのページです。お気軽にお問い合わせください。</p> 34 <section class="access clearfix"> 35 <h2 class="icon">Access</h2> 36 <table> 37 <tr> 38 <th>所在地住所</th> 39 <td>〒123-4567<br>静岡県伊東市伊豆高原◯△☆-12</td> 40 </tr> 41 <tr> 42 <th>電話番号</th> 43 <td>012-3456-7890</td> 44 </tr> 45 <tr> 46 <th>電車でのアクセス</th> 47 <td>伊豆急行「伊豆高原」駅より徒歩15分</td> 48 </tr> 49 <tr> 50 <th>お車でのアクセス</th> 51 <td>伊豆山I.Cより国道135号線経由で50分</td> 52 </tr> 53 </table> 54 <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d6546.074331962241!2d139.10345752619082!3d34.880413022945305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z5LyK6LGG6auY5Y6f!5e0!3m2!1sja!2sjp!4v1561650058079!5m2!1sja!2sjp" width="460" height="220" frameborder="0" style="border:0" allowfullscreen></iframe> 55 </section> 56 <section> 57 <h2 class="icon">Contact form</h2> 58 <div class="form"> 59 <form> 60 <dl> 61 <dt><span class="required">お名前</span></dt> 62 <dd><input type="text" name="name" class="name" required></dd> 63 <dt><span class="required">メールアドレス</span></dt> 64 <dd><input type="email" name="email" class="email" required></dd> 65 <dt>お電話番号</dt> 66 <dd><input type="tel" name="tel" class="tel"></dd> 67 <dt>お問合せ種別</dt> 68 <dd> 69 <select name="type" class="type"> 70 <option value="撮影のご依頼">撮影のご依頼</option> 71 <option value="講演・各種メディア出演のご依頼">講演・各種メディア出演のご依頼</option> 72 <option value="その他お問い合わせ">その他お問い合わせ</option> 73 </select> 74 </dd> 75 <dt>ご希望のご連絡方法</dt> 76 <dd> 77 <input type="radio" class="contact1" name="contact" value="Eメール">Eメール 78 <input type="radio" class="contact2" name="contact" value="お電話">お電話 79 </dd> 80 <dt>メッセージ</dt> 81 <dd><textarea name="message" class="message"></textarea></dd> 82 </dl> 83 <button type="submit" class="btn">送信</button> 84 </form> 85 <div class="attention"> 86 <p>※ 「<span class="required"></span>」の付いている項目は必須項目です。<br>※メッセージ送信後、48時間内に担当者よりご連絡いたします。</p> 87 </div> 88 </div> 89 </section> 90 </div> 91 </div> 92 </div> 93 <!-- wrap終わり --> 94 95 <!-- footer始まり --> 96 <footer> 97 <small>(c)2017 Hattori-studio.</small> 98 </footer> 99 <!-- footer終わり --> 100 101</div> 102</body> 103</html>

css

1#contact { 2 background-image: url("../images/bg-contact.jpg"); 3 background-repeat: no-repeat; 4 background-position: center top; 5 background-attachment: fixed; 6 background-size: 100% auto; 7} 8 9#contact .access table { 10 float: left; 11} 12 13#contact .access th, 14#contact .access td { 15 text-align: left; 16 vertical-align: top; 17 line-height: 2.5; 18} 19 20#contact .access td { 21 padding-left: 30px; 22} 23 24#contact .access iframe { 25 width: 460px; 26 float: right; 27} 28 29#contact .form { 30 background-color: #eaeaea; 31 padding: 30px 50px; 32} 33 34#contact .form dl dt { 35 width:165px; 36 padding: 10px 0; 37 float: left; 38 clear: both; 39} 40 41#contact .form dl dd { 42 padding: 10px 0; 43} 44 45#contact .form .name { 46 width: 240px; 47 height: 30px; 48} 49 50#contact .form .email { 51 width: 300px; 52 height: 30px; 53} 54 55#contact .form .tel { 56 width: 240px; 57 height: 30px; 58} 59 60#contact .form .type { 61 width: 180px; 62 height: 30px; 63} 64 65#contact .form .message { 66 width: 660px; 67 height: 150px; 68} 69 70#contact .form button { 71 background-color: #009cd3; 72 color: #ffffff; 73 font-size: 20px; 74 width: 120px; 75 display: block; 76 text-align: center; 77 line-height: 50px; 78 border-radius: 5px; 79 border: 3px solid #009cd3; 80 margin-left: 165px; 81} 82 83#contact .form button:hover { 84 background-color: #ffffff; 85 color: #009cd3; 86 cursor: pointer; 87} 88 89#contact .form .required:after { 90 content: " * "; 91 color: #ff0000; 92} 93 94#contact .form .attention { 95 margin: 20px 0 0 165px; 96} 97 98@media screen and (max-width:600px) { 99 /* 画面サイズが600px以下の場合に適用 */ 100 101 body { 102 font-size: 3.5vw; 103 } 104 105 h1 { 106 font-size: 7.2vw; 107 } 108 109 h2 { 110 font-size: 6vw; 111 } 112 113 header { 114 width: auto; 115 margin: 0 5%; 116 } 117 118 .logo { 119 float: none; 120 margin-top: 60px; 121 text-align: center; 122 } 123 124 .global-nav { 125 float: none; 126 margin-top: 40px; 127 text-align: center; 128 } 129 130 .global-nav li { 131 display: inline; 132 float: none; 133 margin: 0 8px; 134 } 135 136 #wrap { 137 margin-top: 40px; 138 padding: 35px 0 0; 139 } 140 141 .content { 142 width: 100%; 143 } 144 145 .main { 146 float: none; 147 width: auto; 148 margin: 0 5%; 149 } 150 151 h2 img { 152 max-width: 100%; 153 } 154 155 #portfolio { 156 background-image: url("../images/bg-portfolio-sp.jpg"); 157 } 158 159 .sidebar { 160 width: auto; 161 float: none; 162 margin: 0; 163 padding: 30px 10% 10px; 164 background-color: #f7f6f4; 165 } 166 167 .career { 168 width: auto; 169 margin: 0; 170 } 171 172 .main-center { 173 float: none; 174 width: auto; 175 margin: 0 5%; 176 } 177 178 .profile { 179 margin-top: 40px; 180 padding: 0; 181 } 182 183 .profile-txt { 184 float: none; 185 width: auto; 186 margin: 0; 187 } 188 189 #about { 190 background-image: url("../images/bg-about-sp.jpg"); 191 } 192 193 .career { 194 width: auto; 195 margin: 0; 196 padding: 0 0 50px 0; 197 float: none; 198 font-family: 'Bitter', serif; 199 } 200 201 table { 202 line-height: 1.5; 203 border-spacing: 0; 204 border-collapse: collapse; 205 } 206 207 #about .career td { 208 width: 660px; 209 padding: 0 0 0 5px; 210 border: 1px solid #cccccc; 211 } 212 213 #about .profile-txt p { 214 margin: 0 200px 10px 0; 215 } 216 217 .icon-1 { 218 margin-bottom: 13px; 219 } 220 221 #all-wrapper { 222 width:100%; 223 overflow:hidden; 224} 225 226 #contact { 227 background-image: url("../images/bg-contact-sp.jpg"); 228 } 229 230 #contact .access iframe { 231 max-width: 100%; 232 padding: 35px 0 0; 233 width: 335px; 234 float: none; 235 } 236 237 #contact .access th { 238 padding: 0; 239 } 240 241 #contact .access td { 242 padding: 0 -5px 0 0; 243 } 244 245 246 .form { 247 overflow:hidden; 248 } 249 250 #contact .access table { 251 float: none; 252 } 253 254 #contact .access td { 255 padding-left: 0px; 256 } 257 258 #contact .form dt { 259 padding: 10px 0; 260 margin: 0 0 0 -40px; 261 } 262 263 #contact .form dd { 264 padding: 10px 0; 265 margin: 0 0 0 -40px; 266 } 267 268 #contact .form .name { 269 width: 300px; 270 height: 30px; 271 margin: 0 10px 0 5px; 272 } 273 274 #contact .form .email { 275 width: 300px; 276 height: 30px; 277 margin: 0 10px 0 5px; 278 } 279 280 #contact .form .tel { 281 width: 300px; 282 height: 30px; 283 margin: 0 10px 0 5px; 284 } 285 286 #contact .form .type { 287 width: 300px; 288 height: 30px; 289 margin: 0 10px 0 5px; 290 } 291 292 #contact .form .message { 293 width: 300px; 294 height: 150px; 295 margin: 0 10px 0 5px; 296 } 297 298 #contact .form button { 299 font-size: 15px; 300 width: 100px; 301 height: 50px; 302 margin: 0 30px 0 60px; 303 } 304 305 #contact .attention p { 306 width: 320px; 307 margin: 0 10px 0 -205px; 308 font-size: 2.9vw; 309 } 310 311 #contact .form { 312 background-color: #eaeaea; 313 padding: 0px 50px 10px 50px; 314 } 315 316 #contact .icon { 317 padding: 50px 0 0 0; 318 } 319 320 #contact .contact1 { 321 margin: 40px 5px 0 -150px; 322 } 323}

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSSをこのように修正すればグレーの下余白は消えます。

css

1#contact .form { 2 background-color: #eaeaea; 3 padding: 0px 43px; 4}

投稿2019/06/29 12:35

yasutomi

総合スコア2937

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

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

0

これでどうですか?

CSS

1@media screen and (max-width:600px) { 2 /* 画面サイズが600px以下の場合に適用 */ 3 4 #contact .form { 5 background-color: #eaeaea; 6 padding: 0px 50px 10px 50px; /* ← ここ*/ 7 }

CSS

1 padding: 0px 50px 0px 50px; /* ← 下を「0(ゼロ)」*/

投稿2019/07/02 10:21

yoshinavi

総合スコア3521

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問