質問編集履歴

1

画像が貼れておりませんでしたのでアップしました。

2020/10/04 11:06

投稿

sekudai
sekudai

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,250 +10,246 @@
10
10
 
11
11
 
12
12
 
13
+ ![イメージ説明](b7c5694bd3913c2cbe8730472f2e9bad.png)
14
+
15
+
16
+
17
+ ### 該当のソースコード
18
+
19
+
20
+
21
+ ```HTML
22
+
23
+ <!DOCTYPE html>
24
+
25
+ <html>
26
+
27
+ <head>
28
+
29
+ <meta charset="utf-8">
30
+
31
+ <title>Progate</title>
32
+
33
+ <link rel="stylesheet" href="stylesheet.css">
34
+
35
+ </head>
36
+
37
+ <body>
38
+
39
+ <!-- ここからHTMLを書き始めてください -->
40
+
41
+ <header>
42
+
43
+ <div class="title">Progate</div>
44
+
45
+ <ul>
46
+
47
+ <li>プログラミングとは</li>
48
+
49
+ <li>学べるレッスン</li>
50
+
51
+ <li>お問い合わせ</li>
52
+
53
+ </ul>
54
+
55
+ </header>
56
+
57
+ <div class="helloyoukoso">
58
+
59
+ <h1>HELLO WORLD<span>.</span></h1>
60
+
61
+ <h2>プログラミングの世界へようこそ</h2>
62
+
63
+ </div>
64
+
65
+ <h3 class=lessontitle>学べるレッスン</h3>
66
+
67
+ <div class="lessons">
68
+
69
+ <div class="lesson-logo">
70
+
71
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
72
+
73
+ <p>HTML & CSS</p>
74
+
75
+ </div>
76
+
77
+ <div class="lesson-logo">
78
+
79
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
80
+
81
+ <p>PHP</p>
82
+
83
+ </div>
84
+
85
+ <div class="lesson-logo">
86
+
87
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
88
+
89
+ <p>Ruby</p>
90
+
91
+ </div>
92
+
93
+ <div class="lesson-logo">
94
+
95
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
96
+
97
+ <p>Swift</p>
98
+
99
+ </div>
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <div class=toiawase>
106
+
107
+ <h3>お問い合わせ</h3>
108
+
109
+ </div>
110
+
111
+ </body>
112
+
113
+ </html>
114
+
13
115
  ```
14
116
 
117
+ ```CSS
118
+
119
+ body {
120
+
121
+ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
122
+
123
+ }
124
+
125
+
126
+
127
+ li {
128
+
129
+ list-style: none;
130
+
131
+ }
132
+
133
+
134
+
135
+ /* ここからCSSを記述してください */
136
+
137
+ header {
138
+
139
+ background-color:#26d0c9;
140
+
141
+ color:white;
142
+
143
+ height:90px;
144
+
145
+ }
146
+
147
+ .title{
148
+
149
+ float:left;
150
+
151
+ font-size:36px;
152
+
153
+ padding:40px 40px 20px 20px;
154
+
155
+ }
156
+
157
+ li {
158
+
159
+ float:left;
160
+
161
+ list-style:none;
162
+
163
+ padding:33px 20px;
164
+
165
+ }
166
+
167
+ .helloyoukoso{
168
+
169
+ padding-top:100px;
170
+
171
+ padding-left:80px;
172
+
173
+ padding-right:80px;
174
+
175
+ }
176
+
177
+ .helloyoukoso h1{
178
+
179
+ font-size:140px;
180
+
181
+ }
182
+
183
+ .helloyoukoso h2{
184
+
185
+ font-size:60px;
186
+
187
+ }
188
+
189
+ .helloyoukoso span {
190
+
191
+ color:red;
192
+
193
+ }
194
+
195
+ .lessons {
196
+
197
+ padding-right:80px;
198
+
199
+ padding-left:80px;
200
+
201
+ padding-top:50px;
202
+
203
+ }
204
+
205
+ .lesson-logo {
206
+
207
+ float:left;
208
+
209
+ padding-right:40px;
210
+
211
+ }
212
+
213
+ .lesson-logo p {
214
+
215
+ padding-top:30px;
216
+
217
+ font-size:24px;
218
+
219
+ padding-bottom:100px;
220
+
221
+ }
222
+
223
+ .lessontitle{
224
+
225
+ padding-top:100px;
226
+
227
+ padding-left:80px;
228
+
229
+ font-size:28px;
230
+
15
- ![横並びになる画像](6d3736fc0ae969766fbff66c04f443fc.png)
231
+ border-bottom:2px solid #dee7ec;
232
+
233
+ padding-bottom:15px;
234
+
235
+ }
236
+
237
+ .toiawase {
238
+
239
+ padding-left:80px;
240
+
241
+ }
242
+
243
+ .toiawase h3{
244
+
245
+ font-size:28px;
246
+
247
+ }
16
248
 
17
249
  ```
