CSS 画面下部の空白を削除したい

前提・実現したいこと

ページ下部にある空白を消したいです。

発生している問題・エラーメッセージ

ページ下部の空白

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Forest town</title>
7    <link rel="stylesheet" type="text/css" href="style.css">
8    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
9    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
10    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
11</head>
12
13<body>
14    <header>
15        <h1>Forest town</h1>
16        <nav>
17            　<ul>
18                <li class="li-1"><a href="li-1/index.html">会社概要</a></li>
19                <li class="li-2"><a href="li-2/index.html">ニュース</a></li>
20                <li class="li-3">サービス</li>
21                <li class="li-4">お問い合せ</li>
22            </ul>
23        </nav>
24    </header>
25
26    <main>
27        <section id="main-visual">
28            <img src="img/main-visual.jpg">
29            <h1>Clean in the city</h1>
30            <h2>クリーンな空気で快適な生活を</h2>
31        </section>
32
33        <section id="news">
34            <h1>ニュース</h1>
35            <p>一覧を見る</p>
36            <ul>
37                <li class="li-1_news">
38                    <span class=date>2020.07.08</span>
39                    <p class="p-1_news">社内情報</p>
40                    <a href="li-2/index2.html#li-1_news">事務所移転について</a>
41                </li>
42                <li class="li-2_news">
43                    <span class=date>2020.06.30</span>
44                    <p class="p-2_news">お知らせ</p>
45                    <a href="#">【個人様向け】住宅クリーニング始めました</a>
46                </li>
47                <li class="li-3_news">
48                    <span class=date>2020.06.28</span>
49                    <p class="p-3_news">ご報告</p>
50                    <a href="#">自社製造クリーニング用品おかげさまで10万本突破</a>
51                </li>
52            </ul>
53        </section>
54
55        <section id="service">
56            <h1>サービス</h1>
57            <div>
58                <div class="div1">
59                    <img class="img-1_service" src="img/service1.jpg">
60                    <h2>テナント</h2>
61                </div>
62                <div class="div2">
63                    <img class="img-2_service" src="img/service2.jpg">
64                    <h2>オフィス</h2>
65                </div>
66                <div class="div3">
67                    <img class="img-3_service" src="img/service3.jpg">
68                    <h2>マンション・戸建て住宅</h2>
69                </div>
70            </div>
71        </section>
72    </main>
73
74    <footer>
75        <section id="contact">
76            <h1>お問合せ</h1>
77            <p>Forest townでは皆様が心地よい環境で暮らすことを目指し、日々業務の清掃に取り組んでいます。</p>
78            <p>当社にご依頼の方はこちらからお問合せください。</p>
79            <div class="div4">
80                <h2>
81                    <span>お電話でのお問合せの方</span>
82                    <a href="tel:xxx-xxx-xxx"><img src="img/白抜きの電話アイコン 1.png">xxx-xxx-xxx</a>
83                </h2>
84                <h2>
85                    <span>メールでのお問合せの方<a href=#><img src="./img/右向きの矢印のアイコン素材.png"></a></span>
86                </h2>
87            </div>
88        </section>
89
90        <section id="copyright">
91            <div class="div5">
92                <h1>Forest town</h1>
93                <p>東京都品川区x-x-x</p>
94            </div>
95            　 <small>Forest town © 2020.All rights reserved.</small>　　　　
96        </section>
97    </footer>
98
99</body>
100
101</html>
102
103

