質問編集履歴

5 参考画像追加

退会済みユーザー

退会済みユーザー

2016/05/18 14:45  投稿
スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
 
![イメージ説明](52ed429b0b7945928d62d42589acffc3.jpeg)  
↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
↓現在のデザイン
HTML
```ここに言語を入力
<!-- サイドメニュー中身 -->
 <div class="slidemenu slidemenu-left">
   <div class="slidemenu-body">
     <ul class="slidemenu-content">
       <li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
     
       <li class="menu-item3"><a class="menu-item" href="">
<font color="#333333">&#062;会員登録</font></a></li>
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>
       <li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
<ul>
     <li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
     <li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
   </ul>
</li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
<ul>
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
       <li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
       <li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
     </ul>
   </div>
 </div>
 <!-- ヘッダー看板 -->
 <header id="header">
     <span class="button menu-button-left">
     </span>
<div class="slidemenu_header_right2">
<a href=""><img src=""width="100%"></a>
</div>
<div class="slidemenu_header_left">
<img src="" width="100%">
</div>
<div class="slidemenu_header_center">
<a href=""><img src="" width="100%"></a></div>
<div class="slidemenu_header_right">
<a href=""><img src="" width="100%"></a>
</div>
 </header>
<div class="header_box2"></div>
```
css
```ここに言語を入力
@charset "Shift_JIS";
body, div, span, p, blockquote, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub,
b, i, ol, ul, li,
footer, header, hgroup, menu, nav, section, summary,
time, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
#slidemenu-body {
   line-height: 1;
   font-size: 14px;
   font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
   color: #3a3a3a;
   width: 100%;
   min-width: 320px;
   -webkit-text-size-adjust: none;
   background: #fff;
}
nav ul {
   list-style:none;
}
/*header*/
#header {
   background: #f2bbbe;
overflow:hidden;
   border-bottom: 0px;
   width: 100%;
margin: 0px 0px 0px 0px;
         position: fixed;
         z-index: 1;
         top:0; /* Required!! */
}
.slidehed_box {
   background: #ffffff;
   border-bottom: 0px;
   width: 100%;
   height: 70px;
   position: relative;
}
.slidemenu_header_left {
   background: #f2bbbe;
   border-bottom: 0px;
text-align: left;
   width: 33%;
   float:left;
}
.slidemenu_header_center {
   background: #f2bbbe;
   border-bottom: 0px;
text-align: center;
   width: 33%;
   float:left;
}
.slidemenu_header_right {
   background: #f2bbbe;
   border-bottom: 0px;
   width: 33%;
   float:left;
}
.slidemenu_header_right2 {
   border-bottom: 0px;
   position: absolute;
   width: 17%;
   right: 0;
   top: 0;
}
.button {
   width: 130px;
   height: 70px;
   position: absolute;
   display: block;
   background-repeat: no-repeat;
   background-position: left top;
}
.menu-button-left {
   left: 0px;
   border-right: 0px
}
/*slidemenu*/
.slidemenu {
   background-color: #595757;
}
.slidemenu li {
   list-style: none;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   font-size:14px;
   line-height: 1.8;
}
.slidemenu li a {
   padding:10px 0 10px 20px;
   display: block;
   text-decoration: none;
   color: #fff;
}
.slidemenu li:first-child {
   border-top: none;
}
.slidemenu li:last-child {
   border-bottom: none;
}
.slidemenu .slidemenu-header {
   height: 80px;
   border-bottom: 1px solid #000;
   box-shadow: 0 1px 3px rgba(34,25,25,.4);
   -moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
   -webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
   background-color: #333;
}
.slidemenu .slidemenu-header div {
   padding: 80px 0px 0px 19px;
   text-decoration: none;
   color: #fff;
}
/*slidemenu design*/
.menu-item1 {
   background: #00a0e9;
}
.menu-item2 {
   background: #e62e8b;
}
.menu-item3 {
   background: #ffffff;
}
.menu-item4 {
   background: #ffffff;
text-align: left;
}
.menu-item5 {
   background: #ffffff;
text-align: left;
}
.menu-item6 {
   background: #595757;
text-align: left;
}
.menu-item7 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item8 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item9 {
   background: #000000;
text-align: left;
}
/*子メニュー*/
.menu-item10 {
   background: #ffffff;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
text-align: left;
}
.slidemenu-content li a {
  webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
}
/*main*/
#main {
clear:both;
position: relative;
top: 0px; 
background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}
.header_box{
background: #ffffff;
 height: 60px;
}
.header_box2{
background: #f2bbbe;
 height: 65px;
}
/*plugin*/
.slidemenu {
 top: 0;
 width: 260px;
 position: fixed;
 visibility: hidden;
 z-index: -1;
}
.slidemenu .slidemenu-header {
 position: relative;
}
.slidemenu .slidemenu-body {
 height: 100%;
 overflow: hidden;
 position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
 position: relative;
}
/*プルダウン*/
ul.slidemenu-content {
list-style: none; /* 先頭記号を消す */
}
ul.slidemenu-content ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
display: none; /* 通常は表示しない */
}
ul.slidemenu-content li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.slidemenu-content a {
display: block; /* ブロックレベルに */
outline: none; /* 選択時の点線枠線を消す */
}
ul.slidemenu-content li.menu_on > ul {
display: block; /* 表示する */
}
ul.slidemenu-content li.menu_off > ul {
display: none; /* 表示しない */
}
.slidemenu-left {
   left: 0;
}
```
※メニューを内包しているヘッダー部分に、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17785 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
4 タグ修正

