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

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

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

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

JavaScript

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

jQuery

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

HTML

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

解決済

レスポンシブなサイトのメニューレイアウト崩れについて

Phycodurus3
Phycodurus3

総合スコア0

CSS3

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

JavaScript

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

jQuery

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

HTML

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

4回答

0評価

0クリップ

3546閲覧

投稿2019/04/02 13:30

前提・実現したいこと

エンジニア・コーダーの先輩方初めまして。

独学でHTML,CSS,JavaScript,jQueryを学習し、現在、ポートフォリオ用のウェブサイトを作成しています。
使用している言語はHTML,CSS,jQueryで、多少動きがあり、且つ、シンプルな構成のサイトを目指しています。

レスポンシブなデザインにするにあたり、想定通りに実装できないのでご教授いただきたく質問する次第です。

発生している問題・エラーメッセージ

問題点としては以下の2点です。

・ハンバーガーメニューは動いているが、中身の要素が中央揃えに出来ない。
・iPadのみメニューが消える。

具体的には...

768pxブレイクポイントとし、PC表示ではメニューが横並びになり、スマホ等ではハンバーガーメニューになるというコードを書いたのですが、デベロッパーツールで確認するとなぜか**"iPad"**で表示した場合、メニューが全く表示されず消えてしまいます。
また、768px以下ではハンバーガーメニューでメニューの中身を中央揃えにしたいのですが、微妙にズレが生じてしまいます。

自分なりに書籍やブログ等を調べて問題解決に勤しみましたが、これ以上時間を無駄にするわけにはいかないので、解決策を探しております。
ご指摘いただけると幸いです。

該当のソースコード

HTML

</head> <body> <header> <div class="container header-container"> <div class="sns-icons"> <div class="instagram-btn"> <a href="https://www.instagram.com/xxy0/" target="_blank"><i class="fab fa-instagram"></i></a> </div> <div class="facebook-btn"> <a href="https://www.facebook.com/profile.php?id=100021649801829" target="_blank"><i class="fab fa-facebook-f"></i></a> </div> <div class="twitter-btn"> <a href="https://twitter.com/Phycodurus3" target="_blank"><i class="fab fa-twitter"></i></a> </div> </div> <div class="header-inner"> <h1 class="header-logo"> <a href="./index.html"><img alt="logo" src="img/Reverie.png" srcset="img/Reverie.png 1x,img/Reverie@2x.png 2x"></a> </h1> </div> <!-- menu --> <div class="nav-container"> <input id="my-parts-checkbox" class="my-parts-hidden icon-hamburger" type="checkbox"> <label id="my-parts-icon" for="my-parts-checkbox"><span></span></label> <!-- </div> --> <!-- <div class="nav-container"> --> <nav class="menu-container"> <ul class="menu"> <li class="menu-item"><a href="about/index.html">About</a></li> <li class="menu-item"><a href="works/index.html">Works</a></li> <li class="menu-item"><a href="contact/index.html">Contact</a></li> </ul> </nav> </div> </div> </header>

CSS

