質問編集履歴

3

訂正

2022/06/10 02:53

投稿

kamakura85
kamakura85

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-09/ebcbf886-1c76-4592-84da-1eb7c7cb621b.jpeg)drawer.jsでハンバーガーメニューを作成したのですが、PCの検証ツールでは上手く表示されるのですが、スマホ実機ですと初めから本来メニューアイコンを押した際に開くべき画面が最初からズレて表示されます(上部が隠れた状態)。
1
+ drawer.jsでハンバーガーメニューを作成したのですが、PCの検証ツールでは上手く表示されるのですが、スマホ実機ですと初めから本来メニューアイコンを押した際に開くべき画面が最初からズレて表示されます(上部が隠れた状態)。
2
2
  色々と試してみましたが、どの方法でも上手くいかずアドバイス頂けましたらと思います。
3
3
  宜しくお願い致します。
4
4
 
@@ -12,7 +12,7 @@
12
12
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
13
13
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
14
  <title>hlaada</title>
15
- <meta name="description" content="リラクゼーションスペースhlaada(フラーダ)|福島県いわき市常磐(湯本)の整体・足ツボ・リンパドレナージュ・男性可サロン">
15
+ <meta name="description" content="">
16
16
  <link rel="shortcut icon" href="/favicon.ico">
17
17
 
18
18
  <!-- reset css -->

2

写真追加

2022/06/09 10:19

投稿

kamakura85
kamakura85

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- drawer.jsでハンバーガーメニューを作成したのですが、PCの検証ツールでは上手く表示されるのですが、スマホ実機ですと初めから本来メニューアイコンを押した際に開くべき画面が最初からズレて表示されます(上部が隠れた状態)。
1
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-09/ebcbf886-1c76-4592-84da-1eb7c7cb621b.jpeg)drawer.jsでハンバーガーメニューを作成したのですが、PCの検証ツールでは上手く表示されるのですが、スマホ実機ですと初めから本来メニューアイコンを押した際に開くべき画面が最初からズレて表示されます(上部が隠れた状態)。
2
2
  色々と試してみましたが、どの方法でも上手くいかずアドバイス頂けましたらと思います。
3
3
  宜しくお願い致します。
4
4
 

1

コード追加

2022/06/09 10:18

投稿

kamakura85
kamakura85

スコア13

test CHANGED
File without changes
test CHANGED
@@ -4,11 +4,47 @@
4
4
 
5
5
 
6
6
  ```HTML
7
+ <!DOCTYPE html>
8
+ <html lang="ja">
9
+
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
+ <title>hlaada</title>
15
+ <meta name="description" content="リラクゼーションスペースhlaada(フラーダ)|福島県いわき市常磐(湯本)の整体・足ツボ・リンパドレナージュ・男性可サロン">
16
+ <link rel="shortcut icon" href="/favicon.ico">
17
+
18
+ <!-- reset css -->
19
+ <link rel="stylesheet" href="./css/reset.css">
20
+
21
+ <!-- font awesome -->
22
+ <script src="https://kit.fontawesome.com/a8d5486348.js" crossorigin="anonymous"></script>
23
+
24
+ <!-- drawer.css -->
25
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
26
+ media="screen and (max-width: 767px">
27
+ <!-- jquery & iScroll -->
28
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
29
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
30
+ <!-- drawer.js -->
31
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
32
+
33
+ <!-- wow -->
34
+ <script src="./js/wow.min.js"></script>
35
+ <link rel="stylesheet" href="./css/animate.css">
36
+
37
+ <!-- original -->
38
+ <link rel="stylesheet" href="./css/style.css">
39
+ <script src="./js/script.js"></script>
40
+
41
+ </head>
42
+
7
43
  <body class=" drawer drawer--right">
8
44
 
9
45
  <header id="js-header" class="header">
10
46
  <div class="header-inner inner">
11
- <h1 class="header-logo"><a href=""><img src="./img/mainlogo.png" alt=""></a></h1>
47
+ <h1 class="header-logo"><a href=""><img src="./img/mainlogo.png" alt="hlaada"></a></h1>
12
48
  <button type="button" class="drawer-toggle drawer-hamburger">
13
49
  <span class="sr-only">toggle navigation</span>
14
50
  <span class="drawer-hamburger-icon"></span>
@@ -25,9 +61,150 @@
25
61
  </div>
26
62
  </header>
27
63
 
64
+ <main class="main">
65
+ <div class="top inner">
66
+ <div class="top-picture"></div>
67
+ <div class="top-message">
68
+ <p class="top-message-title">タイトルタイトル<br class="is-pc">タイトルタイトル</p>
69
+ <p class="top-message-text">リードリードリードリードリードリード<br>リードリードリードリードリードリード</p>
70
+ </div>
71
+ </div>
28
72
  ```
29
73
 