退会済みユーザー

退会済みユーザー

2016/05/18 13:36  投稿
スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
↓現在のデザイン
HTML
```ここに言語を入力
<!-- サイドメニュー中身 -->
<div class="slidemenu slidemenu-left">
<div class="slidemenu-body">
<ul class="slidemenu-content">
<li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
<li class="menu-item3"><a class="menu-item" href="">
<font color="#333333">&#062;会員登録</font></a></li>
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>
<li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
<ul>
<li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
<li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
</ul>
</li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
<ul>
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
<li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
<li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
</ul>
</div>
</div>
<!-- ヘッダー看板 -->
<header id="header">
<span class="button menu-button-left">
</span>
<div class="slidemenu_header_right2">
<a href=""><img src=""width="100%"></a>
</div>
<div class="slidemenu_header_left">
<img src="" width="100%">
</div>
<div class="slidemenu_header_center">
<a href=""><img src="" width="100%"></a></div>
<div class="slidemenu_header_right">
<a href=""><img src="" width="100%"></a>
</div>
</header>
<div class="header_box2"></div>
```
css
```ここに言語を入力
@charset "Shift_JIS";
body, div, span, p, blockquote, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub,
b, i, ol, ul, li,
footer, header, hgroup, menu, nav, section, summary,
time, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#slidemenu-body {
line-height: 1;
font-size: 14px;
font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
color: #3a3a3a;
width: 100%;
min-width: 320px;
-webkit-text-size-adjust: none;
background: #fff;
}
nav ul {
list-style:none;
}
/*header*/
#header {
background: #f2bbbe;
overflow:hidden;
border-bottom: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
position: fixed;
z-index: 1;
top:0; /* Required!! */
}
.slidehed_box {
background: #ffffff;
border-bottom: 0px;
width: 100%;
height: 70px;
position: relative;
}
.slidemenu_header_left {
background: #f2bbbe;
border-bottom: 0px;
text-align: left;
width: 33%;
float:left;
}
.slidemenu_header_center {
background: #f2bbbe;
border-bottom: 0px;
text-align: center;
width: 33%;
float:left;
}
.slidemenu_header_right {
background: #f2bbbe;
border-bottom: 0px;
width: 33%;
float:left;
}
.slidemenu_header_right2 {
border-bottom: 0px;
position: absolute;
width: 17%;
right: 0;
top: 0;
}
.button {
width: 130px;
height: 70px;
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: left top;
}
.menu-button-left {
left: 0px;
border-right: 0px
}
/*slidemenu*/
.slidemenu {
background-color: #595757;
}
.slidemenu li {
list-style: none;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
font-size:14px;
line-height: 1.8;
}
.slidemenu li a {
padding:10px 0 10px 20px;
display: block;
text-decoration: none;
color: #fff;
}
.slidemenu li:first-child {
border-top: none;
}
.slidemenu li:last-child {
border-bottom: none;
}
.slidemenu .slidemenu-header {
height: 80px;
border-bottom: 1px solid #000;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
background-color: #333;
}
.slidemenu .slidemenu-header div {
padding: 80px 0px 0px 19px;
text-decoration: none;
color: #fff;
}
/*slidemenu design*/
.menu-item1 {
background: #00a0e9;
}
.menu-item2 {
background: #e62e8b;
}
.menu-item3 {
background: #ffffff;
}
.menu-item4 {
background: #ffffff;
text-align: left;
}
.menu-item5 {
background: #ffffff;
text-align: left;
}
.menu-item6 {
background: #595757;
text-align: left;
}
.menu-item7 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item8 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item9 {
background: #000000;
text-align: left;
}
/*子メニュー*/
.menu-item10 {
background: #ffffff;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: left;
}
.slidemenu-content li a {
webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
/*main*/
#main {
clear:both;
position: relative;
top: 0px;
background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}
.header_box{
background: #ffffff;
height: 60px;
}
.header_box2{
background: #f2bbbe;
height: 65px;
}
/*plugin*/
.slidemenu {
top: 0;
width: 260px;
position: fixed;
visibility: hidden;
z-index: -1;
}
.slidemenu .slidemenu-header {
position: relative;
}
.slidemenu .slidemenu-body {
height: 100%;
overflow: hidden;
position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
position: relative;
}
/*プルダウン*/
ul.slidemenu-content {
list-style: none; /* 先頭記号を消す */
}
ul.slidemenu-content ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
display: none; /* 通常は表示しない */
}
ul.slidemenu-content li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.slidemenu-content a {
display: block; /* ブロックレベルに */
outline: none; /* 選択時の点線枠線を消す */
}
ul.slidemenu-content li.menu_on > ul {
display: block; /* 表示する */
}
ul.slidemenu-content li.menu_off > ul {
display: none; /* 表示しない */
}
.slidemenu-left {
left: 0;
}
```
※メニューを内包しているヘッダー部分に、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17785 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
  • JavaScript

    38672 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