CSS
1html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
2    margin: 0;
3    padding: 0;
4    border: 0;
5    font-weight: normal;
6    font-size: 100%;
7    vertical-align:baseline;
8    -webkit-box-sizing: border-box;
9    -moz-box-sizing: border-box;
10    box-sizing: border-box;
11  }
12  article, header, footer, aside, figure, figcaption, nav, section { 
13    display:block;
14  }
15  body {
16    line-height: 1;
17    -ms-text-size-adjust: 100%;
18    -webkit-text-size-adjust: 100%;
19  }
20  ol, ul {
21    list-style: none;
22    list-style-type: none;
23  }
24
25/*ALL*/
26* {
27  font-family: 'Noto Serif JP', serif;
28}
29
30/*ヘッダー*/
31header {
32  display: flex;
33  justify-content: space-between;
34  align-items: center;
35}
36
37header h1 {
38  font-family: 'Orbitron', sans-serif;
39  font-size: 50px;
40}
41
42header ul {
43  display: flex;
44  align-items: center;
45  text-align: center;
46  width: auto;
47  height: 40px;
48}
49
50header ul .li-1{
51  display: flex;
52  justify-content: space-between;
53  border-bottom: 1px solid #b0c4de;
54  margin: 37px;
55}
56
57header ul .li-1 a {
58  text-decoration: none;
59  color: black;
60}
61
62header ul .li-1 a:hover {
63  color: #b0c4de;
64}
65
66header ul .li-2{
67  display: flex;
68  justify-content: center;
69  border-bottom: 1px solid #b0c4de;
70  margin: 37px;
71}
72
73header ul .li-2 a {
74  text-decoration: none;
75  color: black;
76}
77
78header ul .li-2 a:hover {
79  color: #b0c4de;
80}
81
82header ul .li-3{
83  display: flex;
84  justify-content: space-between;
85  border-bottom: 1px solid #b0c4de;
86  margin: 37px;
87}
88
89header ul .li-4{
90  display: flex;
91  justify-content: space-between;
92  border-bottom: 1px solid #b0c4de;
93  margin: 37px;
94}
95
96/*メイン*/
97#main-visual {
98  position: relative;
99  font-family: 'Poiret One', cursive;
100  display: inline-block;
101}
102
103#main-visual img {
104  margin-top: 15px;
105  width: 100%;
106  height: auto;
107}
108
109#main-visual h1 {
110  position: absolute;
111  top: 50%;
112  left: 0;
113  right:0;
114  text-align: center;
115  font-size: 50px;
116  color: #006666;
117  border-bottom:3px solid #006666;
118}
119
120#main-visual h2 {
121  position: absolute;
122  top: 70%;
123  left: 0;
124  right:0;
125  text-align: center;
126  font-size: 50px;
127  color: #006666;
128}
129
130#news {
131  display: flex;
132  margin-top: 100px;
133}
134
135#news h1 {
136  position: relative;
137  font-size: 30px;
138  left: 180px;
139}
140
141#news > p {
142  position: relative;
143  left: 60px;
144  top: 30px;
145}
146
147#news > p::after {
148  content: '';
149  width: 6px;
150  height: 6px;
151  border: 0px;
152  border-top: solid 2px #5bc0de;
153  border-right: solid 2px #5bc0de;
154  -ms-transform: rotate(45deg);
155  -webkit-transform: rotate(45deg);
156  transform: rotate(45deg);
157  position: absolute;
158  top: 9px;
159  left: 80px;
160  margin-top: -4px;
161}
162
163#news ul {
164  position: relative;
165  left: 130px;
166  line-height: 50px;
167}
168
169#news .li-1_news,
170      .li-2_news,
171      .li-3_news {
172  display: flex;
173  border-bottom: 1px solid #b0c4de;
174  margin: 10px;
175  width: 700px;
176  position: relative;
177}
178
179#news a {
180  color: black;
181  margin-left: 10px;
182  text-decoration: none;
183  flex-grow: 8;
184}
185
186#news a:hover {
187  color: #b0c4de;
188}
189
190#news .p-1_news,
191      .p-2_news,
192      .p-3_news {
193  width: 100px;
194  text-align: center;
195  margin-left: 10px;
196  background-color: #006666;
197  color: #fff;
198  margin-bottom: 15px;
199}
200
201#service {
202  margin-top: 100px;
203}
204
205#service h1 {
206  font-size: 30px;
207  text-align: center;
208}
209
210#service div {
211  display: flex;
212  justify-content: space-around;
213}
214
215#service .div1 {
216  display: inline-block;
217}
218
219#service .div2 {
220  display: inline-block;
221}
222
223#service .div3 {
224  display: inline-block;
225}
226
227#service img {
228  width: 300px;
229  height: 250px;
230  margin-top: 15px;
231}
232
233#service h2 {
234  text-align: center;
235  border-bottom: 1px solid #b0c4de;
236}
237
238/*フッダー*/
239#contact {
240  margin-top: 100px;
241  background-color: #dee2e7;
242  text-align: center;
243}
244
245#contact h1 {
246  font-size: 30px;
247}
248
249#contact p:nth-child(2n) {
250  margin-top: 15px;
251}
252
253#contact p {
254  font-size: 20px;
255}
256
257#contact .div4 {
258  display: flex;
259}
260
261#contact .div4 > h2:first-child {
262  display: flex;
263  flex-direction: column;
264  height: 200px;
265  margin-left: auto;
266  margin-right: auto;
267  font-size: 30px;
268  margin-top: 15px;
269  position: relative;
270  top: 30px;
271}
272
273#contact .div4 > h2:last-child {
274  flex-direction: column;
275  height: 200px;
276  margin-left: auto;
277  margin-right: auto;
278  font-size: 30px;
279  margin-top: 15px;
280  position: relative;
281  top: 15px;
282}
283
284#contact h2 a {
285  text-decoration: none;
286  color: black;
287}
288
289#contact img {
290  width: 60px;
291  height: 60px;
292  position: relative;
293  top: 15px;
294}
295
296#copyright .div5{
297  display: flex;
298  justify-content: center;
299}
300#copyright {
301background-color: #b0c4de;
302}
303
304#copyright h1 {
305  font-family: 'Orbitron', sans-serif;
306  font-size: 20px;
307  margin-right: 15px;
308}
309
310#copyright small {
311  display: flex;
312  justify-content: center;
313}

