質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    9270questions

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

  • CSS

    5997questions

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

スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 393

hatu

score 5

いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。

現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。

イメージ説明

↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
イメージ説明

↓現在のデザイン
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透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)

このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

スライドメニューがどういったものなのかわからないので対策ではありませんが・・・
javascriptでスライドメニューを動かすタイプのものよりも、cssのanimationを使って動かすタイプのモノのほうが動作が軽いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/17 21:37

    回答ありがとうございます。HTMLとCSSも記載してみました。JSは記載していませんが、自分で気になったのが、ヘッダーの書き方が読み込み方に影響しているのでは?とも思ったので、もしお時間ございましたら覗いていただけると幸いです。

    キャンセル

  • 2016/05/17 22:11

    縮小されて表示されてしまうとのことなのでviewportの指定を
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    でどうでしょうか

    キャンセル

  • 2016/05/18 13:21

    解答ありがとうございます。書いて頂いた指定をしてみたのですが改善されず…。
    質問を多少補足・変更させて頂きました。また、お時間ありましたらのぞいて頂けると幸いです。

    キャンセル

  • 2016/05/18 14:05

    現象の確認なのですが小さくなるのは画面ではなく「.slidemenu_header_left」内の参考画像の三本線の画像のみでしょうか。
    それともその他の☆や■の画像も小さく表示されるのでしょうか?

    現象が起きているときは
    ・header(緑背景)自体が短くなってbodyの白背景が見えている状態
    ・.slidemenu_header_leftが短くなっている状態(この部分の背景色を変えて確認することはできますか?)
    ・.slidemenu_header_leftの中に入っている画像だけが小さくなる状態
    のどれになりますか?

    仮に一番上の状態の場合スライドメニューを表示させるscript(おそらくsp-slidemenu.jsだと思うのですが)で設定を行っている箇所に問題がありそうな気がします。

    またmenu-button-leftにもbackground-color:rgba(255,0,0,0.5);などを設定して、画像部分とのサイズがずれていないかも確認してみて、見た目ではなく実際にどの要素が短くなっているのが原因なのかを突き止めるのがいいと思います。

    キャンセル

  • 2016/05/18 14:52

    回答ありがとうございます!
    質問部分にもう一枚画像を追加しましたが、一瞬小さくなるのはメインの商品写真がある部分で、ヘッダー部分は長さは正常に見えますが、
    現象の起こるときは、slidemenu_header_rightが読み込み時にチラつく気がします。

    ヘッダーの背景色を変えて、上記クラスの各長さをチェックしてみます。

    キャンセル

  • 2016/05/18 15:06

    小さくなるのがメニュー画像だと思って書いた内容なのでヘッダーの背景色の件は忘れてください。
    原因自体はサイドメニューが表示された時に画像の白背景部分の横幅が小さくなってしまうことだと思います。

    サイドメニューの表示に使用しているjavascriptのデモページでviewportや白背景部分のcssがどうなっているかや、headerのposition:fixedに対応しているか等を一度確認されてみたほうがよさそうです。

    キャンセル

  • 2016/05/18 22:17

    ありがとうございます!一度使用したJSのサイトも確認してみます…!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9270questions

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

  • CSS

    5997questions

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