/* menu */ .icon-hamburger { background: #fff; border: 1px solid #ccc; cursor: pointer; height: 50px; position: relative; width: 50px; display: none; margin-bottom: 0.4em; } .icon-hamburger span { background: #cccccc; display: block; height: 16%; left: 50%; margin: -8% 0 0 -42%; position: absolute; top: 50%; width: 84%; } .icon-hamburger span::before, .icon-hamburger span::after { background: #cccccc; content: ""; display: block; height: 100%; left: 50%; margin: -8% 0 0 -50%; position: absolute; top: 50%; width: 100%; } .icon-hamburger span::before { margin-top: -38%; } .icon-hamburger span::after { margin-top: 19%; } @media screen and (max-width: 768px) { .icon-hamburger { display: inline-block; } } /* 追加 */ .my-parts-hidden { display: none; } #my-parts-icon { cursor: pointer; display: inline-block; height: 35px; position: relative; width: 35px; float: right; } @media screen and (min-width: 768px) { #my-parts-icon { display: none; } } #my-parts-icon span { background: #333; border-radius: 4px; display: block; height: 16%; left: 50%; margin: -8% 0 0 -42%; position: absolute; top: 50%; transition: all 0.3s ease-in-out; width: 84%; } #my-parts-icon span::before, #my-parts-icon span::after { -webkit-transform: rotate(0); background: #333; border-radius: 4px; content: ""; display: block; height: 100%; left: 50%; margin: -8% 0 0 -50%; position: absolute; top: 50%; transform: rotate(0); transition: all 0.3s ease-in-out; width: 100%; } #my-parts-icon span::before { margin-top: -38%; } #my-parts-icon span::after { margin-top: 19%; } #my-parts-checkbox:checked ~ #my-parts-icon span { background: rgba(51, 51, 51, 0); } #my-parts-checkbox:checked ~ #my-parts-icon span::before, #my-parts-checkbox:checked ~ #my-parts-icon span::after { content: ""; display: block; height: 100%; left: 50%; margin: -8% 0 0 -42%; position: absolute; top: 50%; width: 100%; } #my-parts-checkbox:checked ~ #my-parts-icon span::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #my-parts-checkbox:checked ~ #my-parts-icon span::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-container { margin: 0; } .menu-container ul { float: right; } .menu-container .menu { /* border: 1px solid #ccc; */ display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .menu-container .menu .menu-item { flex: 1; } @media screen and (max-width: 48em) { /* .menu-container .menu .menu-item { padding-bottom: 15px; max-width: 50%; margin: 0 auto; } */ .menu-container { /* background: orange; */ width: 300px; position: relative; display: table-cell; vertical-align: middle; /* height: 200px; */ } .menu-container .menu .menu-item { width: 220px; display: block; vertical-align: middle; padding-bottom: 15px; margin: 0 auto; } } .menu-container .menu .menu-item a { background: #fff; /* border-right: 1px solid #ccc; */ color: #333; display: block; /* padding: 0 20px 0 0; */ text-align: right; text-decoration: none; padding-left: 50px; } @media screen and (max-width: 768px) { .menu-container .menu { text-align: center; } } .menu-container .menu .menu-item a:hover { /* background: #ccc; */ /* color: #ffffff; */ text-decoration: underline; opacity: 0.5; } .menu-container .menu .menu-item:last-child a { border-right: none; } @media screen and (max-width: 768px) { .menu-container .menu { display: none; width: 100%; } .menu-container .menu .menu-item a { /* border-bottom: 1px solid #ccc; */ border-right: none; } .menu-container .menu .menu-item:last-child a { border-bottom: none; } }

jQuery

$(function() { jQuery('.icon-hamburger').on('click', function() { if(jQuery('.menu-container .menu').css('display') === 'block') { jQuery('.menu-container .menu').slideUp('1500'); }else { jQuery('.menu-container .menu').slideDown('1500'); } }); $('#back-to-top a').click(function() { $('html,body').animate({scrollTop:0},500,'linear'); return false; }); });

試したこと

色々と状況を見ながら試してみましたがこれ以上は現在の私のスキルでは解決不可と判断しました。

補足情報(ツールのバージョンなど)

エディタは最新のAtom、ブラウザは最新のchrome、jQueryも最新バージョンです。
玄人の方が見ればわかると思うのですが、綺麗なコードではありません。それ故間違い等も見つけにくいかと思いますが、何卒よろしくお願い致します。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

liveasnotes
liveasnotes

2019/04/03 08:40

抜粋されたコードですが,インデントや(スコープ的な意味での)階層が怪しいのと,コピペしただけだと,ちゃんと動かない(中央揃え云々が表示されすらしない)のが気になりました. こういうコード間の依存関係が大事なものは,https://jsfiddle.net/ などのオンラインエディタで,状況を共有してもらえると分かりやすいです.再現性のあるコードかつ,すぐに調査可能な状態(コードが書かれたオンラインエディタのページに飛ぶリンクがある,など)であれば,回答しやすくなります. jsFiddleの使い方に関しては,ここ(https://haniwaman.com/js-fiddle/)などを参考にしてください
Phycodurus3
Phycodurus3

2019/04/03 14:46

liveasnotes様 お忙しい中、貴重なお時間を割いていただいて本当にありがとうございます。 はにわまんさんのブログサイトは私も拝見しています。 jsfiddleの存在は知りませんでした。素晴らしい情報ありがとうございます! 改めて使い方等を確認し、後程共有できるようにします。 当初は本文内のコードに全コードを記載するつもりでしたが、文字数がオーバーしてしまったので、問題のメニュー部分のみを抜粋した次第です。 おっしゃる通り、全体が見えないと色々と問題点が把握できませんよね.....。 ということで、明日にでもjsfiddleにて共有できるように致します。 今後とも何卒よろしくお願い致します。 ちなみにiPadのみ表示されない問題に関してですが、メディアクエリーのmax-widthを767.98pxに設定したところ、なぜか表示されるようになりました(他の方のブログ記事を参照しました)。 後はハンバーガーメニュー内の要素を768px以下では中央揃えで固定し、スマホ表示からPCサイズに戻した時もメニューの表示が消えないようにしたいです。
Phycodurus3
Phycodurus3

2019/04/04 09:42

liveasnotes様 お世話になります。 jsfiddleにて状況を共有できるようにしたので、お時間のある際にご確認していただけると幸いです。 https://jsfiddle.net/dx6wkp05/2/#&togetherjs=jK9ah8nSv7 全ページに共通するヘッダー、メニュー部分、フッターを作っている最中に、メニュー部分でつまづいてしまったという状況です。 何卒よろしくお願い致します。
Phycodurus3
Phycodurus3

2019/04/05 10:00

liveasnotes様 お世話になります。 再び自分なりにコードを見直し、不要な記述等を添削し、.menu-containerのwidthを60%にしたところ、メニュー内の要素が中央揃えになりました。 改めて更新したコードが以下になります↓ https://jsfiddle.net/dx6wkp05/3/#&togetherjs=jK9ah8nSv7 あとはハンバーガーメニューを開いたまま画面幅をPC表示に戻した際にメニューが再び横並びになるようにできれば問題は解決しそうです。 その辺りのアドバイスや解決の糸口があればご教授いただけると幸いです。 何卒よろしくお願い致します。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

JavaScript

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

jQuery

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

HTML

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