質問編集履歴

2

記入変更

2020/02/18 01:27

投稿

katusi
katusi

スコア12

test CHANGED
@@ -1 +1 @@
1
- スマホのレスポンシブ化で余白が出来るのですが、、
1
+ スマホのレスポンシブ化で余白が出来るのですが、、no.1
test CHANGED
@@ -1,11 +1,637 @@
1
- ```URL
2
-
3
- [既存サイトを模写したもの]
4
-
5
- *コードを貼ると1000文字に収まらなかったのでリンクを貼りました。*
1
+ ```HTML
2
+
3
+ <!DOCTYPE html>
4
+
5
+ <html lang="ja">
6
+
7
+ <head>
8
+
9
+ <meta charset="utf-8">
10
+
11
+ <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2">
12
+
13
+ <link rel="stylesheet" type="text/css" href="practice11.css">
14
+
15
+
16
+
17
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
18
+
19
+ <title>practice11</title>
20
+
21
+ </head>
22
+
23
+
24
+
25
+ <body>
26
+
27
+ <header>
28
+
29
+ <div class="inner">
30
+
31
+ <div class="header-logo"><a href="https://xeory.jp/extension">XeoryExtension</a></div>
32
+
33
+ <div class="menu">
34
+
35
+ <div class="menu1"><a href="https://xeory.jp/extension/sample">記事ページサンプル</a></div>
36
+
37
+ <div class="menu2"><a href="https://xeory.jp/template/xeory-extension/">Extensionをダウンロード</a></div>
38
+
39
+ </div>
40
+
41
+ <div id="page_top"><a href="#"></a></div>
42
+
43
+ </div>
44
+
45
+ </header>
46
+
47
+
48
+
49
+ <div id="section1">
50
+
51
+ <div class="inner">
52
+
53
+ <h1>Xeory Extension</h1>
54
+
55
+ <p>Xeory Extensionはワンコラムのサイト型テーマです。ユーザーに対して重要なコンテン<br>ツを効率的に届けられるようにデザインされています。5種類のカラーバリエーションを
56
+
57
+ <br>用意しています。
58
+
59
+ </p>
60
+
61
+ </div>
62
+
63
+ </div>
64
+
65
+
66
+
67
+ <div id="section2">
68
+
69
+ <div class="inner">
70
+
71
+ <h2 class="section2-ttl"><i class="fas fa-flag"></i>人気のある記事</h2>
72
+
73
+ <div class="flex-box">
74
+
75
+ <ul>
76
+
77
+ <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="num1">NO.1</p>
78
+
79
+ <p class="background-green">カテゴリー#1</p>
80
+
81
+ <p class="test">テスト投稿</p></a>
82
+
83
+ </li>
84
+
85
+ <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="num2">NO.2</p>
86
+
87
+ <p class="background-green">カテゴリー#1</p>
88
+
89
+ <p class="test">テスト投稿</p></a>
90
+
91
+ </li>
92
+
93
+ <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="num3">NO.3</p>
94
+
95
+ <p class="background-green">カテゴリー#1</p>
96
+
97
+ <p class="test">テスト投稿</p></a>
98
+
99
+ </li>
100
+
101
+ <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="num4">NO.4</p>
102
+
103
+ <p class="background-green">カテゴリー#1</p>
104
+
105
+ <p class="test">テスト投稿</p></a>
106
+
107
+ </li>
108
+
109
+ <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="num5">NO.5</p>
110
+
111
+ <p class="background-green">カテゴリー#1</p>
112
+
113
+ <p class="test">テスト投稿</p></a>
114
+
115
+ </li>
116
+
117
+ </ul>
118
+
119
+ </div><!--flex-box-->
120
+
121
+ </div>
122
+
123
+ </div><!--section2-->
124
+
125
+
126
+
127
+ <div id="section3">
128
+
129
+ <div class="inner">
130
+
131
+ <h2 class="section3-ttl"><i class="far fa-clock"></i>最近の投稿</h2>
132
+
133
+ <div class="flex-box">
134
+
135
+ <ul>
136
+
137
+ <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="date">2014<br>10/24</p>
138
+
139
+ <p class="background-green">カテゴリー#1</p>
140
+
141
+ <p class="test">テスト投稿</p></a>
142
+
143
+ </li>
144
+
145
+ <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="date">2014<br>10/24</p>
146
+
147
+ <p class="background-green">カテゴリー#1</p>
148
+
149
+ <p class="test">テスト投稿</p></a>
150
+
151
+ </li>
152
+
153
+ <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="date">2014<br>10/24</p>
154
+
155
+ <p class="background-green">カテゴリー#1</p>
156
+
157
+ <p class="test">テスト投稿</p></a>
158
+
159
+ </li>
160
+
161
+ <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="date">2014<br>10/24</p>
162
+
163
+ <p class="background-green">カテゴリー#1</p>
164
+
165
+ <p class="test">テスト投稿</p></a>
166
+
167
+ </li>
168
+
169
+ <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="date">2014<br>10/24</p>
170
+
171
+ <p class="background-green">カテゴリー#1</p>
172
+
173
+ <p class="test">テスト投稿</p></a>
174
+
175
+ </li>
176
+
177
+ </ul>
178
+
179
+ </div><!--flex-box-->
180
+
181
+ </div>
182
+
183
+ </div><!--section3-->
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+
192
+
193
+ </body>
194
+
195
+
196
+
197
+ </html>
198
+
199
+
6
200
 
