質問編集履歴

2

```htmlに変更しました

2020/10/21 02:33

投稿

kajikajisan
kajikajisan

スコア1

test CHANGED
File without changes
test CHANGED
@@ -22,384 +22,380 @@
22
22
 
23
23
  ### 該当のソースコード
24
24
 
25
+ ```html
26
+
27
+ <!doctype html>
28
+
29
+ <html>
30
+
31
+
32
+
33
+ <head>
34
+
35
+ <meta charset="UTF-8">
36
+
37
+ <title>abcどうぶつえん</title>
38
+
39
+ <link href="style-copy.css" rel="stylesheet" type="text/css">
40
+
41
+ </head>
42
+
43
+
44
+
45
+ <body>
46
+
47
+ <div id="wrap">
48
+
49
+ <div class="top topimg">
50
+
51
+ <h1 class="hide"><a href="index-copy.html" >abc動物園</a></h1>
52
+
53
+ <div class="topcopy">
54
+
55
+ ここは自然の真っ只中、本物の動物に出会う場所。
56
+
57
+ </div><!--topcopy-->
58
+
59
+ </div><!--top topimg-->
60
+
61
+ <header>
62
+
63
+ <nav>
64
+
65
+ <ul>
66
+
67
+ <li class="btn1"><a href="#" >HOME</a></li>
68
+
69
+ <li class="btn2"><a href="#" >INFORMATION</a></li>
70
+
71
+ <li class="btn3"><a href="#" >ANIMALS</a></li>
72
+
73
+ <li class="btn4"><a href="#" >SHOP</a></li>
74
+
75
+ <li class="btn5"><a href="#" >EVENT</a></li>
76
+
77
+ <li class="btn6"><a href="#" >CONTACT</a></li>
78
+
79
+ </ul>
80
+
81
+ </nav>
82
+
83
+
84
+
85
+ </header>
86
+
87
+ </div><!--wrap-->
88
+
89
+ </body>
90
+
91
+
92
+
93
+ </html>
94
+
95
+
96
+
25
97
  ```
26
98
 
27
- html
28
-
29
-
30
-
31
- <!doctype html>
32
-
33
- <html>
34
-
35
-
36
-
37
- <head>
38
-
39
- <meta charset="UTF-8">
40
-
41
- <title>abcどうぶつえん</title>
42
-
43
- <link href="style-copy.css" rel="stylesheet" type="text/css">
44
-
45
- </head>
46
-
47
-
48
-
49
- <body>
50
-
51
- <div id="wrap">
52
-
53
- <div class="top topimg">
54
-
55
- <h1 class="hide"><a href="index-copy.html" >abc動物園</a></h1>
56
-
57
- <div class="topcopy">
58
-
59
- ここは自然の真っ只中、本物の動物に出会う場所。
60
-
61
- </div><!--topcopy-->
62
-
63
- </div><!--top topimg-->
64
-
65
- <header>
66
-
67
- <nav>
68
-
69
- <ul>
70
-
71
- <li class="btn1"><a href="#" >HOME</a></li>
72
-
73
- <li class="btn2"><a href="#" >INFORMATION</a></li>
74
-
75
- <li class="btn3"><a href="#" >ANIMALS</a></li>
76
-
77
- <li class="btn4"><a href="#" >SHOP</a></li>
78
-
79
- <li class="btn5"><a href="#" >EVENT</a></li>
80
-
81
- <li class="btn6"><a href="#" >CONTACT</a></li>
82
-
83
- </ul>
84
-
85
- </nav>
86
-
87
-
88
-
89
- </header>
90
-
91
- </div><!--wrap-->
92
-
93
- </body>
94
-
95
-
96
-
97
- </html>
98
-
99
-
99
+ ```css
100
+
101
+
102
+
103
+ @charset "UTF-8";
104
+
105
+
106
+
107
+ * {
108
+
109
+ margin: 0;
110
+
111
+ padding: 0;
112
+
113
+ font-family: "Myriad Pro";
114
+
115
+ }
116
+
117
+ img{
118
+
119
+ vertical-align: bottom;
120
+
121
+ }
122
+
123
+ ul{
124
+
125
+ list-style-type: none;
126
+
127
+ }
128
+
129
+ a{
130
+
131
+ text-decoration: none;
132
+
133
+ }
134
+
135
+ body {
136
+
137
+
138
+
139
+ }
140
+
141
+ .wrap{
142
+
143
+ width: 100vw;
144
+
145
+ }
146
+
147
+ .hide{
148
+
149
+ text-indent: 100%; white-space: nowrap; overflow: hidden;
150
+
151
+ }
152
+
153
+
154
+
155
+ .top {
156
+
157
+ width: 100vw;
158
+
159
+ display: flex;
160
+
161
+ justify-content: center;
162
+
163
+ align-items: center;
164
+
165
+ position: relative;
166
+
167
+ }
168
+
169
+ .topimg{
170
+
171
+ background-image: url(images/abczoo.jpg) ;
172
+
173
+ height: 0;
174
+
175
+ /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
176
+
177
+ padding-top: 56.25%;
178
+
179
+ background-size: contain;
180
+
181
+ }
182
+
183
+ h1 {
184
+
185
+ background-image: url(images/logo.png) ;
186
+
187
+ background-repeat: no-repeat;
188
+
189
+ background-size: contain;
190
+
191
+ position: fixed;
192
+
193
+ left: 10px;top: 10px;
194
+
195
+ opacity: 100%;
196
+
197
+ /*
198
+
199
+ text-indent: 100%; white-space: nowrap; overflow: hidden;
200
+
201
+ */
202
+
203
+ }
204
+
205
+ .topcopy {
206
+
207
+ text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
208
+
209
+ color: #fff;
210
+
211
+ letter-spacing: 0.2em;
212
+
213
+ position: absolute; right: 0; top: 92%;
214
+
215
+ }
216
+
217
+
218
+
219
+ nav ul{
220
+
221
+ display: flex;
222
+
223
+ justify-content: flex-end;
224
+
225
+ width:100vw;
226
+
227
+ position: relative;
228
+
229
+ vertical-align: middle;
230
+
231
+ background-color: #000009;
232
+
233
+
234
+
235
+ }
236
+
237
+ nav li{
238
+
239
+ position: absolute;
240
+
241
+ width: 100%;
242
+
243
+ position: relative;
244
+
245
+ min-width: 120px;
246
+
247
+ min-height: 44px;
248
+
249
+ display: block;
250
+
251
+ text-indent: 100%;
252
+
253
+ white-space: nowrap;
254
+
255
+ overflow: hidden;
256
+
257
+
258
+
259
+ }
260
+
261
+ .btn1{
262
+
263
+ background-image: url(images/1x/1home.jpg);
264
+
265
+ background-repeat: no-repeat;
266
+
267
+ }
268
+
269
+ .btn2{
270
+
271
+ background-image: url(images/1x/2info.jpg);
272
+
273
+ background-repeat: no-repeat;
274
+
275
+ }
276
+
277
+ .btn3{
278
+
279
+ background-image: url(images/1x/3animal.jpg);
280
+
281
+ background-repeat: no-repeat;
282
+
283
+ }
284
+
285
+ .btn4{
286
+
287
+ background-image: url(images/1x/4shop.jpg);
288
+
289
+ background-repeat: no-repeat;
290
+
291
+ }
292
+
293
+ .btn5{
294
+
295
+ background-image: url(images/1x/5event.jpg);
296
+
297
+ background-repeat: no-repeat;
298
+
299
+ }
300
+
301
+ .btn6{
302
+
303
+ background-image: url(images/1x/6contact.jpg);
304
+
305
+ background-repeat: no-repeat;
306
+
307
+ }
308
+
309
+ .btn1 a:hover{
310
+
311
+ background-image: url(images/1x/21home.jpg);
312
+
313
+ background-repeat: no-repeat;
314
+
315
+ }
316
+
317
+ .btn2 a:hover{
318
+
319
+ background-image: url(images/1x/22info.jpg);
320
+
321
+ background-repeat: no-repeat;
322
+
323
+ }
324
+
325
+ .btn3 a:hover{
326
+
327
+ background-image: url(images/1x/23animal.jpg);
328
+
329
+ background-repeat: no-repeat;
330
+
331
+ }
332
+
333
+ .btn4 a:hover{
334
+
335
+ background-image: url(images/1x/24shop.jpg);
336
+
337
+ background-repeat: no-repeat;
338
+
339
+ }
340
+
341
+ .btn5 a:hover{
342
+
343
+ background-image: url(images/1x/25event.jpg);
344
+
345
+ background-repeat: no-repeat;
346
+
347
+ }
348
+
349
+ .btn6 a:hover{
350
+
351
+ background-image: url(images/1x/26contact.jpg);
352
+
353
+ background-repeat: no-repeat;
354
+
355
+ }
356
+
357
+
358
+
359
+ nav a{
360
+
361
+ height: 100%;
362
+
363
+ }
364
+
365
+
366
+
367
+
368
+
369
+ /* SP向けの設定 */
370
+
371
+ @media screen and (max-width: 720px) {
372
+
373
+ .topcopy {
374
+
375
+ font-size: 18px;
376
+
377
+ }
378
+
379
+ nav ul{
380
+
381
+ margin: 0 auto;
382
+
383
+ }
384
+
385
+ }
386
+
387
+
388
+
389
+ /* PC向けの設定 */
390
+
391
+ @media screen and (min-width: 721px) {
392
+
393
+ .topcopy {
394
+
395
+ font-size: 26px;
396
+
397
+ }
398
+
399
+ }
100
400
 
