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

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

ただいまの
回答率

87.34%

メニューのレスポンシブ対応ができません。

解決済

回答 1

投稿

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

score 6

headにメニューバーをつけたのですが、iPad以下のスクリーンサイズになると消えてしまいます。
bootstrapを最近使い始めたので、使い方がよく理解できておらず、間違っているのかもしれません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>otokofes19.work</title>
    <!-- fontawesomeの読み込み -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <!-- cssの読み込み  -->
     <link rel="stylesheet" href="stylesheet.css">
    <!-- BootstrapのCSS読み込み -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="otokofes.js"></script>

    <!-- BootstrapのJS読み込み -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-md">

  <div class="col-sm-12 col-md-12 collapse navbar-collapse" id="example">
    <ul class="navbar-nav">
      <li>
        <a class="nav-link" href="https://www.grisoluto.com/entry/otoko-matsuri">ABOUT US</a>
      </li>
      <li>
        <a class="nav-link" href="#">MEMBER</a>
      </li>
      <li>
        <a class="nav-link" href="https://otokofes2019.tumblr.com/">DAIRY PHOTO</a>
      </li>
      <li>
        <a class="nav-link" href="#">LAST YEAR MOVIE</a>
      </li>
      <li>
        <a class="nav-link" href="#">HOT INFORMATION</a>
      </li>
    </ul>
  </div>
</nav>

      <div class="top container-fluid">
      <div class="row float-none">
      <img src="images/IMG_3005000.jpg" class="img-fluid center-block ">
      </div>
      </div>

      <section class="whistlecafe">
        <p>
          <img src="images/3whistle..koukoku-01.jpg" class="img-fluid center-block" align="top">
        男祭りとWhistle Cafeさんのコラボメニューの発売が決定いたしました!!
        <br>
        あの、早稲田生に大人気のWhistle Cafeさんに協力していただき、今年の男祭りをさらに盛り上げるべく、作ったスタミナたっぷりのどんぶりになっています!!
      9月ごろに発売の予定です!皆さんぜひ食べてくださいね♥
        </p>

      </section>
    <footer style="background-color:gray">
      <div class="copyright">
    <p>© 2019 - otokofes2019実行委員</p>
</div>
<div class="sns">
    <a href="https://note.mu/otokofes19" class="contact">Note</a>
    <a href="https://www.facebook.com/otokofes2019/" class="fb"><i class="fab fa-facebook-square"></i></a>
    <a href="https://twitter.com/otokofes19" class="tw"><i class="fab fa-twitter"></i></a>
    <a href="https://www.instagram.com/otokofes19" class="insta"><i class="fab fa-instagram"></i></a>
</div>
     </footer>
  </body>
</html>
@charset "utf-8";
.navbar .navbar-nav .nav-link {
    color: #fff; /* テキストカラー */
}
.navbar {
    background-color: #6c757d; /* 背景色 */
}

.whistlecafe img{
  max-width: 40%;
  height: auto;
}


footer {
    position: fixed;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: 70px;
    margin: 0;
    background-color: #9E9E9E;
    box-shadow: 0 -3px 3px 0 rgba(0,0,0,0.2);
}
footer .copyright {
    float: left;
    width: 60%;
}
footer .copyright p {
    font-size: 0.7em;
    line-height: 70px;
    padding-left: 10%;
    letter-spacing: 1px;
    color: #ffffff;
}
footer .sns {
    float: right;
    width: 40%;
}
footer .sns a {
    width: 25%;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 70px;
    float: left;
    -webkit-transition: all, 0.3s;
            transition: all, 0.3s;
    text-align: center;
    text-decoration: none;
    color: white;
}
footer .sns a:hover {
    -webkit-transition: all, 0.3s;
            transition: all, 0.3s;
    background-color: #222222;
}
footer .sns .insta {
    background-color: #e4405f;
}
footer .sns .fb {
    background-color: #3b5999;
}
footer .sns .tw {
    background-color: #55acee;
}
footer .sns .contact {
    background-color:#7BC5AE;
}
@media (max-width: 480px) {
    .contents {
        margin-bottom: 200px;
    }
    footer {
        height: auto;
    }
    footer .copyright {
        width: 100%;
    }
    footer .copyright p {
        padding: 0;
        text-align: center;
    }
    footer .sns {
        width: 100%;
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

こんばんは。

  <div class="col-sm-12 col-md-12 collapse navbar-collapse" id="example">


のcollapseクラスが指定されていると、768px以下でdisplay:noneが効くようになります。
Google chromeのデベロッパーツールやSafariの開発者ツールなどでcssの変化を見てみるとわかりやすいと思いますよ。

で、肝心のcollapseとはなのですが、Bootstrapの公式で、横幅を狭めてみてください。
https://getbootstrap.com/docs/4.3/components/collapse/

左メニューが消えて赤枠をクリックすると消えたメニューが展開されると思います。
(d348e42c07c1c4f31e2ab5f7baf39925.png)
このとき、display:noneが消えるため、表示することができます。
このようにcollapseはコンテンツの表示・非表示を切り替えるときに使えます。

提示いただいたコードだと、ABOUT USがあるメニュー部分の左右どちらかにハンバーガーアイコンを置いて、それを押すとメニューが表示されるようにするのがよさそうですね。

公式のExampleを見れば展開のさせ方がわかると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/25 11:31

    今海外にいて、返信が遅くなって申し訳ありません。

    丁寧な解説ありがとうございます!最近bootstrapを使い始めたものでよくわかっていなかった部分だったので、解決できてとてもありがたいです。

    日本に戻り次第やってみます!
    ありがとうございます!

    キャンセル

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

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

関連した質問

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