3 誤字修正

退会済みユーザー

退会済みユーザー

2016/05/18 13:23  投稿
つヘッダー背景色の上に、四つのアイコンをバランスよく配置したい
スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
↓現在のデザイン
HTML
```ここに言語を入力
<!-- サイドメニュー中身 -->
<div class="slidemenu slidemenu-left">
<div class="slidemenu-body">
<ul class="slidemenu-content">
<li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
<li class="menu-item3"><a class="menu-item" href="">
<font color="#333333">&#062;会員登録</font></a></li>
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>
<li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
<ul>
<li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
<li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
</ul>
</li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
<ul>
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
<li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
<li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
</ul>
</div>
</div>
<!-- ヘッダー看板 -->
<header id="header">
<span class="button menu-button-left">
</span>
<div class="slidemenu_header_right2">
<a href=""><img src=""width="100%"></a>
</div>
<div class="slidemenu_header_left">
<img src="" width="100%">
</div>
<div class="slidemenu_header_center">
<a href=""><img src="" width="100%"></a></div>
<div class="slidemenu_header_right">
<a href=""><img src="" width="100%"></a>
</div>
</header>
<div class="header_box2"></div>
```
css
```ここに言語を入力
@charset "Shift_JIS";
body, div, span, p, blockquote, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub,
b, i, ol, ul, li,
footer, header, hgroup, menu, nav, section, summary,
time, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#slidemenu-body {
line-height: 1;
font-size: 14px;
font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
color: #3a3a3a;
width: 100%;
min-width: 320px;
-webkit-text-size-adjust: none;
background: #fff;
}
nav ul {
list-style:none;
}
/*header*/
#header {
background: #f2bbbe;
overflow:hidden;
border-bottom: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
position: fixed;
z-index: 1;
top:0; /* Required!! */
}
.slidehed_box {
background: #ffffff;
border-bottom: 0px;
width: 100%;
height: 70px;
position: relative;
}
.slidemenu_header_left {
background: #f2bbbe;
border-bottom: 0px;
text-align: left;
width: 33%;
float:left;
}
.slidemenu_header_center {
background: #f2bbbe;
border-bottom: 0px;
text-align: center;
width: 33%;
float:left;
}
.slidemenu_header_right {
background: #f2bbbe;
border-bottom: 0px;
width: 33%;
float:left;
}
.slidemenu_header_right2 {
border-bottom: 0px;
position: absolute;
width: 17%;
right: 0;
top: 0;
}
.button {
width: 130px;
height: 70px;
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: left top;
}
.menu-button-left {
left: 0px;
border-right: 0px
}
/*slidemenu*/
.slidemenu {
background-color: #595757;
}
.slidemenu li {
list-style: none;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
font-size:14px;
line-height: 1.8;
}
.slidemenu li a {
padding:10px 0 10px 20px;
display: block;
text-decoration: none;
color: #fff;
}
.slidemenu li:first-child {
border-top: none;
}
.slidemenu li:last-child {
border-bottom: none;
}
.slidemenu .slidemenu-header {
height: 80px;
border-bottom: 1px solid #000;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
background-color: #333;
}
.slidemenu .slidemenu-header div {
padding: 80px 0px 0px 19px;
text-decoration: none;
color: #fff;
}
/*slidemenu design*/
.menu-item1 {
background: #00a0e9;
}
.menu-item2 {
background: #e62e8b;
}
.menu-item3 {
background: #ffffff;
}
.menu-item4 {
background: #ffffff;
text-align: left;
}
.menu-item5 {
background: #ffffff;
text-align: left;
}
.menu-item6 {
background: #595757;
text-align: left;
}
.menu-item7 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item8 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item9 {
background: #000000;
text-align: left;
}
/*子メニュー*/
.menu-item10 {
background: #ffffff;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: left;
}
.slidemenu-content li a {
webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
/*main*/
#main {
clear:both;
position: relative;
top: 0px;
background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}
.header_box{
background: #ffffff;
height: 60px;
}
.header_box2{
background: #f2bbbe;
height: 65px;
}
/*plugin*/
.slidemenu {
top: 0;
width: 260px;
position: fixed;
visibility: hidden;
z-index: -1;
}
.slidemenu .slidemenu-header {
position: relative;
}
.slidemenu .slidemenu-body {
height: 100%;
overflow: hidden;
position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
position: relative;
}
/*プルダウン*/
ul.slidemenu-content {
list-style: none; /* 先頭記号を消す */
}
ul.slidemenu-content ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
display: none; /* 通常は表示しない */
}
ul.slidemenu-content li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.slidemenu-content a {
display: block; /* ブロックレベルに */
outline: none; /* 選択時の点線枠線を消す */
}
ul.slidemenu-content li.menu_on > ul {
display: block; /* 表示する */
}
ul.slidemenu-content li.menu_off > ul {
display: none; /* 表示しない */
}
.slidemenu-left {
left: 0;
}
```
※メニューを内包しているヘッダー部分に、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
  • JavaScript

    38672 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17785 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