30
- ```CSS
74
+ ```SCSS
75
+ @charset "utf-8";
76
+
77
+ /* =========================================================================================
78
+ # mixins
79
+ ========================================================================================== */
80
+ $breakpoints: (
81
+ //キー : 値
82
+ 'sm': "(max-width: 767px)",
83
+ 'md': "(min-width: 768px)",
84
+ ) !default;
85
+
86
+ // メディアクエリ
87
+ @mixin mq($breakpoint: md) {
88
+ @media #{map-get($breakpoints, $breakpoint)} {
89
+ @content;
90
+ }
91
+ }
92
+
93
+ /* =========================================================================================
94
+ # colors
95
+ ========================================================================================== */
96
+ $primary-color: #663300;
97
+ $font-color: #333;
98
+
99
+ /* =========================================================================================
100
+ # common - 全体に共通するスタイル
101
+ ========================================================================================== */
102
+ @include mq('sm') {
103
+ .is-pc {
104
+ display: none;
105
+ }
106
+ }
107
+
108
+ @include mq('md') {
109
+ .is-sp {
110
+ display: none;
111
+ }
112
+ }
113
+
114
+ body {
115
+ font-size: 14px;
116
+ color: $font-color;
117
+ font-family: "ヒラギノ明朝 ProN",
118
+ serif;
119
+ line-height: 1.6875;
120
+ }
121
+
122
+ img {
123
+ width: 100%;
124
+ }
125
+
126
+ .inner {
127
+ max-width: 1200px;
128
+ margin: 0 auto;
129
+ padding: 0 40px;
130
+ box-sizing: content-box;
131
+
132
+ @include mq('sm') {
133
+ padding: 0 15px;
134
+ }
135
+ }
136
+
137
+ // main
138
+ // =================================================
139
+ // common
140
+ // -------------------------------------------------
141
+ .main {
142
+ padding-top: 65px;
143
+
144
+ @include mq('sm') {
145
+ padding-top: 55px;
146
+ }
147
+ }
148
+
149
+ .section {
150
+ margin-top: 160px;
151
+
152
+ @include mq('sm') {
153
+ margin-top: 96px;
154
+ }
155
+ }
156
+
157
+ // util
158
+ // -------------------------------------------------
159
+ .util-title {
160
+ font-size: 22px;
161
+ // font-weight: bold;
162
+ text-align: center;
163
+ line-height: 1; //----line-heightで上のマージンが変わってしまうことを防ぐ
164
+
165
+ @include mq('sm') {
166
+ font-size: 22px;
167
+ }
168
+
169
+ &::after {
170
+ content: "";
171
+ display: block;
172
+ height: 1px;
173
+ width: 60px;
174
+ background: $primary-color;
175
+ margin: 16px auto 0;
176
+ }
177
+ }
178
+
179
+ .util-link {
180
+ font-size: 14px;
181
+ letter-spacing: .1em;
182
+ color: $primary-color;
183
+ border: 1px solid $primary-color;
184
+ background: #fff;
185
+ display: inline-block;
186
+ padding: 10px 54px;
187
+ transition: background-color .4s,
188
+ color .4s;
189
+
190
+ &.-active {
191
+ background: $primary-color;
192
+ color: #fff;
193
+ }
194
+
195
+ @include mq('md') {
196
+ &:not(.-submit) {
197
+ &:hover {
198
+ background: $primary-color;
199
+ color: #fff;
200
+ }
201
+ }
202
+ }
203
+ }
204
+
205
+
206
+
207
+ // header----------------------------------------------------------------------
31
208
  .header {
32
209
  background: #fff;
33
210
  position: fixed;
@@ -58,16 +235,6 @@
58
235
  }
59
236
  }
60
237
 
61
- .drawer-nav {
62
-
63
- @include mq('sm') {
64
- display: none;
65
-
66
- &.is-open {
67
- display: block;
68
- }
69
- }
70
- }
71
238
 
72
239
 
73
240
  .header-inner {
@@ -114,7 +281,7 @@
114
281
  color: $font-color;
115
282
  height: 70px;
116
283
  line-height: 70px;
117
- letter-spacing: .1em;
284
+ letter-spacing: .1em; //-----16px / AV1.6 = 0.1文字分
118
285
 
119
286
  @include mq('sm') {
120
287
  color: #fff;
@@ -133,4 +300,79 @@
133
300
  }
134
301
  }
135
302
  }
303
+
304
+
305
+ // top
306
+ // -------------------------------------------------
307
+ .top {
308
+ position: relative;
309
+ }
310
+
311
+ .top-picture {
312
+ @include mq('md') {
313
+ padding-top: 55%; //-----h660px / w1200pxでブラウザ幅に合わせて画像のアスペクト比を維持したまま拡大縮小
314
+ background: url(../img/top.jpg) no-repeat top right / 82.5%; //-----990px / 1200px
315
+ }
316
+
317
+ @include mq('sm') {
318
+ padding-top: 120%; //-----h414px / w345px
319
+ background: url(../img/top.jpg) no-repeat center center / cover
320
+ }
321
+ }
322
+
323
+ .top-message {
324
+ @include mq('md') {
325
+ position: absolute;
326
+ top: 50%;
327
+ transform: translateY(-50%
328
+ );
329
+ left: 0;
330
+ background: #fff;
331
+ padding: 82px 44px 90px 40px;
332
+ }
333
+
334
+ @include mq('sm') {
335
+ margin-top: 31px;
336
+ }
337
+ }
338
+
339
+ .top-message-title {
340
+ font-size: 26px;
341
+ font-weight: bold;
342
+ }
343
+
344
+ .top-message-text {
345
+ margin-top: 18px;
346
+ }
136
347
  ```
348
+
349
+ ```JQuery
350
+
351
+ $(function() {
352
+ // drawer
353
+ $('.drawer').drawer();
354
+
355
+
356
+ // smoothscroll
357
+ $('a[href^="#"]').on('click', function(){
358
+
359
+ var header = $('.header').innerHeight();
360
+ var id = $(this).attr("href");
361
+ var position = 0;
362
+ if ( id != '#') {
363
+ position = $(id).offset().top - header;
364
+ }
365
+ $("html, body").animate({
366
+ scrollTop: position
367
+ },
368
+ 300);
369
+ });
370
+
371
+
372
+ // wow
373
+ new WOW().init();
374
+
375
+ });
376
+ ```
377
+
378
+