teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ヘッダーイメージの下に要素を作るとその下に謎の余白ができる

編集履歴

質問編集履歴

3

質問内容を変更

2021/10/10 14:27

投稿

kdh
kdh

スコア26

test CHANGED
@@ -1 +1 @@
1
- フッター の下に謎の余白を解消したい
1
+ ヘッダーイメージの下に要素を作るとその下に謎の余白ができる
test CHANGED
@@ -1,34 +1,32 @@
1
- #####フッターの黒い帯の下に謎の余白があります。検証ツールで確認したところpaddingでもmarginでもないみたいなのですが何が原因なのでしょうか？
1
+ #####ホームページでヘッダーの画像の下にどんどん作っていきたのですが、要素の下に謎の余白ができてしまいます。画像が原因だと思いvertical-alignなどで対処しましたが改善できませんでした。何が原因なのでしょうか？
2
2
 
3
3
 
4
4
 
5
- ![イメージ説明](6f86afebab9f95092511b78ed2b34d57.png)
5
+ ![![イメージ説明](4b8a4156c7cd4ab5e7243a83c6dc03f9.jpeg)説明](3110d7bc0a8bedda9ccc21d93106a07a.jpeg)](1500de7cc27067953ff24a896167874a.jpeg)
6
-
7
-
8
6
 
9
7
  ```html
10
8
 
11
- <section id="question">
9
+ <div class="swiper-container">
12
10
 
13
- <div class="que-area">
11
+ <div class="swiper-wrapper">
14
12
 
15
- <div class="que-box">
13
+ <div class="swiper-slide"><img src="/images/woman.jpg" alt="美容師向け動画サービス" class="img-fluid">
16
14
 
17
- <div class="que-item">
15
+ <div class="btn slide-bg item head-btn">動画テンプレートを探す</div>
18
16
 
19
- <i class="fas fa-envelope"></i>
17
+ </div>
20
18
 
21
- <h1>お問い合わせ</h1>
19
+ <div class="swiper-slide"><img src="/images/woman2.jpg" alt="ヘアスタイル写真" class="img-fluid">
22
20
 
23
- <div class="btn-que slide-bg item">お問い合わせをする</div>
21
+ <div class="btn slide-bg item head-btn">動画テンプレートを探す</div>
24
22
 
25
- </div>
23
+ </div>
26
24
 
27
- </div>
25
+ </div>
28
26
 
29
- </div>
27
+ <div class="swiper-pagination swiper-pagination-black"></div>
30
28
 
31
- </section>
29
+ 　　</div>
32
30
 
33
31
  <section id="footer">
34
32
 
@@ -42,53 +40,23 @@
42
40
 
43
41
  ```css
44
42
 
45
- .que-area{
43
+ .swiper-container{
46
44
 
47
- height: 60vh;
45
+ padding-top: 100px;
46
+
47
+ margin-bottom: -100px;
48
+
49
+ }
50
+
51
+
52
+
53
+ .swiper-slide{
48
54
 
49
55
  position: relative;
50
56
 
51
- }
57
+ img{
52
58
 
53
- .que-box{
54
-
55
- left: 15vw;
56
-
57
- top: 30%;
58
-
59
- margin: 0 auto;
60
-
61
- position: absolute;
62
-
63
- width: 70%;
64
-
65
- height: 50%;
66
-
67
- background-color: #f3f1f1;
68
-
69
- .fas{
70
-
71
- font-size: 4rem;
72
-
73
- }
74
-
75
- .que-item{
76
-
77
- text-align: center;
59
+ vertical-align: top;
78
-
79
- h1{
80
-
81
- font-size: 2rem;
82
-
83
- padding: 2rem 0;
84
-
85
- }
86
-
87
- i{
88
-
89
- margin-top: -3rem;
90
-
91
- }
92
60
 
93
61
  }
94
62
 
@@ -96,7 +64,23 @@
96
64
 
97
65
 
98
66
 
67
+ .swiper-pagination{
99
68
 
69
+ padding-bottom: 85px;
70
+
71
+ }
72
+
73
+
74
+
75
+ .head-btn{
76
+
77
+ position: absolute;
78
+
79
+ top: -20vh;
80
+
81
+ left: 60%;
82
+
83
+ }
100
84
 
101
85
 
102
86
 

2

コード追記

2021/10/10 14:27

投稿

kdh
kdh

スコア26

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,28 @@
7
7
 
8
8
 
9
9
  ```html
10
+
11
+ <section id="question">
12
+
13
+ <div class="que-area">
14
+
15
+ <div class="que-box">
16
+
17
+ <div class="que-item">
18
+
19
+ <i class="fas fa-envelope"></i>
20
+
21
+ <h1>お問い合わせ</h1>
22
+
23
+ <div class="btn-que slide-bg item">お問い合わせをする</div>
24
+
25
+ </div>
26
+
27
+ </div>
28
+
29
+ </div>
30
+
31
+ </section>
10
32
 
11
33
  <section id="footer">
12
34
 
@@ -20,6 +42,64 @@
20
42
 
21
43
  ```css
22
44
 
45
+ .que-area{
46
+
47
+ height: 60vh;
48
+
49
+ position: relative;
50
+
51
+ }
52
+
53
+ .que-box{
54
+
55
+ left: 15vw;
56
+
57
+ top: 30%;
58
+
59
+ margin: 0 auto;
60
+
61
+ position: absolute;
62
+
63
+ width: 70%;
64
+
65
+ height: 50%;
66
+
67
+ background-color: #f3f1f1;
68
+
69
+ .fas{
70
+
71
+ font-size: 4rem;
72
+
73
+ }
74
+
75
+ .que-item{
76
+
77
+ text-align: center;
78
+
79
+ h1{
80
+
81
+ font-size: 2rem;
82
+
83
+ padding: 2rem 0;
84
+
85
+ }
86
+
87
+ i{
88
+
89
+ margin-top: -3rem;
90
+
91
+ }
92
+
93
+ }
94
+
95
+ }
96
+
97
+
98
+
99
+
100
+
101
+
102
+
23
103
  .footer-box{
24
104
 
25
105
  height: 100px;

1

タイトル変更

2021/10/09 14:31

投稿

kdh
kdh

スコア26

test CHANGED
@@ -1 +1 @@
1
- フッター の下に謎の余白がある
1
+ フッター の下に謎の余白を解消したい
test CHANGED
File without changes