teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問画像の高さを揃えたい

編集履歴

質問編集履歴

1

コードを全て書き直しました。

2021/11/02 05:38

投稿

misaki.
misaki.

スコア3

test CHANGED
File without changes
test CHANGED
@@ -16,49 +16,57 @@
16
16
 
17
17
  ```HTML
18
18
 
19
- <div class="container">
19
+ <body>
20
20
 
21
- <section id="bicycle">
21
+ <section id="bicycle" class="wrapper">
22
22
 
23
- <h2 class="section-title">Bicycle</h2>
23
+ <h2 class="section-title">Bicycle</h2>
24
24
 
25
- <ul>
25
+ <ul>
26
26
 
27
- <li>
27
+ <li>
28
28
 
29
- <img src="http://placehold.jp/150x150.png" alt="">
29
+ <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
30
30
 
31
- <h3 class="content-titie">タイトル</h3>
31
+ <h3 class="content-title">タイトルタイトル</h3>
32
32
 
33
- <p>テキストテキストテキストテキスト</p>
33
+ <p>テキストテキストテキスト</p>
34
34
 
35
- </li>
35
+ </li>
36
36
 
37
- <li>
37
+ <li>
38
38
 
39
- <img src="http://placehold.jp/150x150.png" alt="">
39
+ <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
40
40
 
41
- <h3 class="content-titie">タイトル</h3>
41
+ <h3 class="content-title">タイトルタイトル</h3>
42
42
 
43
- <p>テキストテキストテキストテキスト</p>
43
+ <p>テキストテキストテキスト</p>
44
44
 
45
- </li>
45
+ </li>
46
46
 
47
- <li>
47
+ <li>
48
48
 
49
- <img src="http://placehold.jp/150x150.png" alt="">
49
+ <img src="http://placehold.jp/150x150.png" alt="テキストテキストテキスト">
50
50
 
51
- <h3 class="content-titie">タイトル</h3>
51
+ <h3 class="content-title">タイトルタイトル</h3>
52
52
 
53
- <p>テキストテキストテキストテキスト</p>
53
+ <p>テキストテキストテキスト</p>
54
54
 
55
- </li>
55
+ </li>
56
56
 
57
- </ul>
57
+ </ul>
58
58
 
59
-
59
+ </section>
60
60
 
61
- </section>
61
+ </main>
62
+
63
+
64
+
65
+
66
+
67
+ </body>
68
+
69
+ </html>
62
70
 
63
71
  ```
64
72
 
@@ -66,21 +74,31 @@
66
74
 
67
75
 
68
76
 
69
- .container{
77
+ *{
70
78
 
71
- max-width: 960px;
79
+ margin: 0;
72
80
 
73
- margin: 0 auto 100px auto;
81
+ padding: 0;
74
82
 
75
- padding: 0 4%;
83
+ }
76
84
 
85
+
86
+
87
+ a {
88
+
77
- text-align: center;
89
+ text-decoration: none;
78
90
 
79
91
  }
80
92
 
81
93
  img {
82
94
 
83
- max-width: 100%;
95
+ max-width: 100%;
96
+
97
+ }
98
+
99
+ li {
100
+
101
+ list-style: none;
84
102
 
85
103
  }
86
104
 
@@ -88,68 +106,86 @@
88
106
 
89
107
  .section-title {
90
108
 
91
- display: inline-block;
109
+ display: inline-block;
92
110
 
93
- font-size: 2rem;
111
+ font-size: 2rem;
94
112
 
95
- text-align: center;
113
+ text-align: center;
96
114
 
97
- margin-bottom: 60px;
115
+ margin-bottom: 60px;
98
116
 
99
- border-bottom: solid 1px #383e45;
117
+ border-bottom: solid 1px #383e45;
100
118
 
101
- }
119
+ }
120
+
121
+
122
+
123
+ .wrapper {
124
+
125
+ max-width: 960px;
126
+
127
+ margin: 0 auto 100px auto;
128
+
129
+ padding: 0 4%;
130
+
131
+ text-align: center;
132
+
133
+ }
134
+
135
+
136
+
137
+ .content-title {
138
+
139
+ font-size: 1rem;
140
+
141
+ margin: 10px 0;
142
+
143
+ }
144
+
145
+
146
+
147
+ #bicycle ul {
148
+
149
+ display: flex;
150
+
151
+ justify-content: space-between;
152
+
153
+ }
154
+
155
+ #bicycle li {
156
+
157
+ width: 32%;
158
+
159
+ }
102
160
 
103
161
 
104
162
 
105
163
 
106
164
 
107
- .content-title {
165
+ @media screen and (max-width: 600px){
108
-
109
- font-size: 1rem;
110
-
111
- margin: 10px 0;
112
-
113
- }
114
166
 
115
167
 
116
168
 
117
- .content-title {
118
-
119
- font-size: 1rem;
120
-
121
- margin: 10px 0;
122
-
123
- }
124
169
 
125
170
 
126
171
 
127
- #bicycle ul {
128
172
 
129
- 　　 display: flex;
173
+ #bicycle ul {
130
174
 
131
- justify-content: space-between;
175
+ flex-direction: column;
132
176
 
133
- }
177
+ }
178
+
179
+ #bicycle li {
180
+
181
+ width: 100%;
182
+
183
+ margin-bottom: 30px;
184
+
185
+ }
134
186
 
135
187
 
136
188
 
137
- #bicycle li {
138
-
139
- width: 32%;
140
-
141
- }
189
+ }
142
-
143
-
144
-
145
- @media
146
-
147
- #bicycle ul {
148
-
149
- flex-direction: column;
150
-
151
- margin-bottom: 30px;
152
-
153
- }
154
190
 
155
191
  ```