2 説明の変更と補足

退会済みユーザー

退会済みユーザー

2016/05/18 13:19  投稿
スマートフォン用サイドスライドメニューを閉じたときに一瞬読み込みがある現象
つヘッダー背景色の上に、四つのアイコンをバランスよく配置したい
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
HTMLML
↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
![イメージ説明](be20642054d2d889e949e9ce8dc13d4f.jpeg)
↓現在のデザイン
HTML
```ここに言語を入力
<!-- サイドメニュー中身 -->
 <div class="slidemenu slidemenu-left">
   <div class="slidemenu-body">
     <ul class="slidemenu-content">
       <li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
     
       <li class="menu-item3"><a class="menu-item" href="">
<font color="#333333">&#062;会員登録</font></a></li>
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>
       <li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
<ul>
     <li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
     <li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
   </ul>
</li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
<ul>
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
       <li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
       <li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
     </ul>
   </div>
 </div>
 <!-- ヘッダー看板 -->
 <header id="header">
     <span class="button menu-button-left">
     </span>
<div class="slidemenu_header_right2">
<a href=""><img src=""width="100%"></a>
</div>
<div class="slidemenu_header_left">
<img src="" width="100%">
</div>
<div class="slidemenu_header_center">
<a href=""><img src="" width="100%"></a></div>
<div class="slidemenu_header_right">
<a href=""><img src="" width="100%"></a>
</div>
 </header>
<div class="header_box2"></div>
```
css
```ここに言語を入力
@charset "Shift_JIS";
body, div, span, p, blockquote, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub,
b, i, ol, ul, li,
footer, header, hgroup, menu, nav, section, summary,
time, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
#slidemenu-body {
   line-height: 1;
   font-size: 14px;
   font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
   color: #3a3a3a;
   width: 100%;
   min-width: 320px;
   -webkit-text-size-adjust: none;
   background: #fff;
}
nav ul {
   list-style:none;
}
/*header*/
#header {
   background: #f2bbbe;
overflow:hidden;
   border-bottom: 0px;
   width: 100%;
margin: 0px 0px 0px 0px;
         position: fixed;
         z-index: 1;
         top:0; /* Required!! */
}
.slidehed_box {
   background: #ffffff;
   border-bottom: 0px;
   width: 100%;
   height: 70px;
   position: relative;
}
.slidemenu_header_left {
   background: #f2bbbe;
   border-bottom: 0px;
text-align: left;
   width: 33%;
   float:left;
}
.slidemenu_header_center {
   background: #f2bbbe;
   border-bottom: 0px;
text-align: center;
   width: 33%;
   float:left;
}
.slidemenu_header_right {
   background: #f2bbbe;
   border-bottom: 0px;
   width: 33%;
   float:left;
}
.slidemenu_header_right2 {
   border-bottom: 0px;
   position: absolute;
   width: 17%;
   right: 0;
   top: 0;
}
.button {
   width: 130px;
   height: 70px;
   position: absolute;
   display: block;
   background-repeat: no-repeat;
   background-position: left top;
}
.menu-button-left {
   left: 0px;
   border-right: 0px
}
/*slidemenu*/
.slidemenu {
   background-color: #595757;
}
.slidemenu li {
   list-style: none;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   font-size:14px;
   line-height: 1.8;
}
.slidemenu li a {
   padding:10px 0 10px 20px;
   display: block;
   text-decoration: none;
   color: #fff;
}
.slidemenu li:first-child {
   border-top: none;
}
.slidemenu li:last-child {
   border-bottom: none;
}
.slidemenu .slidemenu-header {
   height: 80px;
   border-bottom: 1px solid #000;
   box-shadow: 0 1px 3px rgba(34,25,25,.4);
   -moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
   -webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
   background-color: #333;
}
.slidemenu .slidemenu-header div {
   padding: 80px 0px 0px 19px;
   text-decoration: none;
   color: #fff;
}
/*slidemenu design*/
.menu-item1 {
   background: #00a0e9;
}
.menu-item2 {
   background: #e62e8b;
}
.menu-item3 {
   background: #ffffff;
}
.menu-item4 {
   background: #ffffff;
text-align: left;
}
.menu-item5 {
   background: #ffffff;
text-align: left;
}
.menu-item6 {
   background: #595757;
text-align: left;
}
.menu-item7 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item8 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item9 {
   background: #000000;
text-align: left;
}
/*子メニュー*/
.menu-item10 {
   background: #ffffff;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
text-align: left;
}
.slidemenu-content li a {
  webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
}
/*main*/
#main {
clear:both;
position: relative;
top: 0px; 
background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}
.header_box{
background: #ffffff;
 height: 60px;
}
.header_box2{
background: #f2bbbe;
 height: 65px;
}
/*plugin*/
.slidemenu {
 top: 0;
 width: 260px;
 position: fixed;
 visibility: hidden;
 z-index: -1;
}
.slidemenu .slidemenu-header {
 position: relative;
}
.slidemenu .slidemenu-body {
 height: 100%;
 overflow: hidden;
 position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
 position: relative;
}
/*プルダウン*/
ul.slidemenu-content {
list-style: none; /* 先頭記号を消す */
}
ul.slidemenu-content ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
display: none; /* 通常は表示しない */
}
ul.slidemenu-content li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.slidemenu-content a {
display: block; /* ブロックレベルに */
outline: none; /* 選択時の点線枠線を消す */
}
ul.slidemenu-content li.menu_on > ul {
display: block; /* 表示する */
}
ul.slidemenu-content li.menu_off > ul {
display: none; /* 表示しない */
}
.slidemenu-left {
   left: 0;
}
```
毎回ではなく、たまになので、単純に読み込みが遅いだけなのかもと迷う感じなのですが…。
これを防ぐようなJSやCSSなどの指定はありませんでしょうか？
<meta name="viewport" content="width=device-width, initial-scale=1">
のタグは貼っており、スマートフォン用に表示するよう指定してはいるのですが…。
※少し気になっているのが、サイドメニューよりもメニューを内包しているヘッダー部分で、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。
ここの書き方があまりスマートじゃないのかなと思っています。
※メニューを内包しているヘッダー部分に、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
↓したいヘッダーのならべかた
〔左：ハンバーガーアイコン〕〔真ん中：ブランドロゴ〕〔右１カート〕〔右２お気に入りに入れるマーク〕
  • JavaScript

    38672 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17785 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