7
201
  ```
8
202
 
203
+ ```css
204
+
205
+ .inner {
206
+
207
+ overflow: hidden;
208
+
209
+ max-width: 100%;
210
+
211
+ }
212
+
213
+ body {
214
+
215
+ margin: 0;
216
+
217
+ padding: 0;
218
+
219
+ max-width: 100%;
220
+
221
+ border: 1px solid red;
222
+
223
+ }
224
+
225
+ body a {
226
+
227
+ text-decoration: none;
228
+
229
+ }
230
+
231
+ body ul {
232
+
233
+ list-style: none;
234
+
235
+ }
236
+
237
+
238
+
239
+ header {
240
+
241
+ background-color:rgb(70,179,157,0.9);
242
+
243
+ position: relative;
244
+
245
+ height: 80px;
246
+
247
+ max-width: 100%;
248
+
249
+ margin: 0;
250
+
251
+ }
252
+
253
+ header a {
254
+
255
+ color: white;
256
+
257
+ }
258
+
259
+ /*PAGE TOPボタン追加*/
260
+
261
+ #page_top{
262
+
263
+ width: 50px;
264
+
265
+ height: 50px;
266
+
267
+ position: fixed;
268
+
269
+ right: 0;
270
+
271
+ bottom: 50px;
272
+
273
+ background: #003a75; /*ボタンの色*/
274
+
275
+ opacity: 0.6;
276
+
277
+ border-radius: 50%; /*角の丸み*/
278
+
279
+ z-index: 1005;
280
+
281
+ }
282
+
283
+ #page_top a{
284
+
285
+ position: absolute;
286
+
287
+ display: block;
288
+
289
+ width: 50px;
290
+
291
+ height: 50px;
292
+
293
+ text-decoration: none;
294
+
295
+ }
296
+
297
+ #page_top a::before{
298
+
299
+ font-family: "Font Awesome 5 Free";
300
+
301
+ content: "\f102"; /*アイコン*/
302
+
303
+ font-weight: 900;
304
+
305
+ font-size: 25px;
306
+
307
+ color: #fff; /*アイコンの色*/
308
+
309
+ position: absolute;
310
+
311
+ width: 25px;
312
+
313
+ height: 25px;
314
+
315
+ top: 0;
316
+
317
+ bottom: 0;
318
+
319
+ right: 0;
320
+
321
+ left: 0;
322
+
323
+ margin: auto;
324
+
325
+ text-align: center;
326
+
327
+ }
328
+
329
+
330
+
331
+ .header-logo {
332
+
333
+ position: absolute;
334
+
335
+ font-size: 20px;
336
+
337
+ letter-spacing: 1px;
338
+
339
+ padding: 20px 60px;
340
+
341
+ margin: ;
342
+
343
+ }
344
+
345
+ .header-logo a {
346
+
347
+ font-weight: 100;
348
+
349
+ }
350
+
351
+ .menu {
352
+
353
+ display: table;
354
+
355
+ position: absolute;
356
+
357
+ right: 2rem;
358
+
359
+ font-size: 16px;
360
+
361
+ }
362
+
363
+ .menu1, .menu2 {
364
+
365
+ display: table-cell;
366
+
367
+ padding: 30px 30px;
368
+
369
+ margin: 10px;
370
+
371
+ }
372
+
373
+ .menu a {
374
+
375
+ display: block;
376
+
377
+ }
378
+
379
+ .menu1:hover, .menu2:hover {
380
+
381
+ background-color: #46B39D;
382
+
383
+ opacity: 0.7;
384
+
385
+ }
386
+
387
+ #section1 {
388
+
389
+ background-color: #41B29D;
390
+
391
+ height: 800px;
392
+
393
+ position: relative;
394
+
395
+ max-width: 100%;
396
+
397
+ margin: 0;
398
+
399
+ }
400
+
401
+ #section1 .inner {
402
+
403
+ color: white;
404
+
405
+ position: relative;
406
+
407
+ text-align: center;
408
+
409
+ }
410
+
411
+ #section1 h1 {
412
+
413
+ font-weight: 200;
414
+
415
+ font-size: 45px;
416
+
417
+ margin-top: 250px;
418
+
419
+ }
420
+
421
+ #section2 {
422
+
423
+ position: relative;
424
+
425
+ height: 490px;
426
+
427
+ border-bottom: 1px solid #E5E5E5;
428
+
429
+ background-color: #FBFBFB;
430
+
431
+ max-width: 100%;
432
+
433
+ margin: 0;
434
+
435
+ }
436
+
437
+ .section2-ttl i {
438
+
439
+ font-size: 20px;
440
+
441
+ margin: 10px;
442
+
443
+ }
444
+
445
+ .section2-ttl, .section3-ttl {
446
+
447
+ font-weight: 400;
448
+
449
+ text-align: center;
450
+
451
+ border-top: 1px solid #E5E5E5;
452
+
453
+ border-bottom: 1px solid #E5E5E5;
454
+
455
+ margin-top: 60px;
456
+
457
+ padding-top: 20px;
458
+
459
+ padding-bottom: 20px;
460
+
461
+ background-color: white;
462
+
463
+ max-width: 100%;
464
+
465
+ margin: 0;
466
+
467
+ }
468
+
469
+ .flex-box {
470
+
471
+ display: flex;
472
+
473
+ justify-content: center;
474
+
475
+ background-color: white;
476
+
477
+ max-width: 100%;
478
+
479
+ position: relative;
480
+
481
+ }
482
+
483
+ .flex-box ul {
484
+
485
+ display: flex;
486
+
487
+ max-width: 100%;
488
+
489
+ margin: 50px;
490
+
491
+ position: relative;
492
+
493
+ }
494
+
495
+ .flex-box li {
496
+
497
+ margin: 10px;
498
+
499
+ margin-top: 0;
500
+
501
+ padding: 0;
502
+
503
+ max-width: 100%;
504
+
505
+ }
506
+
507
+ .flex-box img {
508
+
509
+ width: 95%;
510
+
511
+ height: 60%;
512
+
513
+
514
+
515
+ }
516
+
517
+ .num1, .num2, .num3, .num4, .num5, .date {
518
+
519
+ color: white;
520
+
521
+ font-weight: 200;
522
+
523
+ font-size: 14px;
524
+
525
+ width: 40px;
526
+
527
+ position: absolute;
528
+
529
+ padding: 10px 4px 10px 6px;
530
+
531
+ max-width: 100%;
532
+
533
+ top: 0;
534
+
535
+ margin-top: 0;
536
+
537
+ }
538
+
539
+ .num1 {
540
+
541
+ background-color: #E3C779;
542
+
543
+ opacity: 0.9;
544
+
545
+ }
546
+
547
+ .num2 {
548
+
549
+ background-color: #A4ACB0;
550
+
551
+ opacity: 0.8;
552
+
553
+ }
554
+
555
+ .num3 {
556
+
557
+ background-color: #844E37;
558
+
559
+ opacity: 0.8;
560
+
561
+ }
562
+
563
+ .num4 {
564
+
565
+ background-color: #5C432A;
566
+
567
+ opacity: 0.8;
568
+
569
+ }
570
+
571
+ .num5 {
572
+
573
+ background-color: #5E5F4E;
574
+
575
+ opacity: 0.8;
576
+
577
+ }
578
+
579
+ .background-green {
580
+
581
+ background-color: #46B39D;
582
+
583
+ color: white;
584
+
585
+ font-size: 14px;
586
+
587
+ padding: 5px 10px;
588
+
589
+ width: 100px;
590
+
591
+ }
592
+
593
+ .test {
594
+
595
+ color: black;
596
+
597
+ margin: 0;
598
+
599
+ }
600
+
601
+ .test:hover {
602
+
603
+ border-bottom: 1px solid #46B39D;
604
+
605
+ width: 80px;
606
+
607
+ margin: 0;
608
+
609
+ }
610
+
611
+ #section3 {
612
+
613
+ position: relative;
614
+
615
+ margin-top: 0;
616
+
617
+ border-bottom: 1px solid #E5E5E5;
618
+
619
+ height: 480px;
620
+
621
+ }
622
+
623
+ .section3-ttl {
624
+
625
+ margin-top: 40px;
626
+
627
+ }
628
+
629
+
630
+
631
+
632
+
633
+ ```
634
+
9
635
  ### 前提・実現したいこと
10
636
 
11
637
  今現在スマホ用にレスポンシブ対応を行なっているのですが、画面のサイズをpc用から少しでも小さくすると右側に余白ができてしまいます。

1

記入ミス

2020/02/18 01:27

投稿

katusi
katusi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ```URL
2
2
 
3
- [既存サイトを模写したもの](file:///Users/shanyuanyizhi/Downloads/practice11.html#)
3
+ [既存サイトを模写したもの]
4
4
 
5
5
  *コードを貼ると1000文字に収まらなかったのでリンクを貼りました。*
6
6