質問編集履歴

2

760px以下でのみ使用します

2021/11/26 00:16

投稿

hati3693
hati3693

スコア24

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  なにとぞご教示いただければと思います。
4
4
 
5
+ (スマホのサイズでのみ使います)
6
+
5
7
  ### 前提・実現したいこと
6
8
 
7
9
 

1

CSSを追記しました。装飾等省いていますが右上の三を押すと上に戻ってしまうという挙動を確認しております。引き続きよろしくお願いします

2021/11/26 00:16

投稿

hati3693
hati3693

スコア24

test CHANGED
File without changes
test CHANGED
@@ -128,6 +128,98 @@
128
128
 
129
129
  ```
130
130
 
131
+
132
+
133
+ ```
134
+
135
+ #header_logo {
136
+
137
+ max-width: initial;
138
+
139
+ position: fixed;
140
+
141
+ height: 65px;
142
+
143
+ width: 100%;
144
+
145
+ background: #bdbdbd;
146
+
147
+ z-index: 9999;
148
+
149
+ }
150
+
151
+ .menu {
152
+
153
+ height: 20px;
154
+
155
+ position: absolute;
156
+
157
+ right: 2rem;
158
+
159
+ width: 30px;
160
+
161
+ top: 50%;
162
+
163
+ transform: translate(0, -50%);
164
+
165
+ }
166
+
167
+ .menu__line {
168
+
169
+ background: #000000;
170
+
171
+ display: block;
172
+
173
+ height: 4px;
174
+
175
+ position: absolute;
176
+
177
+ width: 25px;
178
+
179
+ }
180
+
181
+ .menu__line--center {
182
+
183
+ top: 8px;
184
+
185
+ }
186
+
187
+ .menu__line--bottom {
188
+
189
+ bottom: 0;
190
+
191
+ }
192
+
193
+ .closemenu {
194
+
195
+ bottom: 6%;
196
+
197
+ width: 50%;
198
+
199
+ position: fixed;
200
+
201
+ }
202
+
203
+ @media screen and (max-width: 760px){
204
+
205
+ .sp {
206
+
207
+ display: block !important;
208
+
209
+ transition: all 0.5s ease;
210
+
211
+ opacity: 1;
212
+
213
+ animation-duration: 0.5s;
214
+
215
+ animation-name: fade-in;
216
+
217
+ }
218
+
219
+ }
220
+
221
+ ```
222
+
131
223
  ### 試したこと
132
224
 
133
225