質問編集履歴

1

修正

2021/10/19 05:24

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -16,492 +16,500 @@
16
16
 
17
17
 
18
18
 
19
+
20
+
21
+
22
+
23
+ CSSは下記です
24
+
25
+
26
+
27
+ ```ここに言語を入力
28
+
29
+ @charset "utf-8";
30
+
31
+
32
+
33
+ /*デフォルト*/
34
+
35
+ *{box-sizing: border-box;}
36
+
37
+ a{
38
+
39
+ color:#000;
40
+
41
+ text-decoration:none;
42
+
43
+ }
44
+
45
+ li{
46
+
47
+ list-style-type:none;
48
+
49
+ }
50
+
51
+ /*共通要素*/
52
+
53
+ .btn_login{
54
+
55
+ color:blue;
56
+
57
+ font-size:14px;
58
+
59
+ height: 38px;
60
+
61
+ display:inline-flex;
62
+
63
+ align-items: center;
64
+
65
+ padding: 0 15px 0 45px;
66
+
67
+ border: 1px solid blue;
68
+
69
+ border-radius:2px;
70
+
71
+ position:relative;
72
+
73
+ }
74
+
75
+ .btn_login:before{
76
+
77
+ content:"";
78
+
79
+ display:block;
80
+
81
+ width:28px;
82
+
83
+ height:28px;
84
+
85
+ border-radius:50%;
86
+
87
+ background:gray;
88
+
89
+ position:absolute;
90
+
91
+ top:50%;
92
+
93
+ left:15px;
94
+
95
+ transform: translateY(-50%);
96
+
97
+ }
98
+
99
+ /*ヘッダー*/
100
+
101
+ .header{
102
+
103
+ height: 60px;
104
+
105
+
106
+
107
+ }
108
+
109
+ .header >.container {
110
+
111
+ padding:0 20px;
112
+
113
+ height:60px;
114
+
115
+ display:flex;
116
+
117
+ align-items:center;
118
+
119
+ }
120
+
121
+ /*バーガー*/
122
+
123
+ .button_burger{
124
+
125
+
126
+
127
+ width:40px;
128
+
129
+ height:40px;
130
+
131
+ background:gray;
132
+
133
+ }
134
+
135
+
136
+
137
+ /*ロゴ*/
138
+
139
+ .area_logo_header {
140
+
141
+ margin:0 0 0 10px;
142
+
143
+ }
144
+
145
+ .area_logo_header .logo{
146
+
147
+ display: block;
148
+
149
+ width: 80px;
150
+
151
+ height: 30px;
152
+
153
+ background: gray;
154
+
155
+
156
+
157
+
158
+
159
+ }
160
+
161
+ /*フォームヘッダー*/
162
+
163
+ .form_header{
164
+
165
+ margin:0 auto;
166
+
167
+ }
168
+
169
+
170
+
171
+
172
+
173
+ /*ナビ_ヘッダー*/
174
+
175
+ /* .nav_header {
176
+
177
+ margin:0 0 0 auto;
178
+
179
+ } */
180
+
181
+ .list_nav_header{
182
+
183
+ display:flex;
184
+
185
+ }
186
+
187
+ .list_nav_header li +li {
188
+
189
+ margin:0 0 0 10px;
190
+
191
+ }
192
+
193
+ .list_nav_header a:not(.btn_login){
194
+
195
+ display:block;
196
+
197
+ width:40px;
198
+
199
+ height:40px;
200
+
201
+ background:gray;
202
+
203
+
204
+
205
+ }
206
+
207
+ /*サイドバー*/
208
+
209
+ .sidebar{
210
+
211
+ flex:0 0 240px;
212
+
213
+ }
214
+
215
+ .sidebar .box{
216
+
217
+ padding:10px 0;
218
+
219
+ }
220
+
221
+ .sidebar .box +.box{
222
+
223
+ border-top:1px solid #ccc;
224
+
225
+ }
226
+
227
+ /*サイドバーナビリスト*/
228
+
229
+ .list_nav__sidebar a{
230
+
231
+ font-size:14px;
232
+
233
+
234
+
235
+ display:flex;
236
+
237
+ align-items: center;
238
+
239
+ height: 40px;
240
+
241
+ padding:0 0 0 60px;
242
+
243
+ position:relative;
244
+
245
+ }
246
+
247
+ .list_nav__sidebar a:before{
248
+
249
+ content:"";
250
+
251
+ display:block;
252
+
253
+ width:28px;
254
+
255
+ height:28px;
256
+
257
+ border-radius:50%;
258
+
259
+ background:gray;
260
+
261
+ position:absolute;
262
+
263
+ top:50%;
264
+
265
+ left:24px;
266
+
267
+ transform: translateY(-50%);
268
+
269
+ }
270
+
271
+ /*サイドバーログイン*/
272
+
273
+ .area_register_sidebar{
274
+
275
+ padding: 10px 30px;
276
+
277
+ }
278
+
279
+ .area_register_sidebar .description{
280
+
281
+ font-size:14px;
282
+
283
+ line-height:1.5em;
284
+
285
+ }
286
+
287
+ .area_register_sidebar .wrap_btn {
288
+
289
+ margin-top:10px;
290
+
291
+ }
292
+
293
+ /*メイン*/
294
+
295
+ .main{
296
+
297
+ background: peachpuff;
298
+
299
+ flex:auto;
300
+
301
+ min-width:10px;
302
+
303
+ padding:24px;
304
+
305
+ }
306
+
307
+ .main .box {
308
+
309
+ padding:30px 0;
310
+
311
+ }
312
+
313
+ .main .box +.box{
314
+
315
+ border-top:3px solid #ccc;
316
+
317
+ }
318
+
319
+ .main .box .ttl{
320
+
321
+ font-size:24px;
322
+
323
+ }
324
+
325
+ /* ビデオリスト*/
326
+
327
+ .list_video{
328
+
329
+ display:flex;
330
+
331
+ flex-wrap:wrap;
332
+
333
+ margin:-8px;
334
+
335
+ }
336
+
337
+ .list_video >li{
338
+
339
+ padding:8px;
340
+
341
+
342
+
343
+ width:25%;
344
+
345
+ }
346
+
347
+ /*サムネイル 投稿画像 */
348
+
349
+ .list_video .thumb{
350
+
351
+ width:100%;
352
+
353
+ background:gray;
354
+
355
+ }
356
+
357
+ .list_video .thumb:before{
358
+
359
+ content:"";
360
+
361
+ display:block;
362
+
363
+ width:100%;
364
+
365
+ padding-top:56.25%;
366
+
367
+ }
368
+
369
+ /*レイアウト*/
370
+
371
+ .list_video .layout{
372
+
373
+ display:flex;
374
+
375
+ }
376
+
377
+
378
+
379
+ /*アイキャッチ*/
380
+
381
+ .list_video .eye{
382
+
383
+ flex:0 0 40px;
384
+
385
+ }
386
+
387
+ .list_video .img{
388
+
389
+ width:100%;
390
+
391
+ border-radius:50%;
392
+
393
+ background:gray;
394
+
395
+ }
396
+
397
+ .list_video .img:before{
398
+
399
+ content:"";
400
+
401
+ display: block;
402
+
403
+ width:100%;
404
+
405
+ padding-top:100%;
406
+
407
+
408
+
409
+ }
410
+
411
+
412
+
413
+ /*レイアウト*/
414
+
415
+ .list_video .layout{
416
+
417
+ display:flex;
418
+
419
+ margin:10px 0 0;
420
+
421
+ }
422
+
423
+
424
+
425
+
426
+
427
+
428
+
429
+
430
+
431
+ /*アイキャッチ*/
432
+
433
+ .list_video .eye{
434
+
435
+ flex:0 0 40px;
436
+
437
+ margin:0 10px 0 0;
438
+
439
+ }
440
+
441
+ .list_video .img{
442
+
443
+ width:100%;
444
+
445
+ border-radius:50%;
446
+
447
+ background:green;
448
+
449
+ }
450
+
451
+ .list_video .img:before{
452
+
453
+ content:"";
454
+
455
+ display:block;
456
+
457
+ width:100%;
458
+
459
+ padding-top:100%;
460
+
461
+
462
+
463
+
464
+
465
+
466
+
467
+ }
468
+
469
+ /*テキスト*/
470
+
471
+ .list_video .text{
472
+
473
+ flex:auto;
474
+
475
+ min-width:10px;
476
+
477
+ }
478
+
479
+ .list_video .text .ttl{
480
+
481
+ font-size:15px;
482
+
483
+ }
484
+
485
+ .list_video .text .user{
486
+
487
+ font-size:14px;
488
+
489
+ }
490
+
491
+ .list_video .text .count{
492
+
493
+ font-size:13px;
494
+
495
+ }
496
+
497
+ /*ページレイアウト*/
498
+
499
+ .layout_page{
500
+
501
+ display:flex;
502
+
503
+ }
504
+
19
505
  ```
