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

質問編集履歴

5

参考画像追加

2016/05/18 05:45

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,8 @@
4
4
  現在フューチャーショップというモール内にてサイトを運営しております。
5
5
  そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
6
6
 
7
+ ![イメージ説明](52ed429b0b7945928d62d42589acffc3.jpeg)
8
+
7
9
  ↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
8
10
  ![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
9
11
 

4

タグ修正

2016/05/18 05:45

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
File without changes

3

誤字修正

2016/05/18 04:36

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- ヘッダー背景色の上に四つのアイコンをバランスよく配置したい
1
+ スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい
body CHANGED
File without changes

2

説明の変更と補足

2016/05/18 04:23

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- スマトフォン用サドスライドメニュー閉じときに一瞬読み込みがある現象
1
+ つヘッダ背景色の上に、四つのアコンバランスよく配置し
body CHANGED
@@ -4,7 +4,12 @@
4
4
  現在フューチャーショップというモール内にてサイトを運営しております。
5
5
  そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
6
6
 
7
+ ↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
8
+ ![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
9
+
10
+
11
+ ↓現在のデザイン
7
- HTMLML
12
+ HTML
8
13
  ```ここに言語を入力
9
14
  <!-- サイドメニュー中身 -->
10
15
 
@@ -360,19 +365,10 @@
360
365
  }
361
366
 
362
367
  ```
363
- 毎回ではなく、たまになので、単純に読み込みが遅いだけなのかもと迷う感じなのですが…。
364
368
 
365
- これ防ぐよなJSやCSSなど指定はありませんしょうか?
369
+ ※メニュー内包しているヘッダー部分に、(HTMLでいと最後部分す)
370
+ 三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
366
371
 
367
- <meta name="viewport" content="width=device-width, initial-scale=1">
368
- のタグは貼っており、スマートフォン用に表示するよう指定してはいるのですが…。
369
-
370
- ※少し気になっているのが、サイドメニューよりもメニューを内包しているヘッダー部分で、(HTMLでいうと最後の部分です)
371
- 三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。
372
- 書き方があまりスマートじゃないのかなと思っています。
372
+ このヘッダーの作り方があまりスマートじゃないのかなと思っています。
373
373
  ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
374
- 私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
374
+ 私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
375
-
376
- ↓したいヘッダーのならべかた
377
-
378
- 〔左:ハンバーガーアイコン〕〔真ん中:ブランドロゴ〕〔右1カート〕〔右2お気に入りに入れるマーク〕

1

詳しくしました

2016/05/18 04:19

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,362 @@
4
4
  現在フューチャーショップというモール内にてサイトを運営しております。
5
5
  そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
6
6
 
7
+ HTMLML
8
+ ```ここに言語を入力
9
+ <!-- サイドメニュー中身 -->
10
+
11
+ <div class="slidemenu slidemenu-left">
12
+ <div class="slidemenu-body">
13
+
14
+ <ul class="slidemenu-content">
15
+
16
+ <li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
17
+
18
+ <li class="menu-item3"><a class="menu-item" href="">
19
+ <font color="#333333">&#062;会員登録</font></a></li>
20
+
21
+ <li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>
22
+ <li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>
23
+ <li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
24
+
25
+ <li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>
26
+
27
+ <li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
28
+
29
+ <ul>
30
+ <li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
31
+ <li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
32
+ </ul>
33
+ </li>
34
+
35
+ <li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
36
+ <ul>
37
+ <li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
38
+ <li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
39
+ <li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
40
+ </ul>
41
+
42
+ </div>
43
+ </div>
44
+
45
+
46
+ <!-- ヘッダー看板 -->
47
+
48
+ <header id="header">
49
+ <span class="button menu-button-left">
50
+ </span>
51
+
52
+ <div class="slidemenu_header_right2">
53
+ <a href=""><img src=""width="100%"></a>
54
+ </div>
55
+
56
+ <div class="slidemenu_header_left">
57
+ <img src="" width="100%">
58
+ </div>
59
+
60
+ <div class="slidemenu_header_center">
61
+ <a href=""><img src="" width="100%"></a></div>
62
+
63
+ <div class="slidemenu_header_right">
64
+ <a href=""><img src="" width="100%"></a>
65
+
66
+ </div>
67
+
68
+ </header>
69
+
70
+ <div class="header_box2"></div>
71
+ ```
72
+
73
+ css
74
+
75
+ ```ここに言語を入力
76
+ @charset "Shift_JIS";
77
+ body, div, span, p, blockquote, code,
78
+ del, dfn, em, img, ins, kbd, q, samp,
79
+ small, strong, sub,
80
+ b, i, ol, ul, li,
81
+ footer, header, hgroup, menu, nav, section, summary,
82
+ time, audio, video {
83
+ margin: 0;
84
+ padding: 0;
85
+ border: 0;
86
+ outline: 0;
87
+ }
88
+
89
+ #slidemenu-body {
90
+ line-height: 1;
91
+ font-size: 14px;
92
+ font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
93
+ color: #3a3a3a;
94
+ width: 100%;
95
+ min-width: 320px;
96
+ -webkit-text-size-adjust: none;
97
+ background: #fff;
98
+ }
99
+
100
+ nav ul {
101
+ list-style:none;
102
+ }
103
+
104
+ /*header*/
105
+ #header {
106
+ background: #f2bbbe;
107
+ overflow:hidden;
108
+ border-bottom: 0px;
109
+ width: 100%;
110
+ margin: 0px 0px 0px 0px;
111
+ position: fixed;
112
+ z-index: 1;
113
+ top:0; /* Required!! */
114
+ }
115
+
116
+
117
+
118
+ .slidehed_box {
119
+ background: #ffffff;
120
+ border-bottom: 0px;
121
+ width: 100%;
122
+ height: 70px;
123
+ position: relative;
124
+
125
+ }
126
+
127
+ .slidemenu_header_left {
128
+ background: #f2bbbe;
129
+ border-bottom: 0px;
130
+ text-align: left;
131
+ width: 33%;
132
+ float:left;
133
+ }
134
+
135
+ .slidemenu_header_center {
136
+ background: #f2bbbe;
137
+ border-bottom: 0px;
138
+ text-align: center;
139
+ width: 33%;
140
+ float:left;
141
+ }
142
+
143
+ .slidemenu_header_right {
144
+ background: #f2bbbe;
145
+ border-bottom: 0px;
146
+ width: 33%;
147
+ float:left;
148
+ }
149
+
150
+ .slidemenu_header_right2 {
151
+ border-bottom: 0px;
152
+ position: absolute;
153
+ width: 17%;
154
+ right: 0;
155
+ top: 0;
156
+ }
157
+
158
+
159
+ .button {
160
+ width: 130px;
161
+ height: 70px;
162
+ position: absolute;
163
+ display: block;
164
+ background-repeat: no-repeat;
165
+ background-position: left top;
166
+ }
167
+
168
+
169
+ .menu-button-left {
170
+ left: 0px;
171
+ border-right: 0px
172
+ }
173
+
174
+
175
+ /*slidemenu*/
176
+ .slidemenu {
177
+ background-color: #595757;
178
+ }
179
+ .slidemenu li {
180
+ list-style: none;
181
+ border-top: 1px solid #cccccc;
182
+ border-bottom: 1px solid #cccccc;
183
+ border-right: 1px solid #cccccc;
184
+ font-size:14px;
185
+ line-height: 1.8;
186
+ }
187
+ .slidemenu li a {
188
+ padding:10px 0 10px 20px;
189
+ display: block;
190
+ text-decoration: none;
191
+ color: #fff;
192
+ }
193
+ .slidemenu li:first-child {
194
+ border-top: none;
195
+ }
196
+ .slidemenu li:last-child {
197
+ border-bottom: none;
198
+ }
199
+ .slidemenu .slidemenu-header {
200
+ height: 80px;
201
+ border-bottom: 1px solid #000;
202
+ box-shadow: 0 1px 3px rgba(34,25,25,.4);
203
+ -moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
204
+ -webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
205
+ background-color: #333;
206
+ }
207
+ .slidemenu .slidemenu-header div {
208
+ padding: 80px 0px 0px 19px;
209
+ text-decoration: none;
210
+ color: #fff;
211
+ }
212
+
213
+
214
+ /*slidemenu design*/
215
+
216
+ .menu-item1 {
217
+ background: #00a0e9;
218
+ }
219
+
220
+ .menu-item2 {
221
+ background: #e62e8b;
222
+ }
223
+
224
+ .menu-item3 {
225
+ background: #ffffff;
226
+ }
227
+
228
+ .menu-item4 {
229
+ background: #ffffff;
230
+ text-align: left;
231
+ }
232
+
233
+ .menu-item5 {
234
+ background: #ffffff;
235
+ text-align: left;
236
+ }
237
+
238
+ .menu-item6 {
239
+ background: #595757;
240
+ text-align: left;
241
+ }
242
+
243
+ .menu-item7 {
244
+ display: inline-block;
245
+ width:50%;
246
+ font-size: 60%;
247
+ margin:0;
248
+ background: #000000;
249
+ text-align: left;
250
+ white-space:nowrap;
251
+ }
252
+
253
+ .menu-item8 {
254
+ display: inline-block;
255
+ width:50%;
256
+ font-size: 60%;
257
+ margin:0;
258
+ background: #000000;
259
+ text-align: left;
260
+ white-space:nowrap;
261
+ }
262
+
263
+ .menu-item9 {
264
+ background: #000000;
265
+ text-align: left;
266
+ }
267
+
268
+ /*子メニュー*/
269
+ .menu-item10 {
270
+ background: #ffffff;
271
+ border-top: 1px solid #cccccc;
272
+ border-bottom: 1px solid #cccccc;
273
+ text-align: left;
274
+
275
+ }
276
+
277
+ .slidemenu-content li a {
278
+ webkit-transition-duration: 1s;
279
+ -moz-transition-duration: 1s;
280
+ transition-duration: 1s;
281
+ }
282
+
283
+
284
+
285
+
286
+ /*main*/
287
+
288
+ #main {
289
+ clear:both;
290
+ position: relative;
291
+ top: 0px;
292
+ background-color: #fff;
293
+ padding: 0px 0px 0px 0px;
294
+ text-align: left;
295
+ }
296
+
297
+
298
+ .header_box{
299
+ background: #ffffff;
300
+ height: 60px;
301
+ }
302
+
303
+ .header_box2{
304
+ background: #f2bbbe;
305
+ height: 65px;
306
+ }
307
+
308
+
309
+ /*plugin*/
310
+ .slidemenu {
311
+ top: 0;
312
+ width: 260px;
313
+ position: fixed;
314
+ visibility: hidden;
315
+ z-index: -1;
316
+ }
317
+ .slidemenu .slidemenu-header {
318
+ position: relative;
319
+ }
320
+ .slidemenu .slidemenu-body {
321
+ height: 100%;
322
+ overflow: hidden;
323
+ position: relative;
324
+ }
325
+ .slidemenu .slidemenu-body .slidemenu-content {
326
+ position: relative;
327
+ }
328
+
329
+
330
+ /*プルダウン*/
331
+
332
+ ul.slidemenu-content {
333
+ list-style: none; /* 先頭記号を消す */
334
+ }
335
+
336
+ ul.slidemenu-content ul {
337
+ list-style: none; /* 2段目の先頭記号を消す */
338
+ padding-left: 0px; /* 2段目の左位置を1段目に揃える */
339
+ display: none; /* 通常は表示しない */
340
+ }
341
+
342
+ ul.slidemenu-content li:hover > ul {
343
+ display: block; /* マウスが乗ったら表示する */
344
+ }
345
+
346
+ ul.slidemenu-content a {
347
+ display: block; /* ブロックレベルに */
348
+ outline: none; /* 選択時の点線枠線を消す */
349
+ }
350
+
351
+ ul.slidemenu-content li.menu_on > ul {
352
+ display: block; /* 表示する */
353
+ }
354
+ ul.slidemenu-content li.menu_off > ul {
355
+ display: none; /* 表示しない */
356
+ }
357
+
358
+ .slidemenu-left {
359
+ left: 0;
360
+ }
361
+
362
+ ```
7
363
  毎回ではなく、たまになので、単純に読み込みが遅いだけなのかもと迷う感じなのですが…。
8
364
 
9
365
  これを防ぐようなJSやCSSなどの指定はありませんでしょうか?
@@ -11,4 +367,12 @@
11
367
  <meta name="viewport" content="width=device-width, initial-scale=1">
12
368
  のタグは貼っており、スマートフォン用に表示するよう指定してはいるのですが…。
13
369
 
14
- 使用ているJSなどって対応が変わもしれないですがまずは種類を問わず、上記の現象を防げるような記述がきなかお聞きしたく思いま
370
+ ※少ってのが、サイドメニューよりメニューを内包るヘッダー部分で、(HTMLでいうと最後の部分で
371
+ 三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。
372
+ ここの書き方があまりスマートじゃないのかなと思っています。
373
+ ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
374
+ 私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
375
+
376
+ ↓したいヘッダーのならべかた
377
+
378
+ 〔左:ハンバーガーアイコン〕〔真ん中:ブランドロゴ〕〔右1カート〕〔右2お気に入りに入れるマーク〕