回答編集履歴

2

コード修正

2020/03/10 19:04

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -170,7 +170,7 @@
170
170
 
171
171
  ---
172
172
 
173
- CSS Gridを使って、PCサイズはメインとサイドバーの間にギャップを入れてみました。
173
+ CSS Gridを使って、PCサイズはメインとサイドバーの間に疑似要素でギャップを入れてみました。
174
174
 
175
175
 
176
176
 
@@ -192,8 +192,6 @@
192
192
 
193
193
  <div class="num03">C</div>
194
194
 
195
- <div class="gap"></div>
196
-
197
195
  </div>
198
196
 
199
197
  ```
@@ -242,7 +240,9 @@
242
240
 
243
241
  }
244
242
 
245
- .gap {
243
+ .container::after {
244
+
245
+ content: '';
246
246
 
247
247
  background: #fff;
248
248
 
@@ -276,12 +276,6 @@
276
276
 
277
277
  }
278
278
 
279
- .gap {
280
-
281
- display: none;
282
-
283
- }
284
-
285
279
  }
286
280
 
287
281
  ```

1

コード追加

2020/03/10 19:04

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -168,4 +168,124 @@
168
168
 
169
169
 
170
170
 
171
+ ---
172
+
171
- CSS Gridを使った方がシンプルかも
173
+ CSS Gridを使って、PCサイズはメイとサイドバーの間にギャッを入れてみました
174
+
175
+
176
+
177
+ ```html
178
+
179
+ <div class="container">
180
+
181
+ <div class="num01">A</div>
182
+
183
+ <div class="side">
184
+
185
+ <div class="num04">D</div>
186
+
187
+ <div class="num05">E</div>
188
+
189
+ </div>
190
+
191
+ <div class="num02">B</div>
192
+
193
+ <div class="num03">C</div>
194
+
195
+ <div class="gap"></div>
196
+
197
+ </div>
198
+
199
+ ```
200
+
201
+ ```css
202
+
203
+ .container{
204
+
205
+ background: red;
206
+
207
+ opacity: .6;
208
+
209
+ display: grid;
210
+
211
+ grid-template-columns: 75% 8px 1fr;
212
+
213
+ }
214
+
215
+
216
+
217
+ .num01, .num02, .num03, .num04, .num05{
218
+
219
+ background: #fff;
220
+
221
+ color: #666;
222
+
223
+ padding: 40px;
224
+
225
+ margin: 8px;
226
+
227
+ }
228
+
229
+
230
+
231
+ .side {
232
+
233
+ grid-column: 3;
234
+
235
+ grid-row: 1 / 3;
236
+
237
+ }
238
+
239
+ .num01, .num02, .num03 {
240
+
241
+ grid-column: 1;
242
+
243
+ }
244
+
245
+ .gap {
246
+
247
+ background: #fff;
248
+
249
+ grid-column: 2;
250
+
251
+ grid-row: 1 / 4
252
+
253
+ }
254
+
255
+
256
+
257
+ @media screen and (max-width: 480px) {
258
+
259
+ .grid {
260
+
261
+ grid-template-columns: 1fr;
262
+
263
+ }
264
+
265
+ .num01, .num02, .num03 {
266
+
267
+ grid-column: 1;
268
+
269
+ }
270
+
271
+ .side {
272
+
273
+ grid-column: 1;
274
+
275
+ grid-row: 2;
276
+
277
+ }
278
+
279
+ .gap {
280
+
281
+ display: none;
282
+
283
+ }
284
+
285
+ }
286
+
287
+ ```
288
+
289
+
290
+
291
+ [Codepenサンプル](https://codepen.io/hatena19/pen/qBdpJxv)