回答編集履歴

2

誤字の修正を行いました。

2019/03/29 06:59

投稿

LibertyBell3
LibertyBell3

スコア1084

test CHANGED
@@ -1,4 +1,4 @@
1
- いまいち理解できていませんが、「品」の字を時計回りに90度回転させ、
1
+ いまいち理解できていませんが、「品」の字を時計回りに90度回転させ、
2
2
 
3
3
  その中にある「口」同士の隙間をなくす。
4
4
 

1

追記です

2019/03/29 06:59

投稿

LibertyBell3
LibertyBell3

スコア1084

test CHANGED
@@ -109,3 +109,103 @@
109
109
  `<li>`に対しては、おそらく`body`に記述されている`line-height`と`font-size`が
110
110
 
111
111
  影響していると思いますが、上記の記述が無いと、画像の下に隙間ができます。
112
+
113
+
114
+
115
+ 追記:
116
+
117
+
118
+
119
+ 必要性が全く感じられないんだけどな~。
120
+
121
+
122
+
123
+ ```CSS
124
+
125
+ .header__img {
126
+
127
+ margin:0 auto;
128
+
129
+ width:90%;
130
+
131
+ max-width:800px;
132
+
133
+ }
134
+
135
+ .header__img ul {
136
+
137
+ position:relative;
138
+
139
+ padding-bottom:105.875%;
140
+
141
+ width:100%;
142
+
143
+ height:0;
144
+
145
+ list-style-type:none;
146
+
147
+ }
148
+
149
+ .header__img ul li {
150
+
151
+ position:absolute;
152
+
153
+ width:50%;
154
+
155
+ line-height:0;
156
+
157
+ font-size:0;
158
+
159
+ }
160
+
161
+ .header__img ul li:nth-child(1) {
162
+
163
+ left:0;
164
+
165
+ top:50%;
166
+
167
+ transform:translateY(-50%);
168
+
169
+ }
170
+
171
+ .header__img ul li:nth-child(2) {
172
+
173
+ left:50%;
174
+
175
+ top:0;
176
+
177
+ }
178
+
179
+ .header__img ul li:nth-child(3) {
180
+
181
+ left:50%;
182
+
183
+ bottom:0;
184
+
185
+ }
186
+
187
+ ```
188
+
189
+ ```HTML
190
+
191
+ <div class="header__img">
192
+
193
+ <ul>
194
+
195
+ <li><img src="https://placehold.jp/400x714.png" alt=""></li>
196
+
197
+ <li><img src="https://placehold.jp/400x391.png" alt=""></li>
198
+
199
+ <li><img src="https://placehold.jp/400x456.png" alt=""></li>
200
+
201
+ </ul>
202
+
203
+ </div>
204
+
205
+ ```
206
+
207
+ こんな感じですね。
208
+
209
+ 右側の2つは、本来なら`right:0;`で指定するのが普通ですが、
210
+
211
+ ブラウザの拡大縮小時、画像同士の隙間が出来やすいので、`left:50%;`にしています。