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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

447閲覧

cssにおけるプロパティ及びjQueryの不安定な挙動(スライドメニューが収納されない)に関して

6111-debutant_.

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/12 00:53

###前提・実現したいこと

①商品詳細ページおいて、header部分にコンテンツが重なる症状を改善したいです。

②pc以外の各デバイス(iphone6s / 6 / 5等)において、トップページの背景画像を縦横比を保ち、画像全体
がぴったり収まるレイアウトにしたいです。

③jQueryによるスライドメニューがレスポンシブデザインでは不安定な挙動を見せるため改善したいです。

質問内容が多岐に渡り恐縮なのですが、色々な方からのアドバイスを参考に勉強させて頂ければ幸いです。
よろしくお願い致します。

###発生している問題・エラーメッセージ
①個別商品を選択すると、本来青文字のヘッダーの下に商品名等の情報がくるようにmargin & paddingで調
整しましたが、そのスタイルが反映されずにヘッダー部に覆われるようにコンテンツが食い込んで重なってしまい
ます。

②Googleの開発ツールでは、背景画像に対してbackground-size:contain;を使用することで、添付写真の
ように一枚の画像が各デバイスの幅に合わせてぴったり収まっていますが、実機(iphone6)で確認すると画像
が表示されず空白になってしまいます。

③各デバイスにおいて、スライドされて表示されたメニューが収納されず、表示された状態が続いてしまいます。
開発ツールではランダムの箇所をクリックすればそれに呼応してしっかりメニューが収納される動作は確認できま
した。

###該当のソースコード

HTML

1 <div class="wrapper height"> 2 3 <div class="move"> 4 <div id="my-store-11819103"></div> 5 <div> 6 <script type="text/javascript" src="https://app.ecwid.com/script.js?11819103&data_platform=code&data_date=2017-07-22" charset="utf-8"></script> 7 <script type="text/javascript"> 8 xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-11819103"); 9 </script> 10 </div> 11 </div> 12 13 </div>

CSS

1 .height { 2 margin-top: 80px; 3 padding-top: -80px; 4}

HTML

1 <main> 2 <div class="top-message"> 3 <h2>Sample catchy title</h2> 4 <p>Sample description</p> 5 </div> 6 </main>

CSS

1main { 2 background-image: url("../image/top-pic.jpg"); 3 background-size: cover; 4 background-position: center center; 5 background-repeat: no-repeat; 6 background-attachment: fixed; 7 8}

HTML

1 <ul id="menu" class="header-right"> 2 <li class="active"><a href="#">About</a></li> 3 <li class="parent"><a href="#">Product</a> 4 <ul> 5 <li><a href="angel.html">Angel</a></li> 6 <li><a href="#">Pillow</a></li> 7 <li><a href="#">Costume</a></li> 8 </ul> 9 10 <script> 11 $("#menu li.parent").hover(function() { 12 $(this).children('ul').stop(true).slideDown('fast'); 13 }, function() { 14 $(this).children('ul').slideUp('fast'); 15 }); 16 </script>

###試したこと
①Productページでも同様の症状が見られましたが、cssをブラウザで直接開きキャッシュ強制解除を行うことで解決できました。同様の作業を行うも特に変化は無かったです。

②background-size:cover;を使用することで画像がしっかり表示されることを確認するも、
background-size:contain;で非表示の原因が特定できません。

③開発ツールと実機での動作を確認するも、同様の結果が得られず原因が特定できません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

検証webサイト
https://azzurro2017.github.io/index.html

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/08/12 07:36

①再現しませんでした。当方win7 firefoxです。
6111-debutant_.

2017/08/14 08:49

Lhankor_Mhy様 確認して頂きましてありがとうございました。
koronatail

2017/08/17 02:55

何かライブラリを使われているのでしょうか。xProductBrowserというのがどういった関数なのかわかりませんでした。使われているライブラリを挙げれば専門としている人が回答してくれるかもしれません。
6111-debutant_.

2017/08/21 13:01 編集

koronatail様 確認して頂きましてありがとうございました。質問の仕方、参考にさせて頂きます。 諸事情により、現在自作サイトの検証ができません。xProductBrowserの件、再度確認した上で質問 させて頂ければ幸いです。
guest

回答1

0

iphone,ipad等では、background-attachment: fixed;はバグで固定されないのが原因かと思います。

iphone,ipadでは、「main」を別レイヤーにし、以下などでご対応するのはいかがでしょうか。
background-image: url(../image/top-pic.jpg);
width: 100%;
height: 100%;
float: none;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;

投稿2017/08/21 07:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

6111-debutant_.

2017/08/21 13:04

s4d様 詳細なアドバイスありがとうございました。バグが原因の可能性という発想がなかったです。諸事情により現在自作サイトを検証できません。確認でき次第、再度質問させて頂ければ幸いです。
6111-debutant_.

2017/08/28 05:40

s4d様 確認遅くなり失礼致しました。 iphone,ipadを想定してmax-width:768pxのメディアクエリ内に上記cssを追加したところ、 画像全体は収まらず、position: fixed;により画像の下に配置されているコンテンツが表示されなくなりました。 ちなみにfloat: none;は、この場合どういった意図で使用されているのでしょうか?
退会済みユーザー

退会済みユーザー

2017/08/28 14:30

float;noneはこちらの記載ミスでした。 申し訳ありません。 background-size:contain;は、縦横サイズを指定しないと表示されないかと思います。 1は、.bg-bにpadding-topで解決できると思います。背景ごとheaderにかぶせたくない場合は、margin-top。 2は、背景だけのレイヤーを作成するか、擬似クラスのbeforeまたはafterで以下で解決するかと思います。 その際、pcの背景画像は、noneにする必要があります。 bg-b:before { content:''; position: fixed; width: 100%; height: 100%; background-image: url(../image/top-pic.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; left: 0; right: 0; top: 0; bottom: 0; z-index:-1; } 3.は、UI的には、アコーディオンを検討するのはいかがでしょうか。 http://mugen00.moo.jp/sample/js_toggle/js_toggle.html
6111-debutant_.

2017/08/29 02:19

s4d様 上記アドバイスありがとうございました。 3のアコーディオンに関して、参照URL確認したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問