質問編集履歴

2

追記

2018/01/19 01:46

投稿

dog57
dog57

スコア131

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,535 @@
19
19
  スマホ
20
20
 
21
21
  ![イメージ説明](da8093d37d0c42828aaf1a19c686a5f8.png)
22
+
23
+
24
+
25
+ form.html
26
+
27
+ ```html
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html>
32
+
33
+
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
+
41
+ <title>お問い合わせフォーム</title>
42
+
43
+ <link rel="stylesheet" href="style.css">
44
+
45
+ </head>
46
+
47
+
48
+
49
+ <body>
50
+
51
+
52
+
53
+ <div class="container">
54
+
55
+ <!-- ロゴ画像 -->
56
+
57
+ <a href="index.html"><img src="img/logo.png" alt="SOLT inc."></a>
58
+
59
+
60
+
61
+ <!-- 見出し -->
62
+
63
+ <h2 class="heading">お問い合わせフォーム</h2>
64
+
65
+
66
+
67
+ <!-- フォーム内容 -->
68
+
69
+ <form action="checkgetpara.html" method="get">
70
+
71
+ <table border="1" class="form-table">
72
+
73
+
74
+
75
+
76
+
77
+ <tr>
78
+
79
+ <td class="inquiry">名前</td>
80
+
81
+ <td><input type="text" name="name" size="20" class="name"></td>
82
+
83
+ </tr>
84
+
85
+
86
+
87
+
88
+
89
+ <tr>
90
+
91
+ <td class="inquiry">性別</td>
92
+
93
+ <td><label><input type="radio" name="sex" class="sex" value="男">男 </label><label><input type="radio" name="sex" value="女">女</label></td>
94
+
95
+ </tr>
96
+
97
+
98
+
99
+ <tr>
100
+
101
+ <td class="inquiry">血液型</td>
102
+
103
+ <td><select name="blood" class="blood">
104
+
105
+
106
+
107
+ <option value="A型">A型</option>
108
+
109
+ <option value="B型">B型</option>
110
+
111
+ <option value="O型">O型</option>
112
+
113
+ <option value="AB型">AB型</option>
114
+
115
+
116
+
117
+ </select>
118
+
119
+ </td>
120
+
121
+ </tr>
122
+
123
+
124
+
125
+ <tr>
126
+
127
+ <td class="inquiry">お問い合わせ内容</td>
128
+
129
+ <td><textarea rows=7 cols=70 name="contact" class="contact"></textarea></td>
130
+
131
+ </tr>
132
+
133
+
134
+
135
+
136
+
137
+ </table>
138
+
139
+
140
+
141
+ <div class="submit">
142
+
143
+ <input type="submit" value="送信する" class="submit-botton">
144
+
145
+ </div>
146
+
147
+
148
+
149
+ </form>
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+
162
+
163
+ </div>
164
+
165
+
166
+
167
+ </body>
168
+
169
+
170
+
171
+ </html>
172
+
173
+
174
+
175
+ ```
176
+
177
+
178
+
179
+ style.css
180
+
181
+ ```css
182
+
183
+ @charset "utf-8";
184
+
185
+
186
+
187
+ * {
188
+
189
+ box-sizing: border-box;
190
+
191
+ }
192
+
193
+
194
+
195
+ body {
196
+
197
+ font-family: "sans-serif", "Hiragino Kaku Gothic ProN";
198
+
199
+ }
200
+
201
+
202
+
203
+ /* index.html のcss */
204
+
205
+
206
+
207
+ .list {
208
+
209
+ background-color: #c93a40;
210
+
211
+ text-align: center;
212
+
213
+ }
214
+
215
+
216
+
217
+ .list-item {
218
+
219
+ display: inline-block;
220
+
221
+ color: white;
222
+
223
+ transition: all 0.5s;
224
+
225
+ }
226
+
227
+
228
+
229
+ .list-item:hover {
230
+
231
+ background-color: rgba(255, 255, 255, 0.5);
232
+
233
+ }
234
+
235
+
236
+
237
+ .lists a {
238
+
239
+ padding: 25px 70px;
240
+
241
+ color: white;
242
+
243
+ display: inline-block;
244
+
245
+ text-decoration: none;
246
+
247
+ }
248
+
249
+
250
+
251
+ .top-img {
252
+
253
+ margin-top: 50px;
254
+
255
+ }
256
+
257
+
258
+
259
+ .image {
260
+
261
+ width: 100%;
262
+
263
+ }
264
+
265
+
266
+
267
+ .top-message {
268
+
269
+ border-bottom: 2px solid #999999;
270
+
271
+ }
272
+
273
+
274
+
275
+ .message-content {
276
+
277
+ margin-left: 15px;
278
+
279
+ }
280
+
281
+
282
+
283
+ .message-contents {
284
+
285
+ margin-left: 15px;
286
+
287
+ }
288
+
289
+
290
+
291
+ .member {
292
+
293
+ background-color: #FA6964;
294
+
295
+ padding: 10px 25px;
296
+
297
+ float: left;
298
+
299
+ width: 45%;
300
+
301
+ }
302
+
303
+
304
+
305
+ .recruit {
306
+
307
+ background-color: #FA6964;
308
+
309
+ padding: 10px 25px;
310
+
311
+ width: 45%;
312
+
313
+ float: right;
314
+
315
+ }
316
+
317
+
318
+
319
+
320
+
321
+ /* メディアクエリ スマホ max-width 768px */
322
+
323
+ @media (max-width: 768px) {
324
+
325
+
326
+
327
+ .member, recruit {
328
+
329
+ width: 100%;
330
+
331
+ margin-bottom: 30px;
332
+
333
+ }
334
+
335
+
336
+
337
+ .recruit {
338
+
339
+ width: 100%;
340
+
341
+ }
342
+
343
+
344
+
345
+ .list {
346
+
347
+ display: none;
348
+
349
+ }
350
+
351
+
352
+
353
+
354
+
355
+
356
+
357
+ }
358
+
359
+
360
+
361
+ /* 以下は form.html のcss */
362
+
363
+
364
+
365
+ .form-table {
366
+
367
+ width: 100%;
368
+
369
+ height: 70vh;
370
+
371
+ }
372
+
373
+
374
+
375
+ .heading {
376
+
377
+ border-bottom: 2px solid black;
378
+
379
+ }
380
+
381
+
382
+
383
+ .inquiry {
384
+
385
+ background-color: #fa8072;
386
+
387
+ padding-left: 20px;
388
+
389
+ }
390
+
391
+
392
+
393
+ .name {
394
+
395
+ font-size: 130%;
396
+
397
+ }
398
+
399
+
400
+
401
+ .name, .sex, .blood, .contact {
402
+
403
+ margin-left: 30px;
404
+
405
+ }
406
+
407
+
408
+
409
+ .submit {
410
+
411
+ text-align: center;
412
+
413
+ margin-top: 30px;
414
+
415
+ }
416
+
417
+
418
+
419
+ .submit-botton {
420
+
421
+ padding: 15px 100px;
422
+
423
+ background-color: #c93a40;
424
+
425
+ display: inline-block;
426
+
427
+ text-decoration: none;
428
+
429
+ color: #FFF;
430
+
431
+ border-bottom: solid 4px #627295;
432
+
433
+ border-radius: 5px;
434
+
435
+ }
436
+
437
+
438
+
439
+ .submit-botton:active {
440
+
441
+ -ms-transform: translateY(4px);
442
+
443
+ -webkit-transform: translateY(4px);
444
+
445
+ transform: translateY(4px);
446
+
447
+ /*下に動く*/
448
+
449
+ box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
450
+
451
+ /*影を小さく*/
452
+
453
+ border-bottom: none;
454
+
455
+ }
456
+
457
+
458
+
459
+
460
+
461
+ /* メディアクエリ スマホ max-width 768px */
462
+
463
+ @media (max-width: 768px) {
464
+
465
+
466
+
467
+ .heading {
468
+
469
+ border-bottom: 1px solid black;
470
+
471
+ }
472
+
473
+
474
+
475
+ .name, .contact {
476
+
477
+ margin: 0px;
478
+
479
+ }
480
+
481
+
482
+
483
+ table, tr, td {
484
+
485
+ border: none;
486
+
487
+ }
488
+
489
+
490
+
491
+ tr, td {
492
+
493
+ display: block;
494
+
495
+ margin: 30px 0px;
496
+
497
+ }
498
+
499
+
500
+
501
+
502
+
503
+
504
+
505
+ .inquiry {
506
+
507
+ border: solid 1px #627295;
508
+
509
+ padding: 14px 0px;
510
+
511
+ padding-left: 20px;
512
+
513
+ }
514
+
515
+
516
+
517
+ .name {
518
+
519
+ width: 100%;
520
+
521
+ padding: 4px 0px;
522
+
523
+
524
+
525
+ }
526
+
527
+
528
+
529
+ .blood {
530
+
531
+ padding: 3px 4px;
532
+
533
+ }
534
+
535
+
536
+
537
+ .contact {
538
+
539
+ width: 90%;
540
+
541
+ }
542
+
543
+
544
+
545
+
546
+
547
+
548
+
549
+
550
+
551
+ }
552
+
553
+ ```

1

画像の変更

2018/01/19 01:46

投稿

dog57
dog57

スコア131

test CHANGED
File without changes
test CHANGED
@@ -12,10 +12,10 @@
12
12
 
13
13
  PC
14
14
 
15
- ![イメージ説明](4ec74f098b51b202e313c43130a99423.png)
15
+ ![イメージ説明](99ed6f3ef493c38363092298ff6c2307.png)
16
16
 
17
17
 
18
18
 
19
19
  スマホ
20
20
 
21
- ![イメージ説明](61d4dc2c78f26a56f04cda997ae140d4.png)
21
+ ![イメージ説明](da8093d37d0c42828aaf1a19c686a5f8.png)