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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

Q&A

解決済

1回答

4577閲覧

ハンバーガーメニューが表示されない

yamaki

総合スコア19

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

0グッド

0クリップ

投稿2019/05/03 05:59

現在、bootstrap3を勉強しているのですが、
ウィンドウの幅を小さくした際にハンバーガーメニューが表示されません。
ご教示いただけないでしょうか。
ナビゲーション部分を抜粋したソースは以下です。

HTML

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- Bootstrapで使うCSSの読み込み--> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 7 <title>Sample Web Page</title> 8 </head> 9 <body> 10 <nav class="navbar navbar-inverse navbar-fixed-top"> 11 <!-- モバイル表示用の省略メニュー --> 12 <div class="navbar-header"> 13 <button type="button" class="navbar-toggle collapse" data-target="#header__nav__link"> 14 <span class="icon-bar"></span> 15 <span class="icon-bar"></span> 16 <span class="icon-bar"></span> 17 </button> 18 <a class="navbar-brand" href="#">周辺情報ページ</a> 19 </div> 20 21 <!-- ナビゲーションメニュー --> 22 <div id="header__nav__link" class="collapse navbar-collapse"> 23 <ul class="nav navbar-nav"> 24 <li><a href="#">TOP</a></li> 25 <li><a href="#searchAddressArea">住所</a></li> 26 <li><a href="#wheatherArea">天気</a></li> 27 </ul> 28 </div> 29 </nav> 30 <!-- jQueryの読み込み--> 31 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 32 <!-- Bootstrapで使うJavaScriptの読み込み--> 33 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 34 </body> 35</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

bootstrap3詳しくないですがまずは下記のパスに「https:」を追加した方が良いと思います。
(デザイン違いますがこちらで再現した限りではパスの解消さえすれば反映されました。)

<!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!doctype html> <html> <head> <meta charset="utf-8"> <!-- Bootstrapで使うCSSの読み込み--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <title>Sample Web Page</title> </head> <body> <style> .contents-item2 { margin: 0px 250px; width: 979px; height: 300px; } .contents-item3 { margin: 100px 250px; width: 979px; height: 300px; } .contents-item4 { margin: 100px 250px; width: 979px; height: 300px; } .top-wrapper3 { height: 882.5px; width: 1480px; } .section-title3 { padding: 100px 688px; color: #333333; font-size: 40px } .contents-item5 { margin: 0px 250px 79px; display: flex; } .column1, .column3 { flex-basis: 50%; font-size: 20px; } .column2 { width: 30px; /*(1)*/ } .top-wrapper4 { width: 1480px; height: 950px; } .neko-photo { position: relative; } .box { position: absolute; top: 101px; left: 629px; background-color: #FFFFFF; opacity: 0.5; width: 600px; height: 600px; } .box p { color: black; font-size: 20px; padding: 98px 75px 52px 75px; } .section-title4 { margin-top: 100px; text-align: center; font-size: 40px; margin-bottom: 95.5px } .comment1 { font-family: bold; margin: 0px 251px 12.5px; } .border1 { border-top: 1px solid; width: 979.5px; height: 13.5px; } .comment1 h4 { font-size: 16px; padding-right: 14px; } .comment1 p { padding-left: 37px; } .comment2 { margin: 0px 251px 12.5px; } .comment2 h4 { font-size: 16px; padding-right: 14px; } .comment2 p { padding-left: 37px; } .border2 { border-top: 1px solid; width: 979.5px; height: 13.5px; } .comment3 { margin: 0px 251px 12.5px; } .comment3 h4 { font-size: 16px; padding-right: 14px; } .comment3 p { padding-left: 37px; } .border3 { border-top: 1px solid; width: 979.5px; height: 13.5px; } .comment4 { margin: 0px 251px 12.5px; } .comment4 h4 { font-size: 16px; padding-right: 14px; } .comment4 p { padding-left: 37px; } .border4 { border-top: 1px solid; width: 979.5px; height: 13.5px; } .comment5 { margin: 0px 251px 12.5px; } .comment5 h4 { font-size: 16px; padding-right: 14px; } .comment5 p { padding-left: 36px; } .border5 { border-top: 1px solid; width: 979.5px; height: 13.5px; } </style> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> タイトル </a> </div> <div class="collapse navbar-collapse" id="navbarEexample7"> <ul class="nav navbar-nav"> <li><a href="#">メニューA</a></li> <li class="active"><a href="#">メニューB</a></li> <li><a href="#">メニューC</a></li> </ul> <p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p> </div> </div> </nav> <!-- jQueryの読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrapで使うJavaScriptの読み込み--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

イメージ説明
イメージ説明

投稿2019/05/03 06:18

編集2019/05/03 07:16
wataame

総合スコア302

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

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

yamaki

2019/05/03 06:26

実はロード時間が長くて困っていたのですが、https:を入れてみたらロード時間が短縮されました。 ご指摘、ありがとうございます。
wataame

2019/05/03 07:17

https:がないと効かないです、、 先ほど公式サイトを元に再現してみましたが出来ましたのでコード添付します。
yamaki

2019/05/04 01:59

コードありがとうございます。ご提示していただいたコードのおかげで、実現できました! 私のコードに「data-toggle="collapse"」がなかったことが原因でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問