質問するログイン新規登録

質問編集履歴

2

修正

2020/08/24 05:21

投稿

..o
..o

スコア28

title CHANGED
File without changes
body CHANGED
@@ -303,16 +303,10 @@
303
303
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "HGS明朝E", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "MS 明朝", serif;
304
304
  }
305
305
 
306
- .container {
307
- min-height: 100vh;
308
- height: 100%;
309
- width: 80%;
310
- margin: 6vh 0 100px 20%;
311
- position: relative;
312
- }
313
306
 
314
307
 
315
308
 
309
+
316
310
  div.sidenav {
317
311
  height: 100vh;
318
312
  width: 20%;

1

追加

2020/08/24 05:21

投稿

..o
..o

スコア28

title CHANGED
File without changes
body CHANGED
@@ -20,6 +20,10 @@
20
20
  ### 該当のソースコード
21
21
 
22
22
  ```HTML
23
+ <!DOCTYPE html>
24
+
25
+ <html>
26
+
23
27
  <head>
24
28
  <meta charset="utf-8" name="Officialsite" content="">
25
29
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -34,4 +38,371 @@
34
38
  <script src="script.js"></script>
35
39
 
36
40
  </head>
41
+
42
+ <body>
43
+
44
+ <div class="firstview sp_none" >
45
+ <video class="bg-video" src="img/TOP/topmovie.mp4" poster="img/PROFILE/profile1.jpg" muted autoplay loop playsinline></video>
46
+ </div>
47
+
48
+ <header class="header pc_none">
49
+ <nav class="global-nav">
50
+ <ul class="global-nav__list">
51
+ <li class="global-nav__item"><a href="">メニュー1</a></li>
52
+ <li class="global-nav__item"><a href="">メニュー2</a></li>
53
+ <li class="global-nav__item"><a href="">メニュー3</a></li>
54
+ <li class="global-nav__item"><a href="">メニュー4</a></li>
55
+ <li class="global-nav__item"><a href="">メニュー5</a></li>
56
+ </ul>
57
+ </nav>
58
+
59
+ <div class="hamburger" id="js-hamburger">
60
+ <span class="hamburger__line hamburger__line--1"></span>
61
+ <span class="hamburger__line hamburger__line--2"></span>
62
+ <span class="hamburger__line hamburger__line--3"></span>
63
+ </div>
64
+ <div class="black-bg" id="js-black-bg"></div>
65
+ </header>
66
+
67
+
68
+ <div class="sidenav sp_none">
69
+ <nav sp_none>
70
+ <ul class="sidemenu">
71
+ <li><a href="index.html">HOME<br><span>ホーム</span></a></li>
72
+ <li><a href="profile.html">PROFILE<br><span>プロフィール</span></a></li>
73
+ <li><a href="access.html">ACCESS<br><span>住所</span></a></li>
74
+ <li><a href="courses.html">COURSES<br><span>コース・料金</span></a></li>
75
+ <li><a href="reservation/reservation.html">RESERVATI<br><span>ご予約</span></a></li>
76
+ <li><a href="">CONTACT<br><span>お問い合わせ</span></a></li>
77
+ </ul>
78
+ <h1><a href="index.html"><img src="img/TOP/logo1.jpg" alt="HALUロゴ"></a></h1>
79
+ </nav>
80
+ </div>
81
+
82
+ </body>
83
+ </html>
84
+
37
- ```
85
+ ```
86
+ tb.css
87
+ ```css
88
+ * {
89
+ margin: 0;
90
+ padding: 0;
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ p {
95
+ word-break: break-all;
96
+ }
97
+
98
+ a {
99
+ text-decoration: none;
100
+ }
101
+
102
+ li {
103
+ list-style: none;
104
+ }
105
+
106
+ .pc_none {
107
+ display: block;
108
+ }
109
+
110
+ .sp_none {
111
+ display: none;
112
+ }
113
+
114
+ .clearfix:after {
115
+ content: "";
116
+ display: block;
117
+ clear: both;
118
+ }
119
+
120
+
121
+ .header {
122
+ position: fixed;
123
+ left: 0;
124
+ top: 0;
125
+ width: 100%;
126
+ height: 52px;
127
+ background-color: #fff;
128
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
129
+ }
130
+
131
+ .header_logo{
132
+ padding:1px 0 1px 0;
133
+ width: 100px;
134
+ height: 52px;
135
+ margin: 0 auto;
136
+ }
137
+
138
+ .header_logo a{
139
+ display: block;
140
+ width: 100%;
141
+ }
142
+
143
+ .header_logo img{
144
+ max-width: 100%;
145
+
146
+ }
147
+
148
+
149
+ .global-nav {
150
+ position: fixed;
151
+ right: -40vw;
152
+ /* これで隠れる */
153
+ top: 0;
154
+ width: 40vw;
155
+ /* スマホに収まるくらい */
156
+ height: 100vh;
157
+ padding-top: 40px;
158
+ background-color: #fff;
159
+ transition: all .6s;
160
+ z-index: 200;
161
+ overflow-y: auto;
162
+ /* メニューが多くなったらスクロールできるように */
163
+ }
164
+
165
+ .hamburger {
166
+ position: absolute;
167
+ right: 0;
168
+ top: 0;
169
+ width: 52px;
170
+ /* クリックしやすいようにちゃんと幅を指定する */
171
+ height: 50px;
172
+ /* クリックしやすいようにちゃんと高さを指定する */
173
+ cursor: pointer;
174
+ z-index: 300;
175
+ }
176
+
177
+ .global-nav__list {
178
+ margin: 0;
179
+ padding: 0;
180
+ list-style: none;
181
+ }
182
+
183
+ .global-nav__item {
184
+ text-align: center;
185
+ padding: 0 14px;
186
+ }
187
+
188
+ .global-nav__item a {
189
+ display: block;
190
+ padding: 8px 0;
191
+ border-bottom: 1px solid #eee;
192
+ text-decoration: none;
193
+ color: #111;
194
+ }
195
+
196
+ .global-nav__item a:hover {
197
+ background-color: #eee;
198
+ }
199
+
200
+ .hamburger__line {
201
+ position: absolute;
202
+ left: 11px;
203
+ width: 18px;
204
+ height: 1px;
205
+ background-color: #111;
206
+ transition: all .6s;
207
+ }
208
+
209
+ .hamburger__line--1 {
210
+ top: 18px;
211
+ }
212
+
213
+ .hamburger__line--2 {
214
+ top: 26px;
215
+ }
216
+
217
+ .hamburger__line--3 {
218
+ top: 34px;
219
+ }
220
+
221
+ .black-bg {
222
+ position: fixed;
223
+ left: 0;
224
+ top: 0;
225
+ width: 100vw;
226
+ height: 100vh;
227
+ z-index: 100;
228
+ background-color: #000;
229
+ opacity: 0;
230
+ visibility: hidden;
231
+ transition: all .6s;
232
+ cursor: pointer;
233
+ }
234
+
235
+ /* 表示された時用のCSS */
236
+ .nav-open .global-nav {
237
+ right: 0;
238
+ }
239
+
240
+ .nav-open .black-bg {
241
+ opacity: .8;
242
+ visibility: visible;
243
+ }
244
+
245
+ .nav-open .hamburger__line--1 {
246
+ transform: rotate(45deg);
247
+ top: 20px;
248
+ }
249
+
250
+ .nav-open .hamburger__line--2 {
251
+ width: 0;
252
+ left: 50%;
253
+ }
254
+
255
+ .nav-open .hamburger__line--3 {
256
+ transform: rotate(-45deg);
257
+ top: 20px;
258
+ }
259
+
260
+
261
+
262
+
263
+
264
+
265
+ ```
266
+ style.css
267
+ ```css
268
+ @charset "utf-8";
269
+
270
+ * {
271
+ margin: 0;
272
+ padding: 0;
273
+ box-sizing: border-box;
274
+ }
275
+
276
+ p {
277
+ word-break: break-all;
278
+ }
279
+
280
+ a {
281
+ text-decoration: none;
282
+ }
283
+
284
+ li {
285
+ list-style: none;
286
+ }
287
+
288
+ .pc_none{
289
+ display: none;
290
+ }
291
+
292
+ .clearfix:after {
293
+ content: "";
294
+ display: block;
295
+ clear: both;
296
+ }
297
+
298
+
299
+ /* ホーム */
300
+ html,
301
+ body {
302
+ height: 100%;
303
+ font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "HGS明朝E", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "MS 明朝", serif;
304
+ }
305
+
306
+ .container {
307
+ min-height: 100vh;
308
+ height: 100%;
309
+ width: 80%;
310
+ margin: 6vh 0 100px 20%;
311
+ position: relative;
312
+ }
313
+
314
+
315
+
316
+ div.sidenav {
317
+ height: 100vh;
318
+ width: 20%;
319
+ position: fixed;
320
+ top: 0;
321
+ background-color: #fff;
322
+ overflow: hidden;
323
+ }
324
+
325
+ div.sidenav nav {
326
+ margin-top: 10vh;
327
+ margin-bottom: 6vh;
328
+ height: 84vh;
329
+ padding-right: 10%;
330
+ }
331
+
332
+ div.sidenav ul.sidemenu {
333
+ width: auto;
334
+ float: right;
335
+ overflow: hidden;
336
+
337
+ }
338
+
339
+ div.sidenav ul.sidemenu li {
340
+ list-style: none outside none;
341
+ width: 100%;
342
+ float: left;
343
+ overflow: hidden;
344
+ margin: 0 0 15% 0;
345
+ text-align: right;
346
+ }
347
+
348
+ div.sidenav nav ul.sidemenu li a {
349
+ float: right;
350
+ overflow: hidden;
351
+ text-align: right;
352
+ font-size: 18px;
353
+ font-weight: 400;
354
+ line-height: 2em;
355
+ letter-spacing: 1.5px;
356
+ text-decoration: none;
357
+ color: #343232;
358
+ width: 100%;
359
+ position: relative;
360
+ line-height: 1;
361
+ }
362
+
363
+ div.sidenav nav ul.sidemenu li a::after {
364
+ position: absolute;
365
+ left: 0;
366
+ bottom: 0;
367
+ display: block;
368
+ content: "";
369
+ width: 0%;
370
+ height: 1px;
371
+ background: #404040;
372
+ transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
373
+ }
374
+
375
+ div.sidenav nav ul.sidemenu li a:hover::after {
376
+ width: 100%;
377
+ }
378
+
379
+ div.sidenav nav ul.sidemenu li a:hover {
380
+ color: #746be8;
381
+ }
382
+
383
+ div.sidenav nav ul.sidemenu li a span {
384
+ font-size: 13px;
385
+ }
386
+
387
+
388
+ div.sidenav h1 {
389
+ display: block;
390
+ width: 150px;
391
+ float: right;
392
+ }
393
+
394
+ div.sidenav h1 a {
395
+ display: block;
396
+ }
397
+
398
+ div.sidenav h1 a img {
399
+ width: 100%;
400
+ }
401
+
402
+
403
+ ```
404
+
405
+ 諸事情によりどこまで載せていいのかわからないので最低限にしています..
406
+ .sp_none
407
+ .pc_none
408
+ が効かないことにまず困っています。