101
401
  ```
102
-
103
- ```css
104
-
105
-
106
-
107
- @charset "UTF-8";
108
-
109
-
110
-
111
- * {
112
-
113
- margin: 0;
114
-
115
- padding: 0;
116
-
117
- font-family: "Myriad Pro";
118
-
119
- }
120
-
121
- img{
122
-
123
- vertical-align: bottom;
124
-
125
- }
126
-
127
- ul{
128
-
129
- list-style-type: none;
130
-
131
- }
132
-
133
- a{
134
-
135
- text-decoration: none;
136
-
137
- }
138
-
139
- body {
140
-
141
-
142
-
143
- }
144
-
145
- .wrap{
146
-
147
- width: 100vw;
148
-
149
- }
150
-
151
- .hide{
152
-
153
- text-indent: 100%; white-space: nowrap; overflow: hidden;
154
-
155
- }
156
-
157
-
158
-
159
- .top {
160
-
161
- width: 100vw;
162
-
163
- display: flex;
164
-
165
- justify-content: center;
166
-
167
- align-items: center;
168
-
169
- position: relative;
170
-
171
- }
172
-
173
- .topimg{
174
-
175
- background-image: url(images/abczoo.jpg) ;
176
-
177
- height: 0;
178
-
179
- /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
180
-
181
- padding-top: 56.25%;
182
-
183
- background-size: contain;
184
-
185
- }
186
-
187
- h1 {
188
-
189
- background-image: url(images/logo.png) ;
190
-
191
- background-repeat: no-repeat;
192
-
193
- background-size: contain;
194
-
195
- position: fixed;
196
-
197
- left: 10px;top: 10px;
198
-
199
- opacity: 100%;
200
-
201
- /*
202
-
203
- text-indent: 100%; white-space: nowrap; overflow: hidden;
204
-
205
- */
206
-
207
- }
208
-
209
- .topcopy {
210
-
211
- text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
212
-
213
- color: #fff;
214
-
215
- letter-spacing: 0.2em;
216
-
217
- position: absolute; right: 0; top: 92%;
218
-
219
- }
220
-
221
-
222
-
223
- nav ul{
224
-
225
- display: flex;
226
-
227
- justify-content: flex-end;
228
-
229
- width:100vw;
230
-
231
- position: relative;
232
-
233
- vertical-align: middle;
234
-
235
- background-color: #000009;
236
-
237
-
238
-
239
- }
240
-
241
- nav li{
242
-
243
- position: absolute;
244
-
245
- width: 100%;
246
-
247
- position: relative;
248
-
249
- min-width: 120px;
250
-
251
- min-height: 44px;
252
-
253
- display: block;
254
-
255
- text-indent: 100%;
256
-
257
- white-space: nowrap;
258
-
259
- overflow: hidden;
260
-
261
-
262
-
263
- }
264
-
265
- .btn1{
266
-
267
- background-image: url(images/1x/1home.jpg);
268
-
269
- background-repeat: no-repeat;
270
-
271
- }
272
-
273
- .btn2{
274
-
275
- background-image: url(images/1x/2info.jpg);
276
-
277
- background-repeat: no-repeat;
278
-
279
- }
280
-
281
- .btn3{
282
-
283
- background-image: url(images/1x/3animal.jpg);
284
-
285
- background-repeat: no-repeat;
286
-
287
- }
288
-
289
- .btn4{
290
-
291
- background-image: url(images/1x/4shop.jpg);
292
-
293
- background-repeat: no-repeat;
294
-
295
- }
296
-
297
- .btn5{
298
-
299
- background-image: url(images/1x/5event.jpg);
300
-
301
- background-repeat: no-repeat;
302
-
303
- }
304
-
305
- .btn6{
306
-
307
- background-image: url(images/1x/6contact.jpg);
308
-
309
- background-repeat: no-repeat;
310
-
311
- }
312
-
313
- .btn1 a:hover{
314
-
315
- background-image: url(images/1x/21home.jpg);
316
-
317
- background-repeat: no-repeat;
318
-
319
- }
320
-
321
- .btn2 a:hover{
322
-
323
- background-image: url(images/1x/22info.jpg);
324
-
325
- background-repeat: no-repeat;
326
-
327
- }
328
-
329
- .btn3 a:hover{
330
-
331
- background-image: url(images/1x/23animal.jpg);
332
-
333
- background-repeat: no-repeat;
334
-
335
- }
336
-
337
- .btn4 a:hover{
338
-
339
- background-image: url(images/1x/24shop.jpg);
340
-
341
- background-repeat: no-repeat;
342
-
343
- }
344
-
345
- .btn5 a:hover{
346
-
347
- background-image: url(images/1x/25event.jpg);
348
-
349
- background-repeat: no-repeat;
350
-
351
- }
352
-
353
- .btn6 a:hover{
354
-
355
- background-image: url(images/1x/26contact.jpg);
356
-
357
- background-repeat: no-repeat;
358
-
359
- }
360
-
361
-
362
-
363
- nav a{
364
-
365
- height: 100%;
366
-
367
- }
368
-
369
-
370
-
371
-
372
-
373
- /* SP向けの設定 */
374
-
375
- @media screen and (max-width: 720px) {
376
-
377
- .topcopy {
378
-
379
- font-size: 18px;
380
-
381
- }
382
-
383
- nav ul{
384
-
385
- margin: 0 auto;
386
-
387
- }
388
-
389
- }
390
-
391
-
392
-
393
- /* PC向けの設定 */
394
-
395
- @media screen and (min-width: 721px) {
396
-
397
- .topcopy {
398
-
399
- font-size: 26px;
400
-
401
- }
402
-
403
- }
404
-
405
- ```

1

<code>の入力をしました。

2020/10/21 02:32

投稿

kajikajisan
kajikajisan

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```ここに言語を入力
2
+
3
+ コード
4
+
1
- ### 前提・実現したいこと
5
+ ```### 前提・実現したいこと
2
6
 
3
7
 
4
8
 
@@ -18,11 +22,11 @@
18
22
 
19
23
  ### 該当のソースコード
20
24
 
21
-
25
+ ```
22
26
 
23
27
  html
24
28
 
25
- ソースコード
29
+
26
30
 
27
31
  <!doctype html>
28
32
 
@@ -94,9 +98,11 @@
94
98
 
95
99
 
96
100
 
101
+ ```
102
+
97
- css
103
+ ```css
98
-
99
- ソースコード
104
+
105
+
100
106
 
101
107
  @charset "UTF-8";
102
108
 
@@ -395,3 +401,5 @@
395
401
  }
396
402
 
397
403
  }
404
+
405
+ ```