20
506
 
21
-
22
-
23
- CSSは下記です
24
-
25
- ```ここに言語を入力
26
-
27
- @charset "utf-8";
28
-
29
-
30
-
31
- /*デフォルト*/
32
-
33
- *{box-sizing: border-box;}
34
-
35
- a{
36
-
37
- color:#000;
38
-
39
- text-decoration:none;
40
-
41
- }
42
-
43
- li{
44
-
45
- list-style-type:none;
46
-
47
- }
48
-
49
- /*共通要素*/
50
-
51
- .btn_login{
52
-
53
- color:blue;
54
-
55
- font-size:14px;
56
-
57
- height: 38px;
58
-
59
- display:inline-flex;
60
-
61
- align-items: center;
62
-
63
- padding: 0 15px 0 45px;
64
-
65
- border: 1px solid blue;
66
-
67
- border-radius:2px;
68
-
69
- position:relative;
70
-
71
- }
72
-
73
- .btn_login:before{
74
-
75
- content:"";
76
-
77
- display:block;
78
-
79
- width:28px;
80
-
81
- height:28px;
82
-
83
- border-radius:50%;
84
-
85
- background:gray;
86
-
87
- position:absolute;
88
-
89
- top:50%;
90
-
91
- left:15px;
92
-
93
- transform: translateY(-50%);
94
-
95
- }
96
-
97
- /*ヘッダー*/
98
-
99
- .header{
100
-
101
- height: 60px;
102
-
103
-
104
-
105
- }
106
-
107
- .header >.container {
108
-
109
- padding:0 20px;
110
-
111
- height:60px;
112
-
113
- display:flex;
114
-
115
- align-items:center;
116
-
117
- }
118
-
119
- /*バーガー*/
120
-
121
- .button_burger{
122
-
123
-
124
-
125
- width:40px;
126
-
127
- height:40px;
128
-
129
- background:gray;
130
-
131
- }
132
-
133
-
134
-
135
- /*ロゴ*/
136
-
137
- .area_logo_header {
138
-
139
- margin:0 0 0 10px;
140
-
141
- }
142
-
143
- .area_logo_header .logo{
144
-
145
- display: block;
146
-
147
- width: 80px;
148
-
149
- height: 30px;
150
-
151
- background: gray;
152
-
153
-
154
-
155
-
156
-
157
- }
158
-
159
- /*フォームヘッダー*/
160
-
161
- .form_header{
162
-
163
- margin:0 auto;
164
-
165
- }
166
-
167
-
168
-
169
-
170
-
171
- /*ナビ_ヘッダー*/
172
-
173
- /* .nav_header {
174
-
175
- margin:0 0 0 auto;
176
-
177
- } */
178
-
179
- .list_nav_header{
180
-
181
- display:flex;
182
-
183
- }
184
-
185
- .list_nav_header li +li {
186
-
187
- margin:0 0 0 10px;
188
-
189
- }
190
-
191
- .list_nav_header a:not(.btn_login){
192
-
193
- display:block;
194
-
195
- width:40px;
196
-
197
- height:40px;
198
-
199
- background:gray;
200
-
201
-
202
-
203
- }
204
-
205
- /*サイドバー*/
206
-
207
- .sidebar{
208
-
209
- flex:0 0 240px;
210
-
211
- }
212
-
213
- .sidebar .box{
214
-
215
- padding:10px 0;
216
-
217
- }
218
-
219
- .sidebar .box +.box{
220
-
221
- border-top:1px solid #ccc;
222
-
223
- }
224
-
225
- /*サイドバーナビリスト*/
226
-
227
- .list_nav__sidebar a{
228
-
229
- font-size:14px;
230
-
231
-
232
-
233
- display:flex;
234
-
235
- align-items: center;
236
-
237
- height: 40px;
238
-
239
- padding:0 0 0 60px;
240
-
241
- position:relative;
242
-
243
- }
244
-
245
- .list_nav__sidebar a:before{
246
-
247
- content:"";
248
-
249
- display:block;
250
-
251
- width:28px;
252
-
253
- height:28px;
254
-
255
- border-radius:50%;
256
-
257
- background:gray;
258
-
259
- position:absolute;
260
-
261
- top:50%;
262
-
263
- left:24px;
264
-
265
- transform: translateY(-50%);
266
-
267
- }
268
-
269
- /*サイドバーログイン*/
270
-
271
- .area_register_sidebar{
272
-
273
- padding: 10px 30px;
274
-
275
- }
276
-
277
- .area_register_sidebar .description{
278
-
279
- font-size:14px;
280
-
281
- line-height:1.5em;
282
-
283
- }
284
-
285
- .area_register_sidebar .wrap_btn {
286
-
287
- margin-top:10px;
288
-
289
- }
290
-
291
- /*メイン*/
292
-
293
- .main{
294
-
295
- background: peachpuff;
296
-
297
- flex:auto;
298
-
299
- min-width:10px;
300
-
301
- padding:24px;
302
-
303
- }
304
-
305
- .main .box {
306
-
307
- padding:30px 0;
308
-
309
- }
310
-
311
- .main .box +.box{
312
-
313
- border-top:3px solid #ccc;
314
-
315
- }
316
-
317
- .main .box .ttl{
318
-
319
- font-size:24px;
320
-
321
- }
322
-
323
- /* ビデオリスト*/
324
-
325
- .list_video{
326
-
327
- display:flex;
328
-
329
- flex-wrap:wrap;
330
-
331
- margin:-8px;
332
-
333
- }
334
-
335
- .list_video >li{
336
-
337
- padding:8px;
338
-
339
-
340
-
341
- width:25%;
342
-
343
- }
344
-
345
- /*サムネイル 投稿画像 */
346
-
347
- .list_video .thumb{
348
-
349
- width:100%;
350
-
351
- background:gray;
352
-
353
- }
354
-
355
- .list_video .thumb:before{
356
-
357
- content:"";
358
-
359
- display:block;
360
-
361
- width:100%;
362
-
363
- padding-top:56.25%;
364
-
365
- }
366
-
367
- /*レイアウト*/
368
-
369
- .list_video .layout{
370
-
371
- display:flex;
372
-
373
- }
374
-
375
-
376
-
377
- /*アイキャッチ*/
378
-
379
- .list_video .eye{
380
-
381
- flex:0 0 40px;
382
-
383
- }
384
-
385
- .list_video .img{
386
-
387
- width:100%;
388
-
389
- border-radius:50%;
390
-
391
- background:gray;
392
-
393
- }
394
-
395
- .list_video .img:before{
396
-
397
- content:"";
398
-
399
- display: block;
400
-
401
- width:100%;
402
-
403
- padding-top:100%;
404
-
405
-
406
-
407
- }
408
-
409
-
410
-
411
- /*レイアウト*/
412
-
413
- .list_video .layout{
414
-
415
- display:flex;
416
-
417
- margin:10px 0 0;
418
-
419
- }
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
- /*アイキャッチ*/
430
-
431
- .list_video .eye{
432
-
433
- flex:0 0 40px;
434
-
435
- margin:0 10px 0 0;
436
-
437
- }
438
-
439
- .list_video .img{
440
-
441
- width:100%;
442
-
443
- border-radius:50%;
444
-
445
- background:green;
446
-
447
- }
448
-
449
- .list_video .img:before{
450
-
451
- content:"";
452
-
453
- display:block;
454
-
455
- width:100%;
456
-
457
- padding-top:100%;
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
- }
466
-
467
- /*テキスト*/
468
-
469
- .list_video .text{
470
-
471
- flex:auto;
472
-
473
- min-width:10px;
474
-
475
- }
476
-
477
- .list_video .text .ttl{
478
-
479
- font-size:15px;
480
-
481
- }
482
-
483
- .list_video .text .user{
484
-
485
- font-size:14px;
486
-
487
- }
488
-
489
- .list_video .text .count{
490
-
491
- font-size:13px;
492
-
493
- }
494
-
495
- /*ページレイアウト*/
496
-
497
- .layout_page{
498
-
499
- display:flex;
500
-
501
- }
502
-
503
507
  ```
504
508
 
509
+
510
+
511
+
512
+
505
513
  box-sizing:border-box;を設定しただけでは駄目でした。
506
514
 
507
515