質問編集履歴

1

この問題に影響を与えているかもしれないところを追加いたしました。

2019/11/14 05:08

投稿

js_boy
js_boy

score0

test CHANGED
File without changes
test CHANGED
@@ -10,147 +10,23 @@
10
10
 
11
11
  ```HTML
12
12
 
13
- <form action="#" method="post">
13
+ <select type="type" name="select" placeholder="ーーー">
14
14
 
15
+ <option>選択してください</option>
15
16
 
17
+ <option>テキスト1</option>
16
18
 
17
- <div class="item">
19
+ <option>テキスト2</option>
18
20
 
19
- <div class="category">
21
+ <option>テキスト3</option>
20
22
 
21
- <label class="label_c">お問い合わせ種別</label>
22
-
23
- <select type="type" name="select" placeholder="ーーー">
24
-
25
- <option>選択してください</option>
26
-
27
- <option>テキスト1</option>
28
-
29
- <option>テキスト2</option>
30
-
31
- <option>テキスト3</option>
32
-
33
- </select>
23
+ </select>
34
-
35
- </div>
36
-
37
- </div>
38
-
39
-
40
-
41
- <div class="item">
42
-
43
- <label class="label_c">氏名<span class="required">必須</span></label>
44
-
45
- <input class="inputs" type="text" name="name" placeholder="氏名">
46
-
47
- </div>
48
-
49
-
50
-
51
- <div class="item">
52
-
53
- <label class="label_c">フリガナ<span class="required2">必須</span></label>
54
-
55
- <input class="inputs" type="text" name="name" placeholder="フリガナ">
56
-
57
- </div>
58
-
59
-
60
-
61
- <div class="item">
62
-
63
- <label class="label_c">メール</label>
64
-
65
- <input class="inputs_email" type="email" name="mail" placeholder="sample@gmail.com">
66
-
67
- </div>
68
-
69
-
70
-
71
- <div class="item">
72
-
73
- <div class="sex">
74
-
75
- <label class="label_c">性別</label>
76
-
77
- <input type="radio" name="radio" class="radio-input" id="male">
78
-
79
- <label for="male">男性</label>
80
-
81
- <input type="radio" name="radio" class="radio-input" id="female">
82
-
83
- <label for="female">女性</label>
84
-
85
- </div>
86
-
87
- </div>
88
-
89
-
90
-
91
- <div class="item">
92
-
93
- <label class="label_c">メッセージ</label>
94
-
95
- <textarea class="comment" name="comment"></textarea>
96
-
97
- </div>
98
-
99
-
100
-
101
- <div class="checkbox">
102
-
103
- <label>
104
-
105
- <input type="checkbox" name="checkbox[]" class="checkbox-input">
106
-
107
- <span class="checkbox-parts">個人情報保護方針に合意する</span>
108
-
109
- </label>
110
-
111
- </div>
112
-
113
-
114
-
115
- <button type="submit" class="submitbtn">
116
-
117
- 送信する
118
-
119
- </button>
120
-
121
-
122
-
123
- </form>
124
24
 
125
25
  ```
126
26
 
127
27
 
128
28
 
