質問編集履歴

3

言語名追加

2018/04/18 07:53

投稿

garter
garter

スコア8

test CHANGED
File without changes
test CHANGED
@@ -42,284 +42,280 @@
42
42
 
43
43
  コード
44
44
 
45
+ ```html
46
+
47
+ <!DOCTYPE html>
48
+
49
+ <html>
50
+
51
+ <head>
52
+
53
+ <meta charset="utf-8">
54
+
55
+    <meta name="viewport" content="width=device-width,initial-scale=1">
56
+
57
+ <title>--</title>
58
+
59
+ <link rel="stylesheet" href="stylesheet.css">
60
+
61
+  </head>
62
+
63
+  <body>
64
+
65
+ <div class="main-wrapper">
66
+
67
+ <div class="container">
68
+
69
+ <div class="copy">
70
+
71
+ <h1>ーー</h1>
72
+
73
+ </div>
74
+
75
+ <img src="aa.png" class="aa">
76
+
77
+ <div class="points">
78
+
79
+ <div class="point">
80
+
81
+ <span class="sircle"></span>
82
+
83
+ <h2 class="sircle-po">ーー</h2>
84
+
85
+ </div>
86
+
87
+ <div class="point">
88
+
89
+ <span class="sircle"></span>
90
+
91
+ <h2 class="sircle-po">ーー</h2>
92
+
93
+ </div>
94
+
95
+ <div class="point">
96
+
97
+ <span class="sircle"></span>
98
+
99
+ <h2 class="sircle-po">ーー</h2>
100
+
101
+ </div>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ <body>
110
+
111
+ </html>
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+ ``````ここに言語を入力
120
+
121
+ ```css
122
+
123
+
124
+
125
+ body {
126
+
127
+ margin: 0;
128
+
129
+ font-family: "Hiragino Kaku Gothic ProN";
130
+
131
+ }
132
+
133
+
134
+
135
+ html,body{
136
+
137
+ width: 100%;
138
+
139
+ }
140
+
141
+
142
+
143
+ .img {
144
+
145
+ vertical-align:bottom;
146
+
147
+ }
148
+
149
+
150
+
151
+
152
+
153
+ h1 {
154
+
155
+ font-size: 80px;
156
+
157
+ color: #111e3e;
158
+
159
+ }
160
+
161
+
162
+
163
+ p {
164
+
165
+ font-size: 16px;
166
+
167
+ color: #111e3e;
168
+
169
+ }
170
+
171
+
172
+
173
+
174
+
175
+ .container {
176
+
177
+ width: 100%;
178
+
179
+ max-width: 1040px;
180
+
181
+ padding: 0 15px;
182
+
183
+ margin: 0 auto;
184
+
185
+ }
186
+
187
+
188
+
189
+ * {
190
+
191
+ box-sizing: border-box;
192
+
193
+ }
194
+
195
+
196
+
197
+ .main-wrapper {
198
+
199
+ margin-top: 60px;
200
+
201
+ background-color: green;
202
+
203
+ background-size: cover;
204
+
205
+ position: relative;
206
+
207
+ vertical-align: bottom;
208
+
209
+ width: 100%;
210
+
211
+ }
212
+
213
+
214
+
215
+ .aa {
216
+
217
+ display: inline-block;
218
+
219
+ height: 100%;
220
+
221
+ position: absolute;
222
+
223
+ bottom: 0%;
224
+
225
+ left: 50%;
226
+
227
+ }
228
+
229
+
230
+
231
+ .span {
232
+
233
+ display: block;
234
+
235
+ }
236
+
237
+
238
+
239
+ .copy h1 {
240
+
241
+ font-size: 46px;
242
+
243
+ color: #111e3e;
244
+
245
+ padding-top: 100px;
246
+
247
+ }
248
+
249
+
250
+
251
+ .copy span {
252
+
253
+ font-size:80px;
254
+
255
+ }
256
+
257
+
258
+
259
+ .sircle {
260
+
261
+ display: inline-block;
262
+
263
+ width: 185px;
264
+
265
+ height: 185px;
266
+
267
+ border-radius: 50%;
268
+
269
+ background-color: #111e3e;
270
+
271
+ }
272
+
273
+
274
+
275
+ .sircle-po {
276
+
277
+ position: absolute;
278
+
279
+ text-align: center;
280
+
281
+ color: white;
282
+
283
+ display: inline-block;
284
+
285
+ left: 0;
286
+
287
+ top: 0;
288
+
289
+ width: 185px;
290
+
291
+ font-weight: normal;
292
+
293
+ }
294
+
295
+
296
+
297
+ .points {
298
+
299
+ padding: 130px 0 300px 0;
300
+
301
+ }
302
+
303
+
304
+
305
+ .point {
306
+
307
+ float: left;
308
+
309
+ margin: 0 30px;
310
+
311
+ position: relative;
312
+
313
+ }
314
+
315
+
316
+
45
317
  ```
46
318
 
47
-
48
-
49
- <!DOCTYPE html>
50
-
51
- <html>
52
-
53
- <head>
54
-
55
- <meta charset="utf-8">
56
-
57
-    <meta name="viewport" content="width=device-width,initial-scale=1">
58
-
59
- <title>--</title>
60
-
61
- <link rel="stylesheet" href="stylesheet.css">
62
-
63
-  </head>
64
-
65
-  <body>
66
-
67
- <div class="main-wrapper">
68
-
69
- <div class="container">
70
-
71
- <div class="copy">
72
-
73
- <h1>ーー</h1>
74
-
75
- </div>
76
-
77
- <img src="aa.png" class="aa">
78
-
79
- <div class="points">
80
-
81
- <div class="point">
82
-
83
- <span class="sircle"></span>
84
-
85
- <h2 class="sircle-po">ーー</h2>
86
-
87
- </div>
88
-
89
- <div class="point">
90
-
91
- <span class="sircle"></span>
92
-
93
- <h2 class="sircle-po">ーー</h2>
94
-
95
- </div>
96
-
97
- <div class="point">
98
-
99
- <span class="sircle"></span>
100
-
101
- <h2 class="sircle-po">ーー</h2>
102
-
103
- </div>
104
-
105
- </div>
106
-
107
- </div>
108
-
109
- </div>
110
-
111
- <body>
112
-
113
- </html>
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
- ``````ここに言語を入力
122
-
123
- コード
124
-
125
- ```
126
-
127
-
128
-
129
- body {
130
-
131
- margin: 0;
132
-
133
- font-family: "Hiragino Kaku Gothic ProN";
134
-
135
- }
136
-
137
-
138
-
139
- html,body{
140
-
141
- width: 100%;
142
-
143
- }
144
-
145
-
146
-
147
- .img {
148
-
149
- vertical-align:bottom;
150
-
151
- }
152
-
153
-
154
-
155
-
156
-
157
- h1 {
158
-
159
- font-size: 80px;
160
-
161
- color: #111e3e;
162
-
163
- }
164
-
165
-
166
-
167
- p {
168
-
169
- font-size: 16px;
170
-
171
- color: #111e3e;
172
-
173
- }
174
-
175
-
176
-
177
-
178
-
179
- .container {
180
-
181
- width: 100%;
182
-
183
- max-width: 1040px;
184
-
185
- padding: 0 15px;
186
-
187
- margin: 0 auto;
188
-
189
- }
190
-
191
-
192
-
193
- * {
194
-
195
- box-sizing: border-box;
196
-
197
- }
198
-
199
-
200
-
201
- .main-wrapper {
202
-
203
- margin-top: 60px;
204
-
205
- background-color: green;
206
-
207
- background-size: cover;
208
-
209
- position: relative;
210
-
211
- vertical-align: bottom;
212
-
213
- width: 100%;
214
-
215
- }
216
-
217
-
218
-
219
- .aa {
220
-
221
- display: inline-block;
222
-
223
- height: 100%;
224
-
225
- position: absolute;
226
-
227
- bottom: 0%;
228
-
229
- left: 50%;
230
-
231
- }
232
-
233
-
234
-
235
- .span {
236
-
237
- display: block;
238
-
239
- }
240
-
241
-
242
-
243
- .copy h1 {
244
-
245
- font-size: 46px;
246
-
247
- color: #111e3e;
248
-
249
- padding-top: 100px;
250
-
251
- }
252
-
253
-
254
-
255
- .copy span {
256
-
257
- font-size:80px;
258
-
259
- }
260
-
261
-
262
-
263
- .sircle {
264
-
265
- display: inline-block;
266
-
267
- width: 185px;
268
-
269
- height: 185px;
270
-
271
- border-radius: 50%;
272
-
273
- background-color: #111e3e;
274
-
275
- }
276
-
277
-
278
-
279
- .sircle-po {
280
-
281
- position: absolute;
282
-
283
- text-align: center;
284
-
285
- color: white;
286
-
287
- display: inline-block;
288
-
289
- left: 0;
290
-
291
- top: 0;
292
-
293
- width: 185px;
294
-
295
- font-weight: normal;
296
-
297
- }
298
-
299
-
300
-
301
- .points {
302
-
303
- padding: 130px 0 300px 0;
304
-
305
- }
306
-
307
-
308
-
309
- .point {
310
-
311
- float: left;
312
-
313
- margin: 0 30px;
314
-
315
- position: relative;
316
-
317
- }
318
-
319
-
320
-
321
- ```
322
-
323
319
  ![イメージ説明](aa3e4936bb826f4a9be5e5f0692bce08.png)
324
320
 
325
321
 

2

コード分けしました

2018/04/18 07:53

投稿

garter
garter

スコア8

test CHANGED
File without changes
test CHANGED
@@ -38,9 +38,13 @@
38
38
 
39
39
  <meta name="viewport" content="width=device-width,initial-scale=1">
40
40
 
41
-
41
+ ```ここに言語を入力
42
-
42
+
43
- HTML
43
+ コード
44
+
45
+ ```
46
+
47
+
44
48
 
45
49
  <!DOCTYPE html>
46
50
 
@@ -56,8 +60,6 @@
56
60
 
57
61
  <link rel="stylesheet" href="stylesheet.css">
58
62
 
59
-    <link rel="stylesheet" href="stylesheet-responsive.css" >
60
-
61
63
   </head>
62
64
 
63
65
   <body>
@@ -112,7 +114,17 @@
112
114
 
113
115
 
114
116
 
117
+
118
+
119
+
120
+
121
+ ``````ここに言語を入力
122
+
115
- css
123
+ コード
124
+
125
+ ```
126
+
127
+
116
128
 