18
250
 
19
251
 
20
252
 
21
- ### 該当のソースコード
22
-
23
-
24
-
25
- ```HTML
26
-
27
- <!DOCTYPE html>
28
-
29
- <html>
30
-
31
- <head>
32
-
33
- <meta charset="utf-8">
34
-
35
- <title>Progate</title>
36
-
37
- <link rel="stylesheet" href="stylesheet.css">
38
-
39
- </head>
40
-
41
- <body>
42
-
43
- <!-- ここからHTMLを書き始めてください -->
44
-
45
- <header>
46
-
47
- <div class="title">Progate</div>
48
-
49
- <ul>
50
-
51
- <li>プログラミングとは</li>
52
-
53
- <li>学べるレッスン</li>
54
-
55
- <li>お問い合わせ</li>
56
-
57
- </ul>
58
-
59
- </header>
60
-
61
- <div class="helloyoukoso">
62
-
63
- <h1>HELLO WORLD<span>.</span></h1>
64
-
65
- <h2>プログラミングの世界へようこそ</h2>
66
-
67
- </div>
68
-
69
- <h3 class=lessontitle>学べるレッスン</h3>
70
-
71
- <div class="lessons">
72
-
73
- <div class="lesson-logo">
74
-
75
- <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
76
-
77
- <p>HTML & CSS</p>
78
-
79
- </div>
80
-
81
- <div class="lesson-logo">
82
-
83
- <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
84
-
85
- <p>PHP</p>
86
-
87
- </div>
88
-
89
- <div class="lesson-logo">
90
-
91
- <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
92
-
93
- <p>Ruby</p>
94
-
95
- </div>
96
-
97
- <div class="lesson-logo">
98
-
99
- <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
100
-
101
- <p>Swift</p>
102
-
103
- </div>
104
-
105
- </div>
106
-
107
-
108
-
109
- <div class=toiawase>
110
-
111
- <h3>お問い合わせ</h3>
112
-
113
- </div>
114
-
115
- </body>
116
-
117
- </html>
118
-
119
- ```
120
-
121
- ```CSS
122
-
123
- body {
124
-
125
- font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
126
-
127
- }
128
-
129
-
130
-
131
- li {
132
-
133
- list-style: none;
134
-
135
- }
136
-
137
-
138
-
139
- /* ここからCSSを記述してください */
140
-
141
- header {
142
-
143
- background-color:#26d0c9;
144
-
145
- color:white;
146
-
147
- height:90px;
148
-
149
- }
150
-
151
- .title{
152
-
153
- float:left;
154
-
155
- font-size:36px;
156
-
157
- padding:40px 40px 20px 20px;
158
-
159
- }
160
-
161
- li {
162
-
163
- float:left;
164
-
165
- list-style:none;
166
-
167
- padding:33px 20px;
168
-
169
- }
170
-
171
- .helloyoukoso{
172
-
173
- padding-top:100px;
174
-
175
- padding-left:80px;
176
-
177
- padding-right:80px;
178
-
179
- }
180
-
181
- .helloyoukoso h1{
182
-
183
- font-size:140px;
184
-
185
- }
186
-
187
- .helloyoukoso h2{
188
-
189
- font-size:60px;
190
-
191
- }
192
-
193
- .helloyoukoso span {
194
-
195
- color:red;
196
-
197
- }
198
-
199
- .lessons {
200
-
201
- padding-right:80px;
202
-
203
- padding-left:80px;
204
-
205
- padding-top:50px;
206
-
207
- }
208
-
209
- .lesson-logo {
210
-
211
- float:left;
212
-
213
- padding-right:40px;
214
-
215
- }
216
-
217
- .lesson-logo p {
218
-
219
- padding-top:30px;
220
-
221
- font-size:24px;
222
-
223
- padding-bottom:100px;
224
-
225
- }
226
-
227
- .lessontitle{
228
-
229
- padding-top:100px;
230
-
231
- padding-left:80px;
232
-
233
- font-size:28px;
234
-
235
- border-bottom:2px solid #dee7ec;
236
-
237
- padding-bottom:15px;
238
-
239
- }
240
-
241
- .toiawase {
242
-
243
- padding-left:80px;
244
-
245
- }
246
-
247
- .toiawase h3{
248
-
249
- font-size:28px;
250
-
251
- }
252
-
253
- ```
254
-
255
-
256
-
257
253
 
258
254
 
259
255
  ### 試したこと