129
29
  ```CSS
130
-
131
- .label_c {
132
-
133
- text-align: left;
134
-
135
- font-size: 22px;
136
-
137
- line-height: 22.5px;
138
-
139
- font-family: 'Yu Gothic';
140
-
141
- font-weight: medium;
142
-
143
- color: #3E3E3E;
144
-
145
- margin-top: 0px;
146
-
147
- margin-right: 0px;
148
-
149
- margin-bottom: 0px;
150
-
151
- }
152
-
153
-
154
30
 
155
31
  select {
156
32
 
@@ -190,374 +66,4 @@
190
66
 
191
67
  }
192
68
 
193
-
194
-
195
- .required {
196
-
197
- background-color: #FF4646;
198
-
199
- width: 55px;
200
-
201
- height: 24px;
202
-
203
- border-radius: 5px;
204
-
205
- color: #fff;
206
-
207
- font-size: 16px;
208
-
209
- line-height: 22.5px;
210
-
211
- font-family: 'Yu Gothic';
212
-
213
- font-weight: bold;
214
-
215
- padding: 2px 9px;
216
-
217
- margin-left: 96px;
218
-
219
- }
220
-
221
-
222
-
223
- .required2 {
224
-
225
- background-color: #FF4646;
226
-
227
- width: 55px;
228
-
229
- height: 24px;
230
-
231
- border-radius: 5px;
232
-
233
- color: #fff;
234
-
235
- font-size: 16px;
236
-
237
- line-height: 22.5px;
238
-
239
- font-family: 'Yu Gothic';
240
-
241
- font-weight: bold;
242
-
243
- padding: 2px 9px;
244
-
245
- margin-left: 52px;
246
-
247
- }
248
-
249
-
250
-
251
- .inputs {
252
-
253
- width: 505px;
254
-
255
- height: 22px;
256
-
257
- float:right;
258
-
259
- border: none;
260
-
261
- }
262
-
263
-
264
-
265
- .inputs_email {
266
-
267
- width: 505px;
268
-
269
- height: 22px;
270
-
271
- float:right;
272
-
273
- border: none;
274
-
275
- }
276
-
277
-
278
-
279
- input[type="text"],input[type="type"] {
280
-
281
- border-bottom: 1px solid #3E3E3E;
282
-
283
- opacity: 0.5;
284
-
285
- }
286
-
287
-
288
-
289
- input[type="email"] {
290
-
291
- border-bottom: 1px solid #3E3E3E;
292
-
293
- }
294
-
295
-
296
-
297
- /* --- ラジオボタン --- */
298
-
299
-
300
-
301
- input[type="radio"] {
302
-
303
- display: none;
304
-
305
- }
306
-
307
-
308
-
309
- .radio-input {
310
-
311
- margin-right: 60px;
312
-
313
- }
314
-
315
-
316
-
317
- .sex > .label_c {
318
-
319
- margin-right: 240px;
320
-
321
- }
322
-
323
-
324
-
325
- .radio-input + label{
326
-
327
- font-size: 22px;
328
-
329
- line-height: 22.5px;
330
-
331
- font-family: 'Yu Gothic';
332
-
333
- font-weight: medium;
334
-
335
- color: #3E3E3E;
336
-
337
- padding-left: 20px;
338
-
339
- position:relative;
340
-
341
- margin-right: 70px;
342
-
343
- }
344
-
345
-
346
-
347
- /* 外枠 */
348
-
349
- .radio-input + label::before{
350
-
351
- content: "";
352
-
353
- display: block;
354
-
355
- position: absolute;
356
-
357
- top: 7px;
358
-
359
- left: -11px;
360
-
361
- width: 12px;
362
-
363
- height: 12px;
364
-
365
- border: 1px solid #999;
366
-
367
- border-radius: 50%;
368
-
369
- }
370
-
371
-
372
-
373
- /* 内枠 */
374
-
375
- .radio-input:checked + label::after{
376
-
377
- content: "";
378
-
379
- display: block;
380
-
381
- position: absolute;
382
-
383
- top: 11px;
384
-
385
- left: -7px;
386
-
387
- width: 6px;
388
-
389
- height: 6px;
390
-
391
- background: #3B69FF;
392
-
393
- border-radius: 50%;
394
-
395
- }
396
-
397
-
398
-
399
- .comment {
400
-
401
- width: 780px;
402
-
403
- height: 213px;
404
-
405
- border: 1px solid #707070;
406
-
407
- margin-top: 10px;
408
-
409
- }
410
-
411
-
412
-
413
- /* --- チェックボックス --- */
414
-
415
-
416
-
417
- .checkbox {
418
-
419
- margin-bottom: 30px;
420
-
421
- }
422
-
423
-
424
-
425
- .checkbox-input{
426
-
427
- display: none;
428
-
429
- }
430
-
431
-
432
-
433
- .checkbox-parts{
434
-
435
- padding-left: 42px;
436
-
437
- position:relative;
438
-
439
- margin-right: 20px;
440
-
441
- color: #3E3E3E;
442
-
443
- font-size: 18px;
444
-
445
- line-height: 22.5px;
446
-
447
- font-family: 'Yu Gothic';
448
-
449
- }
450
-
451
-
452
-
453
- .checkbox-parts::before{
454
-
455
- content: "";
456
-
457
- display: block;
458
-
459
- position: absolute;
460
-
461
- top: 1.5px;
462
-
463
- left: 0;
464
-
465
- width: 18px;
466
-
467
- height: 18px;
468
-
469
- border: 1px solid #707070;
470
-
471
- border-radius: 4px;
472
-
473
- }
474
-
475
-
476
-
477
- .checkbox-input:checked + .checkbox-parts::after{
478
-
479
- content: "";
480
-
481
- display: block;
482
-
483
- position: absolute;
484
-
485
- top: 0px;
486
-
487
- left: 5px;
488
-
489
- width: 7px;
490
-
491
- height: 14px;
492
-
493
- transform: rotate(40deg);
494
-
495
- border-bottom: 3px solid #3B69FF;
496
-
497
- border-right: 3px solid #3B69FF;
498
-
499
- }
500
-
501
-
502
-
503
- /* --- チェックボックスここまで --- */
504
-
505
-
506
-
507
- .submitbtn {
508
-
509
- background-color: #FFAA3B;
510
-
511
- width: 174px;
512
-
513
- height: 50px;
514
-
515
- border-radius: 10px;
516
-
517
- box-shadow: 0px 3px 5px #00000033;
518
-
519
- color: #fff;
520
-
521
- font-size: 18px;
522
-
523
- line-height: 26px;
524
-
525
- letter-spacing: 0.45px;
526
-
527
- font-family: 'Yu Gothic';
528
-
529
- font-weight: bold;
530
-
531
- }
532
-
533
-
534
-
535
- ::placeholder{
536
-
537
- color:#3E3E3E;
538
-
539
- font-size: 22px;
540
-
541
- line-height: 22.5px;
542
-
543
- font-family: 'Yu Gothic';
544
-
545
- padding-left: 16px;
546
-
547
- padding-bottom: 0;
548
-
549
- opacity: 0.5;
550
-
551
- }
552
-
553
-
554
-
555
- .inputs_email::placeholder {
556
-
557
- color: #3E3E3E;
558
-
559
- opacity: 1;
560
-
561
- }
562
-
563
69
  ```