質問編集履歴

6

画像を追加しました

2021/08/05 03:43

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![![イメージ説明](a0552a6e713050a415d74251e9d66e40.png)](1bfe5622f91ce712d7ed8726f8393221.png)Progate初級道場コースのお問い合わせフォームを作る部分をやっています。
1
+ Progate初級道場コースのお問い合わせフォームを作る部分をやっています。
2
2
 
3
3
 
4
4
 
@@ -629,3 +629,11 @@
629
629
  }
630
630
 
631
631
  ```
632
+
633
+ ![イメージ説明](ca3e1959733ff751839293a2eb4ea402.png)
634
+
635
+
636
+
637
+ 自分で書いたものを拡大して表示すると下の画像のようにお問い合わせの部分がメニューに横並びになるようです。
638
+
639
+ ![イメージ説明](9177ca9fb312d9547d6015dfb885db90.png)

5

画像を追加しました

2021/08/05 03:43

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- Progate初級道場コースのお問い合わせフォームを作る部分をやっています。
1
+ ![![イメージ説明](a0552a6e713050a415d74251e9d66e40.png)](1bfe5622f91ce712d7ed8726f8393221.png)Progate初級道場コースのお問い合わせフォームを作る部分をやっています。
2
2
 
3
3
 
4
4
 

4

答えのHTMLとCSSを追記しました

2021/08/05 03:40

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  追記:HTMLとCSS全体を載せておきます。
16
16
 
17
- HTML
17
+ 自分で書いたHTML
18
18
 
19
19
  ```ここに言語を入力
20
20
 
@@ -138,6 +138,128 @@
138
138
 
139
139
  ```
140
140
 
141
+ 答えのHTML
142
+
143
+ ```<!DOCTYPE html>
144
+
145
+ <html>
146
+
147
+ <head>
148
+
149
+ <meta charset="utf-8">
150
+
151
+ <title>Progate</title>
152
+
153
+ <link rel="stylesheet" href="stylesheet.css">
154
+
155
+ </head>
156
+
157
+ <body>
158
+
159
+ <!-- ここからHTMLを書き始めてください -->
160
+
161
+ <div class="header">
162
+
163
+ <div class="header-logo">Progate</div>
164
+
165
+ <div class="header-list">
166
+
167
+ <ul>
168
+
169
+ <li>プログラミングとは</li>
170
+
171
+ <li>学べるレッスン</li>
172
+
173
+ <li>お問い合わせ</li>
174
+
175
+ </ul>
176
+
177
+ </div>
178
+
179
+ </div>
180
+
181
+
182
+
183
+ <div class="main">
184
+
185
+ <div class="copy-container">
186
+
187
+ <h1>HELLO WORLD<span>.</span></h1>
188
+
189
+ <h2>プログラミングの世界へようこそ</h2>
190
+
191
+ </div>
192
+
193
+
194
+
195
+ <div class="contents">
196
+
197
+ <h3 class="section-title">学べるレッスン</h3>
198
+
199
+ <div class="contents-item">
200
+
201
+ <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg">
202
+
203
+ <p>HTML & CSS</p>
204
+
205
+ </div>
206
+
207
+ <div class="contents-item">
208
+
209
+ <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg">
210
+
211
+ <p>PHP</p>
212
+
213
+ </div>
214
+
215
+ <div class="contents-item">
216
+
217
+ <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg">
218
+
219
+ <p>Ruby</p>
220
+
221
+ </div>
222
+
223
+ <div class="contents-item">
224
+
225
+ <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg">
226
+
227
+ <p>Swift</p>
228
+
229
+ </div>
230
+
231
+ </div>
232
+
233
+
234
+
235
+ <div class="contact-form">
236
+
237
+ <h3 class="section-title">お問い合わせ</h3>
238
+
239
+ <p>メールアドレス(必須)</p>
240
+
241
+ <input>
242
+
243
+ <p>お問い合わせ内容(必須)</p>
244
+
245
+ <textarea></textarea>
246
+
247
+ <p>※必須項目は必ずご入力ください</p>
248
+
249
+ <input class="contact-submit" type="submit" value="送信">
250
+
251
+ </div>
252
+
253
+ </div>
254
+
255
+ </body>
256
+
257
+ </html>
258
+
259
+ コード
260
+
261
+ ```
262
+
141
263
  CSS
142
264
 
143
265
 
@@ -323,3 +445,187 @@
323
445
  }
324
446
 
325
447
  ```