117
129
  body {
118
130
 

1

HTMLとCSSを追記しました

2018/04/18 07:51

投稿

garter
garter

スコア8

test CHANGED
File without changes
test CHANGED
@@ -38,8 +38,278 @@
38
38
 
39
39
  <meta name="viewport" content="width=device-width,initial-scale=1">
40
40
 
41
+
42
+
43
+ HTML
44
+
45
+ <!DOCTYPE html>
46
+
47
+ <html>
48
+
49
+ <head>
50
+
51
+ <meta charset="utf-8">
52
+
53
+    <meta name="viewport" content="width=device-width,initial-scale=1">
54
+
55
+ <title>--</title>
56
+
57
+ <link rel="stylesheet" href="stylesheet.css">
58
+
59
+    <link rel="stylesheet" href="stylesheet-responsive.css" >
60
+
61
+  </head>
62
+
63
+  <body>
64
+
65
+ <div class="main-wrapper">
66
+
67
+ <div class="container">
68
+
69
+ <div class="copy">
70
+
71
+ <h1>ーー</h1>
72
+
73
+ </div>
74
+
75
+ <img src="aa.png" class="aa">
76
+
77
+ <div class="points">
78
+
79
+ <div class="point">
80
+
81
+ <span class="sircle"></span>
82
+
83
+ <h2 class="sircle-po">ーー</h2>
84
+
85
+ </div>
86
+
87
+ <div class="point">
88
+
89
+ <span class="sircle"></span>
90
+
91
+ <h2 class="sircle-po">ーー</h2>
92
+
93
+ </div>
94
+
95
+ <div class="point">
96
+
97
+ <span class="sircle"></span>
98
+
99
+ <h2 class="sircle-po">ーー</h2>
100
+
101
+ </div>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ <body>
110
+
111
+ </html>
112
+
113
+
114
+
115
+ css
116
+
117
+ body {
118
+
119
+ margin: 0;
120
+
121
+ font-family: "Hiragino Kaku Gothic ProN";
122
+
123
+ }
124
+
125
+
126
+
127
+ html,body{
128
+
129
+ width: 100%;
130
+
131
+ }
132
+
133
+
134
+
135
+ .img {
136
+
137
+ vertical-align:bottom;
138
+
139
+ }
140
+
141
+
142
+
143
+
144
+
145
+ h1 {
146
+
147
+ font-size: 80px;
148
+
149
+ color: #111e3e;
150
+
151
+ }
152
+
153
+
154
+
155
+ p {
156
+
157
+ font-size: 16px;
158
+
159
+ color: #111e3e;
160
+
161
+ }
162
+
163
+
164
+
165
+
166
+
167
+ .container {
168
+
169
+ width: 100%;
170
+
171
+ max-width: 1040px;
172
+
173
+ padding: 0 15px;
174
+
175
+ margin: 0 auto;
176
+
177
+ }
178
+
179
+
180
+
181
+ * {
182
+
183
+ box-sizing: border-box;
184
+
185
+ }
186
+
187
+
188
+
189
+ .main-wrapper {
190
+
191
+ margin-top: 60px;
192
+
193
+ background-color: green;
194
+
195
+ background-size: cover;
196
+
197
+ position: relative;
198
+
199
+ vertical-align: bottom;
200
+
201
+ width: 100%;
202
+
203
+ }
204
+
205
+
206
+
207
+ .aa {
208
+
209
+ display: inline-block;
210
+
211
+ height: 100%;
212
+
213
+ position: absolute;
214
+
215
+ bottom: 0%;
216
+
217
+ left: 50%;
218
+
219
+ }
220
+
221
+
222
+
223
+ .span {
224
+
225
+ display: block;
226
+
227
+ }
228
+
229
+
230
+
231
+ .copy h1 {
232
+
233
+ font-size: 46px;
234
+
235
+ color: #111e3e;
236
+
237
+ padding-top: 100px;
238
+
239
+ }
240
+
241
+
242
+
243
+ .copy span {
244
+
245
+ font-size:80px;
246
+
247
+ }
248
+
249
+
250
+
251
+ .sircle {
252
+
253
+ display: inline-block;
254
+
255
+ width: 185px;
256
+
257
+ height: 185px;
258
+
259
+ border-radius: 50%;
260
+
261
+ background-color: #111e3e;
262
+
263
+ }
264
+
265
+
266
+
267
+ .sircle-po {
268
+
269
+ position: absolute;
270
+
271
+ text-align: center;
272
+
273
+ color: white;
274
+
275
+ display: inline-block;
276
+
277
+ left: 0;
278
+
279
+ top: 0;
280
+
281
+ width: 185px;
282
+
283
+ font-weight: normal;
284
+
285
+ }
286
+
287
+
288
+
289
+ .points {
290
+
291
+ padding: 130px 0 300px 0;
292
+
293
+ }
294
+
295
+
296
+
297
+ .point {
298
+
299
+ float: left;
300
+
301
+ margin: 0 30px;
302
+
303
+ position: relative;
304
+
305
+ }
306
+
307
+
308
+
41
309
  ```
42
310
 
311
+ ![イメージ説明](aa3e4936bb826f4a9be5e5f0692bce08.png)
312
+
43
313
 
44
314
 
45
315
  ### 試したこと