質問編集履歴

1

コードを追加するのを忘れていたので追加しました

2021/01/01 10:21

投稿

kidaer
kidaer

スコア31

test CHANGED
File without changes
test CHANGED
@@ -21,3 +21,421 @@
21
21
  何か使い方が間違っているのでしょうか?
22
22
 
23
23
  ぜひアドバイスをお願い致します。
24
+
25
+
26
+
27
+ ```HTML
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html>
32
+
33
+ <head>
34
+
35
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
36
+
37
+ <link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/portforo/araiguma.css">
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+ <div class="hed">
44
+
45
+ <div class="nakamozi">あらいぐまはかわいい</div>
46
+
47
+ </div>
48
+
49
+ <div class="center">
50
+
51
+ <div class="mozi1">哺乳綱食肉目アライグマ科アライグマ属に分類され る哺乳類です。<br />英語でProcyon lotorと書きます。</div>
52
+
53
+ <div><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma.jpg" class="gazou1_1" /></div>
54
+
55
+ <div class="mozi2">食べ物をあらう器用な動物として有名なあらいぐま 。<br />その実態とは!?</div>
56
+
57
+ <div class="position1"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou1" />
58
+
59
+ <div class="mozi3 balloon1-left">あらいぐまは狂暴!?</div>
60
+
61
+ </div>
62
+
63
+ @media screen and (min-width:1024px) {
64
+
65
+ <div>
66
+
67
+ <div class="position2">
68
+
69
+ <div class="mozi4">一見かわいいあらいぐま。<br />しかし、その本性は野生 そのものです。<br /><br /><br />その内容は「ぜったいに飼ってはい けない<br />アライグマ(さとう まきこ著)」<br />でも描か れています。</div>
70
+
71
+ <div class="amazon1"><iframe width="300" height="150" style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&amp;t=amazon03c2-22&amp;m=amazon&amp;o=9&amp;p=8&amp;l=as1&amp;IS1=1&amp;detail=1&amp;asins=4652071817&amp;linkId=ad343fa98e31f40d240316f233f0b6a8&amp;bc1=ffffff&amp;lt1=_top&amp;fc1=333333&amp;lc1=0066c0&amp;bg1=ffffff&amp;f=ifr">
72
+
73
+ </iframe></div>
74
+
75
+ </div>
76
+
77
+ } {
78
+
79
+ <div class="media" media="screen and (max-width:480px) and (max-width:1024px)">一見かわいいあらいぐま。<br />しかし、その本性は野生 そのものです。<br /><br /><br />その内容は「ぜったいに飼ってはい けない<br />アライグマ(さとう まきこ著)」<br />でも描か れています。</div>
80
+
81
+ <div class="amazon1"><iframe width="300" height="150" style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&amp;t=amazon03c2-22&amp;m=amazon&amp;o=9&amp;p=8&amp;l=as1&amp;IS1=1&amp;detail=1&amp;asins=4652071817&amp;linkId=ad343fa98e31f40d240316f233f0b6a8&amp;bc1=ffffff&amp;lt1=_top&amp;fc1=333333&amp;lc1=0066c0&amp;bg1=ffffff&amp;f=ifr">
82
+
83
+ </iframe>
84
+
85
+ <div class="mozi5">手が器用なので戸棚や引き出しを簡単に開けてしま います。<br />鋭い爪や牙で流血沙汰が日常茶飯事。<br /><br />人に 慣れる動物ではないため、ペットには向かないよう です。<br /><br />また、現在は特定外来生物に指定されている ため、飼育すると法律違反になります。 <br />野生のあらいぐまは多くの病気を媒介しているので 、<br />見かけたら触ろうとはせず逃げましょう。</div>
86
+
87
+ <div class="position3"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou2" />
88
+
89
+ <div class="mozi6 balloon1-left">でもあらいぐまはかわいい!</div>
90
+
91
+ </div>
92
+
93
+ <div class="youtube1"><iframe width="560" height="315" src="https://www.youtube.com/embed/P7VVIbmvA3U" frameborder="0" allow="accelerometer; autoplay;
94
+
95
+ clipboard-write; encrypted-media; gyroscope;
96
+
97
+ picture-in-picture" allowfullscreen="allowfullscreen"></iframe></div>
98
+
99
+ <div class="mozi7">わたあめを洗ってしまったあらいぐま</div>
100
+
101
+ <div class="mozi8">アライグマの四つの魅力</div>
102
+
103
+ <div class="position4">
104
+
105
+ <div class="sikaku">かわいい</div>
106
+
107
+ <div class="sikaku Fontsize">よく 食べ、よく遊び、よく眠る</div>
108
+
109
+ </div>
110
+
111
+ <div class="position4">
112
+
113
+ <div class="sikaku Fontsize2">なんでも食べる(雑食)</div>
114
+
115
+ <div class="sikaku Fontsize2">ラスカルで有名</div>
116
+
117
+ </div>
118
+
119
+ <img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma2.jpg" class="gazou3" />
120
+
121
+ <div class="mozi9">「九十九島動植物園 森きらら」では、<br />餌をもらうた めに手をあげてアピールするあらいぐまが有名。 <br /><br />ぜひとも一度見に行きたい。</div>
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+ </div>
128
+
129
+ </body>
130
+
131
+ </html>
132
+
133
+ ```
134
+
135
+ ```CSS
136
+
137
+ .media {
138
+
139
+ font-size:2vw;
140
+
141
+ }
142
+
143
+ .hukidasi {
144
+
145
+ height:6vw;
146
+
147
+ }
148
+
149
+ .hed {
150
+
151
+ position: absolute;
152
+
153
+ position: fixed;
154
+
155
+ z-index:10;
156
+
157
+ background: black;
158
+
159
+ width:100vw;
160
+
161
+ height:7vw;
162
+
163
+ top: 0;
164
+
165
+ left:0;
166
+
167
+ color:white;
168
+
169
+ }
170
+
171
+ .nakamozi {
172
+
173
+ text-align: center;
174
+
175
+ left:50vw;
176
+
177
+ font-size:3vw;
178
+
179
+ }
180
+
181
+ .center {
182
+
183
+ margin-top:100px;
184
+
185
+ text-align: center;
186
+
187
+ }
188
+
189
+ .mozi1 {
190
+
191
+ margin-bottom:15px;
192
+
193
+ font-size:2vw;
194
+
195
+ }
196
+
197
+
198
+
199
+ .gazou1_1 {
200
+
201
+ width:auto;
202
+
203
+ height:auto;
204
+
205
+ }
206
+
207
+ .mozi2 {
208
+
209
+ margin-top:50px;
210
+
211
+ margin-bottom:20px;
212
+
213
+ font-size:2vw;}
214
+
215
+
216
+
217
+ .position1 {
218
+
219
+ display: flex;
220
+
221
+ }
222
+
223
+ .gazou1{
224
+
225
+ width: 150px; /* 横幅を割合で指定 */
226
+
227
+ height: 150px; /* 高さは自動指定 */
228
+
229
+ padding-left:15vw;
230
+
231
+ padding-top:15px;
232
+
233
+ }
234
+
235
+ .mozi3 {
236
+
237
+ font-size: 5vw;
238
+
239
+ font-weight:bold;
240
+
241
+ padding-top:10px;
242
+
243
+ }
244
+
245
+ .balloon1-left {
246
+
247
+ position: relative;
248
+
249
+ display: inline-block;
250
+
251
+ padding: 4vw 2vw;
252
+
253
+ min-width:1vw;
254
+
255
+ max-width: 100%;
256
+
257
+ background: #adff2f;
258
+
259
+ }
260
+
261
+
262
+
263
+ .balloon1-left:before {
264
+
265
+ content: "";
266
+
267
+ position: absolute;
268
+
269
+ top: 50%;
270
+
271
+ left: -30px;
272
+
273
+ margin-top: -15px;
274
+
275
+ border: 15px solid transparent;
276
+
277
+ border-right: 15px solid #adff2f;
278
+
279
+ }
280
+
281
+
282
+
283
+ .balloon1-left p {
284
+
285
+ margin: 0;
286
+
287
+ padding: 0;
288
+
289
+ border-radius: 10px;
290
+
291
+ }
292
+
293
+ .position2 {
294
+
295
+ display: flex;
296
+
297
+ padding-left:23vw;
298
+
299
+ text-align: left;
300
+
301
+ margin-top:30px;
302
+
303
+ }
304
+
305
+ .mozi4 {
306
+
307
+ font-size:2vw;
308
+
309
+ padding-bottom:50px;
310
+
311
+ padding-top:30px;
312
+
313
+ }
314
+
315
+
316
+
317
+ .mozi5 {padding-top:30px;
318
+
319
+ font-size:2vw;}
320
+
321
+ .position3 {
322
+
323
+ display: flex;
324
+
325
+ padding-left:12vw;
326
+
327
+ text-align: left;
328
+
329
+ margin-top:30px;
330
+
331
+ }
332
+
333
+ .gazou2{
334
+
335
+ width: 150px; /* 横幅を割合で指定 */
336
+
337
+ height: 150px; /* 高さは自動指定 */
338
+
339
+ padding-top:15px;
340
+
341
+ }
342
+
343
+ .mozi6 {
344
+
345
+
346
+
347
+ font-size: 50px;
348
+
349
+ font-weight:bold;
350
+
351
+ }
352
+
353
+
354
+
355
+ .youtube1 {padding-top:30px;}
356
+
357
+ .mozi7 {
358
+
359
+ font-size:2vw;
360
+
361
+ }
362
+
363
+ .mozi8 {
364
+
365
+ margin-left:17vw;
366
+
367
+ width:60vw;
368
+
369
+ height:7vw;
370
+
371
+ background:gold;
372
+
373
+ border-radius:30px;
374
+
375
+ padding: 0vw 2vw;
376
+
377
+ font-size:5vw;
378
+
379
+ margin-top:30px;
380
+
381
+ }
382
+
383
+ .sikaku {
384
+
385
+ width:30vw;
386
+
387
+ height:7vw;
388
+
389
+ background:skyblue;
390
+
391
+ border-radius:30px;
392
+
393
+ padding: 0vw 2vw;
394
+
395
+ font-size:5vw;
396
+
397
+ margin-top:30px;
398
+
399
+ }
400
+
401
+ .position4 {
402
+
403
+ display: flex;
404
+
405
+ margin-left: 15vw;
406
+
407
+ }
408
+
409
+ .Fontsize {
410
+
411
+ font-size:2.5vw;
412
+
413
+
414
+
415
+ }
416
+
417
+ .Fontsize2 {
418
+
419
+ font-size:2.5vw;
420
+
421
+ padding-top:2.5vw;
422
+
423
+ }
424
+
425
+
426
+
427
+ .gazou3 {
428
+
429
+ margin-top:30px;
430
+
431
+ margin-bottom:30px;
432
+
433
+ }
434
+
435
+ .mozi9 {
436
+
437
+ font-size:2vw;
438
+
439
+ }
440
+
441
+ ```