448
+
449
+ 答えのCSS
450
+
451
+ ```/* CSSのリセット(消さないでください) */
452
+
453
+ html, body,
454
+
455
+ ul, ol, li,
456
+
457
+ h1, h2, h3, h4, h5, h6, p,
458
+
459
+ form, input, div {
460
+
461
+ margin: 0;
462
+
463
+ padding: 0;
464
+
465
+ }
466
+
467
+
468
+
469
+ body {
470
+
471
+ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
472
+
473
+ }
474
+
475
+
476
+
477
+ li {
478
+
479
+ list-style: none;
480
+
481
+ }
482
+
483
+
484
+
485
+ /* ここからCSSを記述してください */
486
+
487
+ .header {
488
+
489
+ background-color: #26d0c9;
490
+
491
+ color: #fff;
492
+
493
+ height: 90px;
494
+
495
+ }
496
+
497
+
498
+
499
+ .header-logo {
500
+
501
+ float: left;
502
+
503
+ font-size: 36px;
504
+
505
+ padding: 20px 40px;
506
+
507
+ }
508
+
509
+
510
+
511
+ .header-list li {
512
+
513
+ float: left;
514
+
515
+ padding: 33px 20px;
516
+
517
+ }
518
+
519
+
520
+
521
+ .main {
522
+
523
+ padding: 100px 80px;
524
+
525
+ }
526
+
527
+
528
+
529
+ .copy-container h1 {
530
+
531
+ font-size: 140px;
532
+
533
+ }
534
+
535
+
536
+
537
+ .copy-container h2 {
538
+
539
+ font-size: 60px;
540
+
541
+ }
542
+
543
+
544
+
545
+ .copy-container span {
546
+
547
+ color: #ff4a4a;
548
+
549
+ }
550
+
551
+
552
+
553
+ .contents {
554
+
555
+ height: 500px;
556
+
557
+ margin-top: 100px;
558
+
559
+ }
560
+
561
+
562
+
563
+ .section-title {
564
+
565
+ border-bottom: 2px solid #dee7ec;
566
+
567
+ font-size: 28px;
568
+
569
+ padding-bottom: 15px;
570
+
571
+ margin-bottom: 50px;
572
+
573
+ }
574
+
575
+
576
+
577
+ .contents-item {
578
+
579
+ float: left;
580
+
581
+ margin-right: 40px;
582
+
583
+ }
584
+
585
+
586
+
587
+ .contents-item p {
588
+
589
+ font-size: 24px;
590
+
591
+ margin-top: 30px;
592
+
593
+ }
594
+
595
+
596
+
597
+ .contact-form {
598
+
599
+ padding-top: 100px;
600
+
601
+ }
602
+
603
+
604
+
605
+ input, textarea {
606
+
607
+ width: 400px;
608
+
609
+ margin-top: 10px;
610
+
611
+ margin-bottom: 30px;
612
+
613
+ padding: 20px;
614
+
615
+ font-size: 18px;
616
+
617
+ border: 1px solid #dee7ec;
618
+
619
+ }
620
+
621
+
622
+
623
+ .contact-submit {
624
+
625
+ background-color: #dee7ec;
626
+
627
+ color: #889eab;
628
+
629
+ }
630
+
631
+ ```

3

修正しました。

2021/08/05 02:50

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  HTML
18
18
 
19
+ ```ここに言語を入力
20
+
19
21
  <!DOCTYPE html>
20
22
 
21
23
  <html>
@@ -134,10 +136,14 @@
134
136
 
135
137
 
136
138
 
139
+ ```
140
+
137
141
  CSS
138
142
 
139
143
 
140
144
 
145
+ ```ここに言語を入力
146
+
141
147
  /* CSSのリセット(消さないでください) */
142
148
 
143
149
  html, body,
@@ -315,3 +321,5 @@
315
321
  height:;
316
322
 
317
323
  }
324
+
325
+ ```

2

現在のHTMLとCSSを追記しました

2021/08/05 02:39

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -9,3 +9,309 @@
9
9
  見本の通り左寄せにするにはどうすれば良いのでしょうか。
10
10
 
11
11
  試しに答えをコピペしてみたのですが、やはり文字は中央に来ます。