1 詳しくしました

退会済みユーザー

退会済みユーザー

2016/05/17 21:34  投稿
スマートフォン用サイドスライドメニューを閉じたときに一瞬読み込みがある現象
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
HTMLML  
```ここに言語を入力  
<!-- サイドメニュー中身 -->  
 
 <div class="slidemenu slidemenu-left">  
   <div class="slidemenu-body">  
 
     <ul class="slidemenu-content">  
 
       <li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>  
       
       <li class="menu-item3"><a class="menu-item" href="">  
<font color="#333333">&#062;会員登録</font></a></li>  
 
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">&#062;ログイン</font></a></li>  
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;ログアウト</font></a></li>  
       <li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>  
 
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">&#062;SALEアイテム</font></a></li>  
 
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>  
 
<ul>  
     <li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>  
     <li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>  
   </ul>  
</li>  
 
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>  
<ul>  
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>  
       <li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>  
       <li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>  
     </ul>  
 
   </div>  
 </div>  
 
 
 <!-- ヘッダー看板 -->  
 
 <header id="header">  
     <span class="button menu-button-left">  
     </span>  
 
<div class="slidemenu_header_right2">  
<a href=""><img src=""width="100%"></a>  
</div>  
 
<div class="slidemenu_header_left">  
<img src="" width="100%">  
</div>  
 
<div class="slidemenu_header_center">  
<a href=""><img src="" width="100%"></a></div>  
 
<div class="slidemenu_header_right">  
<a href=""><img src="" width="100%"></a>  
 
</div>  
 
 </header>  
 
<div class="header_box2"></div>  
```  
 
