質問編集履歴

1

アンカーリンクの情報が抜けていたので追記&ローディング画面のcssも一応載せておきます。

2019/07/23 13:08

投稿

doyadoya213
doyadoya213

スコア23

test CHANGED
File without changes
test CHANGED
@@ -20,11 +20,123 @@
20
20
 
21
21
  ```HTML
22
22
 
23
+ <!-- ページの一番上に移動するためのアンカーリンク -->
24
+
25
+ <p id="scroll-up" style="display: block; opacity: 1;">
26
+
27
+ <a href="#"></a>
28
+
29
+ </p>
30
+
31
+     <!-- ローディング画面 -->
32
+
23
33
  <div id="preloader">
24
34
 
25
35
  <div class="spinner"></div>
26
36
 
27
37
  </div>
38
+
39
+ ```
40
+
41
+
42
+
43
+ ```CSS
44
+
45
+ #preloader {
46
+
47
+ background: #14355d;
48
+
49
+ position: fixed;
50
+
51
+ top: 0;
52
+
53
+ right: 0;
54
+
55
+ bottom: 0;
56
+
57
+ left: 0;
58
+
59
+ z-index: 99998;
60
+
61
+ display: block;
62
+
63
+ }
64
+
65
+
66
+
67
+ .spinner {
68
+
69
+ width: 60px;
70
+
71
+ height: 60px;
72
+
73
+ margin: auto;
74
+
75
+ position: absolute;
76
+
77
+ top: 0;
78
+
79
+ left: 0;
80
+
81
+ bottom: 0;
82
+
83
+ right: 0;
84
+
85
+ -webkit-border-radius: 100%;
86
+
87
+ -moz-border-radius: 100%;
88
+
89
+ border-radius: 100%;
90
+
91
+ text-indent: -9999px;
92
+
93
+ border-top: 2px solid #df1843;
94
+
95
+ border-right: 2px solid #8a9297;
96
+
97
+ border-bottom: 2px solid #8a9297;
98
+
99
+ border-left: 2px solid #8a9297;
100
+
101
+ -webkit-transform: translateZ(0);
102
+
103
+ -moz-transform: translateZ(0);
104
+
105
+ -o-transform: translateZ(0);
106
+
107
+ -ms-transform: translateZ(0);
108
+
109
+ transform: translateZ(0);
110
+
111
+ -webkit-animation: spin .5s linear infinite;
112
+
113
+ -moz-animation: spin .5s linear infinite;
114
+
115
+ -ms-zoom-animation: spin .5s linear infinite;
116
+
117
+ -o-animation: spin .5s linear infinite;
118
+
119
+ animation: spin .5s linear infinite;
120
+
121
+ }
122
+
123
+
124
+
125
+ @keyframes spin {
126
+
127
+ 0% {
128
+
129
+ transform: rotate(0);
130
+
131
+ }
132
+
133
+
134
+
135
+ 100% {
136
+
137
+ transform: rotate(360deg);
138
+
139
+ }
28
140
 
29
141
  ```
30
142