質問編集履歴

1

HTMLファイル追加致しました。よろしくお願いします。

2021/01/02 07:23

投稿

NISUKE
NISUKE

スコア2

test CHANGED
File without changes
test CHANGED
@@ -18,233 +18,135 @@
18
18
 
19
19
  ```
20
20
 
21
- /* CSSのリセット(消さないでください) */
21
+ <!DOCTYPE html>
22
22
 
23
- html, body,
23
+ <html>
24
24
 
25
- ul, ol, li,
25
+ <head>
26
26
 
27
- h1, h2, h3, h4, h5, h6, p,
27
+ <meta charset="utf-8">
28
28
 
29
- form, input, div {
29
+ <title>Progate</title>
30
30
 
31
- margin: 0;
31
+ <link rel="stylesheet" href="stylesheet.css">
32
32
 
33
- padding: 0;
33
+ </head>
34
34
 
35
- }
35
+ <body>
36
36
 
37
+ <!-- ここからHTMLを書き始めてください -->
37
38
 
39
+ <div class="header">
38
40
 
39
- body {
41
+ <div class="header-logo">Progate</div>
40
42
 
41
- font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
43
+ <div class="header-list">
42
44
 
43
- }
45
+ <ul>
44
46
 
47
+ <li>プログラミングとは</li>
45
48
 
49
+ <li>学べるレッスン</li>
46
50
 
47
- li {
51
+ <li>お問い合わせ</li>
48
52
 
49
- list-style: none;
53
+ </ul>
50
54
 
51
- }
55
+ </div>
52
56
 
57
+ </div>
53
58
 
59
+ <div class="main">
54
60
 
55
- /* ここからCSSを記述してください */
61
+ <div class="copy-container">
56
62
 
57
- .header {
63
+ <h1>HELLO WORLD<span>.</span></h1>
58
64
 
59
- height: 90px;
65
+ <h2>プログラミングの世界へようこそ</h2>
60
66
 
61
- background-color:#26d0c9;
67
+ </div>
62
68
 
63
- color: #fff;
69
+ <div class="contents">
64
70
 
65
- }
71
+ <h3 class="section-title">学べるレッスン</h3>
66
72
 
73
+ <div class="contents-item">
67
74
 
75
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
68
76
 
77
+ <p>HTML & CSS</p>
69
78
 
79
+ </div>
70
80
 
71
- .header-logo {
81
+ <div class="contents-item">
72
82
 
73
- font-size: 36px;
83
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
74
84
 
75
- padding: 20px 40px;
85
+ <p>PHP</p>
76
86
 
77
- float: left;
87
+ </div>
78
88
 
79
- }
89
+ <div class="contents-item">
80
90
 
91
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
81
92
 
93
+ <p>Ruby</p>
82
94
 
83
- .header-list li {
95
+ </div>
84
96
 
85
- float: left;
97
+ <div class="contents-item">
86
98
 
87
- padding: 33px 20px;
99
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
88
100
 
89
- }
101
+ <p>Swift</p>
90
102
 
103
+ </div>
91
104
 
105
+ </div>
92
106
 
93
- .main {
107
+ <div class="contact-form">
94
108
 
95
- padding: 100px 80px;
109
+ <h3 class="section-title">お問い合わせ</h3>
96
110
 
97
- }
111
+ <P>メールアドレス (必須)</P>
98
112
 
113
+ <input>
99
114
 
115
+ <P>お問い合わせ内容 (必須)</P>
100
116
 
101
- .copy-container h1 {
117
+ <textarea></textarea>
102
118
 
103
- font-size: 140px;
119
+ <P>※必須項目は必ずご入力ください</P>
104
120
 
105
- }
121
+ <input class="contact-submit" type="submit" value="送信">
106
122
 
123
+ </div>
107
124
 
125
+ <div class="footer">
108
126
 
109
- .copy-container h2 {
127
+ <div class="footer-logo">Progate</div>
110
128
 
111
- font-size: 60px;
129
+ <div class="footer-list">
112
130
 
113
- }
131
+ <ul>
114
132
 
133
+ <li>会社概要</li>
115
134
 
135
+ <li>採用</li>
116
136
 
117
- .copy-container span {
137
+ <li>お問い合わせ</li>
118
138
 
119
- color: #ff4a4a;
139
+ </ul>
120
140
 
121
- }
141
+ </div>
122
142
 
143
+ </div>
123
144
 
145
+ </div>
124
146
 
147
+ </body>
125
148
 
126
-
127
- .contents {
128
-
129
- height: 500px;
130
-
131
- margin-top: 100px;
132
-
133
- }
134
-
135
-
136
-
137
- .section-title {
138
-
139
- font-size: 28px;
140
-
141
- border-bottom: 2px solid #dee7ec;
142
-
143
- padding-bottom: 15px;
144
-
145
- margin-bottom: 50px;
146
-
147
- }
148
-
149
-
150
-
151
- .contents-item {
152
-
153
- float: left;
154
-
155
- margin-right: 40px;
149
+ </html>
156
-
157
- }
158
-
159
-
160
-
161
- .contents-item p {
162
-
163
- font-size: 24px;
164
-
165
- margin-top: 30px;
166
-
167
- }
168
-
169
-
170
-
171
- .contact-form {
172
-
173
- padding-top: 100px;
174
-
175
- }
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
- input, textarea {
184
-
185
- width: 400px;
186
-
187
- margin-top: 10px;
188
-
189
- margin-bottom: 30px;
190
-
191
- padding: 20px;
192
-
193
- font-size: 18px;
194
-
195
- border: 1px solid #dee7ec;
196
-
197
- }
198
-
199
-
200
-
201
- .contact-submit {
202
-
203
- background-color: #dee7ec;
204
-
205
- color: #889eab;
206
-
207
- }
208
-
209
-
210
-
211
- .footer {
212
-
213
- height: 120px;
214
-
215
- padding: 40px;
216
-
217
- background-color: #2f5167;
218
-
219
- color: #fff;
220
-
221
- }
222
-
223
-
224
-
225
- .footer-list {
226
-
227
- float: right;
228
-
229
- }
230
-
231
-
232
-
233
- .footer-list li {
234
-
235
- padding-bottom: 20px;
236
-
237
- }
238
-
239
-
240
-
241
- .footer-logo {
242
-
243
- font-size: 32px;
244
-
245
- float: left;
246
-
247
- }
248
150
 
249
151
  ```
250
152