css  
 
```ここに言語を入力  
@charset "Shift_JIS";  
body, div, span, p, blockquote, code,  
del, dfn, em, img, ins, kbd, q, samp,  
small, strong, sub,  
b, i, ol, ul, li,  
footer, header, hgroup, menu, nav, section, summary,  
time, audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   outline: 0;  
}  
 
#slidemenu-body {  
   line-height: 1;  
   font-size: 14px;  
   font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;  
   color: #3a3a3a;  
   width: 100%;  
   min-width: 320px;  
   -webkit-text-size-adjust: none;  
   background: #fff;  
}  
 
nav ul {  
   list-style:none;  
}  
 
/*header*/  
#header {  
   background: #f2bbbe;  
overflow:hidden;  
   border-bottom: 0px;  
   width: 100%;  
margin: 0px 0px 0px 0px;  
         position: fixed;  
         z-index: 1;  
         top:0; /* Required!! */  
}  
 
 
 
.slidehed_box {  
   background: #ffffff;  
   border-bottom: 0px;  
   width: 100%;  
   height: 70px;  
   position: relative;  
 
}  
 
.slidemenu_header_left {  
   background: #f2bbbe;  
   border-bottom: 0px;  
text-align: left;  
   width: 33%;  
   float:left;  
}  
 
.slidemenu_header_center {  
   background: #f2bbbe;  
   border-bottom: 0px;  
text-align: center;  
   width: 33%;  
   float:left;  
}  
 
.slidemenu_header_right {  
   background: #f2bbbe;  
   border-bottom: 0px;  
   width: 33%;  
   float:left;  
}  
 
.slidemenu_header_right2 {  
   border-bottom: 0px;  
   position: absolute;  
   width: 17%;  
   right: 0;  
   top: 0;  
}  
 
 
.button {  
   width: 130px;  
   height: 70px;  
   position: absolute;  
   display: block;  
   background-repeat: no-repeat;  
   background-position: left top;  
}  
 
 
.menu-button-left {  
   left: 0px;  
   border-right: 0px  
}  
 
 
/*slidemenu*/  
.slidemenu {  
   background-color: #595757;  
}  
.slidemenu li {  
   list-style: none;  
   border-top: 1px solid #cccccc;  
   border-bottom: 1px solid #cccccc;  
   border-right: 1px solid #cccccc;  
   font-size:14px;  
   line-height: 1.8;  
}  
.slidemenu li a {  
   padding:10px 0 10px 20px;  
   display: block;  
   text-decoration: none;  
   color: #fff;  
}  
.slidemenu li:first-child {  
   border-top: none;  
}  
.slidemenu li:last-child {  
   border-bottom: none;  
}  
.slidemenu .slidemenu-header {  
   height: 80px;  
   border-bottom: 1px solid #000;  
   box-shadow: 0 1px 3px rgba(34,25,25,.4);  
   -moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);  
   -webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);  
   background-color: #333;  
}  
.slidemenu .slidemenu-header div {  
   padding: 80px 0px 0px 19px;  
   text-decoration: none;  
   color: #fff;  
}  
 
 
/*slidemenu design*/  
 
.menu-item1 {  
   background: #00a0e9;  
}  
 
.menu-item2 {  
   background: #e62e8b;  
}  
 
.menu-item3 {  
   background: #ffffff;  
}  
 
.menu-item4 {  
   background: #ffffff;  
text-align: left;  
}  
 
.menu-item5 {  
   background: #ffffff;  
text-align: left;  
}  
 
.menu-item6 {  
   background: #595757;  
text-align: left;  
}  
 
.menu-item7 {  
display: inline-block;  
width:50%;  
font-size: 60%;  
margin:0;  
background: #000000;  
text-align: left;  
white-space:nowrap;  
}  
 
.menu-item8 {  
display: inline-block;  
width:50%;  
font-size: 60%;  
margin:0;  
background: #000000;  
text-align: left;  
white-space:nowrap;  
}  
 
.menu-item9 {  
   background: #000000;  
text-align: left;  
}  
 
/*子メニュー*/  
.menu-item10 {  
   background: #ffffff;  
   border-top: 1px solid #cccccc;  
   border-bottom: 1px solid #cccccc;  
text-align: left;  
 
}  
 
.slidemenu-content li a {  
  webkit-transition-duration: 1s;  
  -moz-transition-duration: 1s;  
  transition-duration: 1s;  
}  
 
 
 
 
/*main*/  
 
#main {  
clear:both;  
position: relative;  
top: 0px;   
background-color: #fff;  
padding: 0px 0px 0px 0px;  
text-align: left;  
}  
 
 
.header_box{  
background: #ffffff;  
 height: 60px;  
}  
 
.header_box2{  
background: #f2bbbe;  
 height: 65px;  
}  
 
 
/*plugin*/  
.slidemenu {  
 top: 0;  
 width: 260px;  
 position: fixed;  
 visibility: hidden;  
 z-index: -1;  
}  
.slidemenu .slidemenu-header {  
 position: relative;  
}  
.slidemenu .slidemenu-body {  
 height: 100%;  
 overflow: hidden;  
 position: relative;  
}  
.slidemenu .slidemenu-body .slidemenu-content {  
 position: relative;  
}  
 
 
/*プルダウン*/  
 
ul.slidemenu-content {  
list-style: none; /* 先頭記号を消す */  
}  
 
ul.slidemenu-content ul {  
list-style: none; /* 2段目の先頭記号を消す */  
padding-left: 0px; /* 2段目の左位置を1段目に揃える */  
display: none; /* 通常は表示しない */  
}  
 
ul.slidemenu-content li:hover > ul {  
display: block; /* マウスが乗ったら表示する */  
}  
 
ul.slidemenu-content a {  
display: block; /* ブロックレベルに */  
outline: none; /* 選択時の点線枠線を消す */  
}  
 
ul.slidemenu-content li.menu_on > ul {  
display: block; /* 表示する */  
}  
ul.slidemenu-content li.menu_off > ul {  
display: none; /* 表示しない */  
}  
 
.slidemenu-left {  
   left: 0;  
}  
 
```  
毎回ではなく、たまになので、単純に読み込みが遅いだけなのかもと迷う感じなのですが…。
これを防ぐようなJSやCSSなどの指定はありませんでしょうか？
<meta name="viewport" content="width=device-width, initial-scale=1">
のタグは貼っており、スマートフォン用に表示するよう指定してはいるのですが…。
使用しているJSなどによって対応が変わるかもしれないですが、まずは種類を問わず、上記の現象を防げるような記述ができないかお聞きしたく思います。
※少し気になっているのが、サイドメニューよりもメニューを内包しているヘッダー部分で、（HTMLでいうと最後の部分です）
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。
ここの書き方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
↓したいヘッダーのならべかた
〔左：ハンバーガーアイコン〕〔真ん中：ブランドロゴ〕〔右１カート〕〔右２お気に入りに入れるマーク〕
  • JavaScript

    38672 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17785 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る