teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問画像と文字が揃わない

編集履歴

質問編集履歴

3

書式の改善

2020/07/26 05:42

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -74,6 +74,18 @@
74
74
 
75
75
  ```CSS
76
76
 
77
+
78
+
79
+ .container {
80
+
81
+ width: 812px;
82
+
83
+ margin: 0 auto;
84
+
85
+ }
86
+
87
+
88
+
77
89
  .product-wrapper{
78
90
 
79
91
  height:1215px;

2

書式の改善

2020/07/26 05:42

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ご指摘ありがとうございます。内容編集しました。
1
+ ![イメージ説明](ea2878132667fd797514a3b3106fa61c.png)ご指摘ありがとうございます。内容編集しました。
2
2
 
3
3
  分かりやすいように、productのbackgroundを灰色にして見てます。
4
4
 

1

書式の改善

2020/07/26 04:53

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,18 +1,70 @@
1
- 画像と文字を揃えたいのですがどうしても揃いません。
1
+ ご指摘ありがとうございます。内容編集しました。
2
+
3
+ 分かりやすいように、productのbackgroundを灰色にして見てます。
4
+
5
+ 画像が、灰色の背景、左端にぴったりくっついて欲しいのですが、右側に寄ってしまいます。
2
6
 
3
7
 
4
8
 
5
9
  ```HTML
6
10
 
11
+ <div class="product-wrapper">
12
+
13
+ <div class="container">
14
+
15
+ <div class="heading">
16
+
17
+ <h2>PRODUCT</h2>
18
+
19
+ <a href="#" class="btn more">MORE</a>
20
+
21
+ </div>
22
+
23
+
24
+
25
+ <div class="products">
26
+
27
+
28
+
7
29
  <div class="product">
8
30
 
9
- <div class="product-icon">
31
+ <a href="#">
10
32
 
11
- <a href="#"><img src="paspol_images/banner_21.png">
33
+ <div class="product-icon">
12
34
 
13
- <p>この世界で死ぬまでにしたいこと2000</p></a>
35
+ <img src="paspol_images/fes001t.png">
14
36
 
15
- </div>
37
+ </div>
38
+
39
+ <div class="products-info">
40
+
41
+ <p>The World Festival Guide - 海外の音楽フェス完全ガイド -</p>
42
+
43
+ </div>
44
+
45
+ </a>
46
+
47
+ </div>
48
+
49
+
50
+
51
+ <div class="product">
52
+
53
+ <a href="#">
54
+
55
+ <div class="product-icon">
56
+
57
+ <img src="paspol_images/banner_21.png">
58
+
59
+ </div>
60
+
61
+ <div class="products-info">
62
+
63
+ <p>この世界で死ぬまでにしたいこと2000</p>
64
+
65
+ </div>
66
+
67
+ </a>
16
68
 
17
69
  </div>
18
70
 
@@ -22,13 +74,59 @@
22
74
 
23
75
  ```CSS
24
76
 
77
+ .product-wrapper{
78
+
79
+ height:1215px;
80
+
81
+ }
82
+
83
+
84
+
25
85
  .product{
86
+
87
+ height:450px;
88
+
89
+ width:180px;
90
+
91
+ margin-right:80px;
92
+
93
+ background-color: gray;
26
94
 
27
95
  float: left;
28
96
 
29
- width:30%;
97
+ }
30
98
 
99
+
100
+
101
+ .product:hover{
102
+
103
+ opacity: 0.8;
104
+
105
+ transition: all 0.3s;
106
+
107
+ }
108
+
109
+
110
+
111
+ .product-icon{
112
+
113
+ float: left;
114
+
115
+ width: 200px;
116
+
31
- padding-right: 25px;
117
+ height:280px;
118
+
119
+ margin: 0;
120
+
121
+ }
122
+
123
+
124
+
125
+ .product-icon img{
126
+
127
+ width: 200px;
128
+
129
+ height:280px;
32
130
 
33
131
  }
34
132
 
@@ -44,8 +142,6 @@
44
142
 
45
143
  }
46
144
 
47
- ```
48
145
 
49
146
 
50
-
51
- このままだとpタグが若干左にずれてしまいます泣
147
+ ```