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

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

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

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

HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

1795閲覧

ハンバーガーボタンの作成における不具合

revoiot

総合スコア188

CSS3

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

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/03/24 04:00

編集2017/03/24 06:27

今、このサイトに書いてあることを利用して、スマホ時のハンバーガーボタンを作りたいのですが、不具合が出てしまい、うまく機能しません。

不具合は、下記の画像のようにハンバーガーボタンが発現せず、半透明な背景であるリストが常に表示されているということです。

今回、改善するために、取り組んだこと
・スクリプトがちゃんと読み込まれているかの確認。

・後から付け加えたclass名と既存のclass名が重複していないかの確認。

・サイトから貼り付けた際、インデントのずれがなかったかの確認。

・サイトの中にDEMOページがあったため、DEMOページとの見比べによる確認。

この問題をお分かりいただける方がいましたら、ご教授頂けると幸いです。

念のために、現在私が製作途中のwebsiteのURLを添付させていただきます。
URL

イメージ説明

イメージ説明

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Webデザインラボ</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <!-- ※2.メディアクエリの設定でウインドウサイズに応じて読み込むスタイルを切り替える。 --> <!-- ※デフォルトのスタイル(layout.css)を1024px以上のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="box.css" /> <!-- ※タブレット用のスタイル(tablet.css)を1024px以下のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" type="text/css" media="screen and (max-width: 1023px) and (min-width: 769px)" href="box-tablet.css" /> <!-- ※スマートフォン用のスタイル(sp.css)を768px以下のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="box-sp.css" /> <!-- ※3.IE6~8に対応するrespond.jsを入れる。 --> <!--[if It IE 9]> <script src="js/respond.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('#navToggle').click(function(){//headerに .openNav を付加・削除 $('header').toggleClass('openNav'); }); }); </script> </head> <body> <header> <div id="navToggle"> <div> <span></span> <span></span> <span></span> </div> </div><!--#navToggle END--> <nav> <ul> <li><a href="#">Prix Fileとは</a></li> <li><a href="#">ショッピングガイド</a></li> <li><a href="#">マイページ</a></li> <li><a href="#">お気に入り</a></li> <li><a href="#">無料会員登録</a></li> <li><a href="#">ログイン</a></li> <li><a href="#">自分へのご褒美・大切な人への贈り物をテーマに特化するショッピングサイト「Prix Fille」</a></li> </ul> </nav> </header>

CSS

@charset "utf-8"; .header-dash{ width:100%; background-color:#7FFFD4; margin:0 auto; } #navToggle { display:none; /*通常時は非表示にしておきます*/ position:absolute; /*bodyに対しての絶対位置指定です*/ right:13px; top:13px; width:30px; height:25px; cursor:pointer;} #navToggle div {position:relative;} /*spanの絶対位置指定の親にします*/ #navToggle span { display:block; position:absolute; /*#navToggle div に対して*/ width:100%; border-bottom:solid 3px #999; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;} #navToggle span:nth-child(1) {top:0;} #navToggle span:nth-child(2) {top:11px;} #navToggle span:nth-child(3) {top:22px;} /*header footer*/ header, footer { width:100%; z-index:2; position:fixed; background:rgba(255,255,255,.7);} footer {/*略/} /header menu*/ header { display:table; font-size:0; /*ul,liが親のfont-sizeを継承して隙間が空くのをリセット*/ line-height:0;} header h1, nav { display:table-cell;} nav { text-align:right; vertical-align:bottom;} header h1 a img { height:40px; margin:10px;} header ul { font-size:13px; line-height:1; margin:0 10px 10px 0;} header ul li { margin-left:3px; display:inline-block;} header ul li::after {content:' |';} header ul li:last-child::after {content:'';} header ul li a {color:inherit;} /*header menu*/ /*nav要素は絶対位置指定にして、ビューの外側に置いて見えなくします。 nav の中の ul li は横並びを解除して縦組みにレイアウトし直します。*/ header nav { position: absolute; /*bodyに対しての絶対位置*/ right:0; top: -300px; /*通常時はビュー外*/ background:rgba(255,255,255,.7); width:50%; padding:0 10px; -webkit-transition:.5s ease-in-out; /*transitionで動きを*/ -moz-transition:.5s ease-in-out; transition:.5s ease-in-out; text-align:left;} header ul {margin:0} header ul li { display:block; margin:0; border-bottom:dotted 1px #fff; line-height:3;} header ul li a {display:block;} header ul li::after {content:'';} header ul li:last-child {border-bottom:none;} /* Toggle(Button) */ /*display:noneだったボタンを display:blockにして表示します*/ #navToggle {display:block;} /* Click Toggle(Button) */ /*ここから jQueryで header要素に付けた「.openNav」を利用します*/ /*.openNavが付いた要素内のボタン(#navToggle)内のspanへの指定*/ /*最初のspanをマイナス45度に*/ .openNav #navToggle span:nth-child(1) { top: 11px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg)} /*2番目と3番目のspanを45度に*/ .openNav #navToggle span:nth-child(2), .openNav #navToggle span:nth-child(3) { top: 11px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg);} /*header menu*/ /*.openNavが付いた要素の中のnavを 縦方向に351px移動(=表示される)*/ .openNav nav { -moz-transform: translateY(351px); -webkit-transform: translateY(351px); transform: translateY(351px);} コード

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSS

1footer {/*略/}

コメント閉じtypoです。

投稿2017/03/24 04:44

Lhankor_Mhy

総合スコア35865

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

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

revoiot

2017/03/24 05:25

ご回答ありがとうございます。おかげさまで、ハンバーガーボタンが発現しました。しかし、ボタン半透明な背景が常に表示されたままです。どこに不具合があるのでしょうか?
Lhankor_Mhy

2017/03/24 06:01

CSSに全角スペースが含まれていますので、除去してください。
revoiot

2017/03/24 06:31

ご回答いただきありがとうございます。さきほど、cssの全角表示を取り除いたところ、ボタンに動きを得ることが出来ました。ありがとうございます。しかし、半透明な部分が完全に隠れ切らない状態で上部分にはみ出した状態です。どうすれば、不具合を直すことができますでしょうか?さきほど、質問画面に画像を追加させていただきました。 大変恐縮ですが、よろしくお願いします。
revoiot

2017/03/24 07:27

失礼いたしました。先ほど、全ての不具合を解決できました。長い間悩んでいた問題を解決できて、非常にうれしいです。ご教授頂きありがとうございました。
guest

0

サイトを拝見いたしましたが、CSSを指定していないということはないでしょうか。

投稿2017/03/24 04:38

hyper-drums-ko

総合スコア736

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

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

revoiot

2017/03/24 05:50

ご回答ありがとうございます。さきほどfooterにtypoがありましたため、訂正させていただきました。しかし、ボタン半透明な背景が常に表示されたままです。どこに不具合があるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問