12
+
13
+
14
+
15
+ 追記:HTMLとCSS全体を載せておきます。
16
+
17
+ HTML
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html>
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8">
26
+
27
+ <title>Progate</title>
28
+
29
+ <link rel="stylesheet" href="stylesheet.css">
30
+
31
+ </head>
32
+
33
+ <body>
34
+
35
+ <!-- ここからHTMLを書き始めてください -->
36
+
37
+ <div class="header">
38
+
39
+ <div class="header-logo">Progate</div>
40
+
41
+ <div class="header-list">
42
+
43
+ <ul>
44
+
45
+ <li>プログラミングとは</li>
46
+
47
+ <li>学べるレッスン</li>
48
+
49
+ <li>お問い合わせ</li>
50
+
51
+ </ul>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ <div class="main">
58
+
59
+ <div class="copy-container">
60
+
61
+ <h1>HELLO WORLD<span>.</span></h1>
62
+
63
+ <h2>プログラミングの世界へようこそ</h2>
64
+
65
+ </div>
66
+
67
+
68
+
69
+ <div class="contents">
70
+
71
+ <h3 class="contents-title">学べるレッスン</h3>
72
+
73
+ <div class="contents-item">
74
+
75
+ <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg">
76
+
77
+ <p>HTML & CSS</p>
78
+
79
+ </div>
80
+
81
+ <div class="contents-item">
82
+
83
+ <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg">
84
+
85
+ <p>PHP</p>
86
+
87
+ </div>
88
+
89
+ <div class="contents-item">
90
+
91
+ <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg">
92
+
93
+ <p>Ruby</p>
94
+
95
+ </div>
96
+
97
+ <div class="contents-item">
98
+
99
+ <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg">
100
+
101
+ <p>Swift</p>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ <!--ここからお問い合わせフォーム-->
108
+
109
+ <div class="contact-form">
110
+
111
+ <h3 class="section-title">お問い合わせ</h3>
112
+
113
+ <p>メールアドレス(必須)</p>
114
+
115
+ <input>
116
+
117
+ <p>お問い合わせ内容(必須)</p>
118
+
119
+ <textarea></textarea>
120
+
121
+ <p>※必須項目は必ずご入力ください</p>
122
+
123
+ <input class="contact-submit" type="submit" value="送信">
124
+
125
+ </div>
126
+
127
+ <!--ここまでお問い合わせフォーム-->
128
+
129
+ </div>
130
+
131
+ </body>
132
+
133
+ </html>
134
+
135
+
136
+
137
+ CSS
138
+
139
+
140
+
141
+ /* CSSのリセット(消さないでください) */
142
+
143
+ html, body,
144
+
145
+ ul, ol, li,
146
+
147
+ h1, h2, h3, h4, h5, h6, p,
148
+
149
+ form, input, div {
150
+
151
+ margin: 0;
152
+
153
+ padding: 0;
154
+
155
+ }
156
+
157
+
158
+
159
+ body {
160
+
161
+ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
162
+
163
+ }
164
+
165
+
166
+
167
+ li {
168
+
169
+ list-style: none;
170
+
171
+ }
172
+
173
+
174
+
175
+ /* ここからCSSを記述してください */
176
+
177
+ .header {
178
+
179
+ background-color: #26d0c9;
180
+
181
+ color:#fff;
182
+
183
+ height:90px;
184
+
185
+ }
186
+
187
+
188
+
189
+ .header-logo{
190
+
191
+ float:left;
192
+
193
+ font-size:36px;
194
+
195
+ padding:20px 40px;
196
+
197
+ }
198
+
199
+
200
+
201
+ .header-list li{
202
+
203
+ float:left;
204
+
205
+ padding:33px 20px;
206
+
207
+ }
208
+
209
+
210
+
211
+ .main{
212
+
213
+ padding:100px 80px;
214
+
215
+ }
216
+
217
+
218
+
219
+ .copy-container span{
220
+
221
+ color:#ff4a4a;
222
+
223
+ }
224
+
225
+ .main h1{
226
+
227
+ font-size:140px;
228
+
229
+ }
230
+
231
+
232
+
233
+ .main h2{
234
+
235
+ font-size:60px;
236
+
237
+ }
238
+
239
+
240
+
241
+ .contents-title{
242
+
243
+ font-size:28px;
244
+
245
+ padding-top:100px;
246
+
247
+ border-bottom:2px solid #dee7ec;
248
+
249
+ padding-bottom:15px;
250
+
251
+ }
252
+
253
+
254
+
255
+ .contents-item{
256
+
257
+ float:left;
258
+
259
+ padding:50px 40px 100px 0px;
260
+
261
+ font-size:24px;
262
+
263
+ }
264
+
265
+
266
+
267
+ .contents-item p{
268
+
269
+ padding-top:30px;
270
+
271
+ }
272
+
273
+
274
+
275
+ .contact-form{
276
+
277
+ padding-top: 100px;
278
+
279
+ }
280
+
281
+
282
+
283
+ .contact-form-title{
284
+
285
+ font-size:;
286
+
287
+
288
+
289
+ }
290
+
291
+
292
+
293
+ .contact-form p{
294
+
295
+
296
+
297
+ }
298
+
299
+
300
+
301
+ input,textarea{
302
+
303
+
304
+
305
+ }
306
+
307
+
308
+
309
+ .submit{
310
+
311
+ background-color:#dee7ec;
312
+
313
+ color:#889eab;
314
+
315
+ height:;
316
+
317
+ }

1

2021/08/05 02:34

投稿

YN0803
YN0803

スコア1

test CHANGED
File without changes
test CHANGED
@@ -7,3 +7,5 @@
7
7
  とHTMLに入力すると、「お問い合わせ」の文字が中央に来てしまいます。
8
8
 
9
9
  見本の通り左寄せにするにはどうすれば良いのでしょうか。
10
+
11
+ 試しに答えをコピペしてみたのですが、やはり文字は中央に来ます。