試したこと

footerのh1、h2、footer要素にline-hight:0;を指定。
同様の要素にmargin、paddingを0に指定。

行動規範の内容に同意します

回答1件

ベストアンサー

footer要素に含まれるsmall要素の周囲に全角空白が5個(前に1個、後に4個)付いているので、削除してください。
header要素に含まれるul要素の前にも全角空白が1個付いています。

なお、img要素にはalt属性の指定が必須なので、必ず記述しましょう。また、src属性で指定するURLには日本語を直接書くことはできません。パーセントエンコーディングしてください。

追加分:
ページの一番下にわずかに隙間があるように見える。これは、「rights」のgのグリフ(字形)がsmall要素(やその上位の要素)のボックスからはみ出して描画されていることが原因なので、

CSS
1#copyright small {
2  (略)
3  padding-bottom: 4px;
4}

のように、small要素に適度にパディングを追加すれば消すことができる。

投稿2021/01/30 07:54

編集2021/01/30 14:23

Daregada

総合スコア11990

karin0523

2021/01/30 08:39

ご回答ありがとうございます。全角空白をすべて半角に直しました。またimg要素にalt属性を追加しました。エンコーディングに関する知識がなかったため、元の画像の名称を日本語から変更しました。上記の修正を実施しましたが、まだ画面下の空白がなくならず、、他に気になる点ありましたらご教示願います。

Daregada

2021/01/30 08:41

あなたの言う「画面下の空白」がどの部分を指すのか、あなた以外の人にも伝わるように、ブラウザーに表示されたページのスクリーンショットを作成し、質問文を編集して画像を貼り付けてください。

karin0523

2021/01/30 08:58

画面キャプチャを添付しました。分かりにくいですがfooterの下側に空白ができています。

Daregada

2021/01/30 09:04

電話番号や「メールでの～」の下のことなら、ご自分でCSSに「height: 200px;」で書いていますよね。

karin0523

2021/01/30 09:13

copyrightの下側です。影響を鑑みて「メールでの～」の「height: 200px;」を少し小さくしてみましたが、変化ありませんでした。

Daregada

2021/01/30 13:00 編集

そこかぁ。拡大表示してみるとわかりますが、「rights」のgのグリフ(字形)がベースラインより下にはみ出しているので、それを表示するためですね。「#copyright small」に適度なpadding-bottomを設定すれば消えます。

karin0523

2021/01/30 14:11

ありがとうございます！教えていただいた箇所を修正したら空白無くなりました！

Daregada

2021/01/30 14:15

回答も追加しておきますね。

karin0523

2021/01/30 14:22

ご丁寧にありがとうございます！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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