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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>otokofes19.work</title>
8    <!-- fontawesomeの読み込み -->
9    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
10    <!-- cssの読み込み  -->
11     <link rel="stylesheet" href="stylesheet.css">
12    <!-- BootstrapのCSS読み込み -->
13    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
14    <!-- jQuery読み込み -->
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
16    <script type="text/javascript" src="otokofes.js"></script>
17
18    <!-- BootstrapのJS読み込み -->
19<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
20  </head>
21  <body>
22    <nav class="navbar navbar-expand-md">
23
24  <div class="col-sm-12 col-md-12 collapse navbar-collapse" id="example">
25    <ul class="navbar-nav">
26      <li>
27        <a class="nav-link" href="https://www.grisoluto.com/entry/otoko-matsuri">ABOUT US</a>
28      </li>
29      <li>
30        <a class="nav-link" href="#">MEMBER</a>
31      </li>
32      <li>
33        <a class="nav-link" href="https://otokofes2019.tumblr.com/">DAIRY PHOTO</a>
34      </li>
35      <li>
36        <a class="nav-link" href="#">LAST YEAR MOVIE</a>
37      </li>
38      <li>
39        <a class="nav-link" href="#">HOT INFORMATION</a>
40      </li>
41    </ul>
42  </div>
43</nav>
44
45      <div class="top container-fluid">
46      <div class="row float-none">
47      <img src="images/IMG_3005000.jpg" class="img-fluid center-block ">
48      </div>
49      </div>
50
51      <section class="whistlecafe">
52        <p>
53          <img src="images/3whistle..koukoku-01.jpg" class="img-fluid center-block" align="top">
54        男祭りとWhistle Cafeさんのコラボメニューの発売が決定いたしました！！
55        <br>
56        あの、早稲田生に大人気のWhistle Cafeさんに協力していただき、今年の男祭りをさらに盛り上げるべく、作ったスタミナたっぷりのどんぶりになっています！！
57      ９月ごろに発売の予定です！皆さんぜひ食べてくださいね♥
58        </p>
59
60      </section>
61    <footer style="background-color:gray">
62      <div class="copyright">
63	<p>© 2019 - otokofes2019実行委員</p>
64</div>
65<div class="sns">
66	<a href="https://note.mu/otokofes19" class="contact">Note</a>
67	<a href="https://www.facebook.com/otokofes2019/" class="fb"><i class="fab fa-facebook-square"></i></a>
68	<a href="https://twitter.com/otokofes19" class="tw"><i class="fab fa-twitter"></i></a>
69	<a href="https://www.instagram.com/otokofes19" class="insta"><i class="fab fa-instagram"></i></a>
70</div>
71     </footer>
72  </body>
73</html>
74

css
1@charset "utf-8";
2.navbar .navbar-nav .nav-link {
3    color: #fff; /* テキストカラー */
4}
5.navbar {
6    background-color: #6c757d; /* 背景色 */
7}
8
9.whistlecafe img{
10  max-width: 40%;
11  height: auto;
12}
13
14
15footer {
16	position: fixed;
17	bottom: 0;
18	display: inline-block;
19	width: 100%;
20	height: 70px;
21	margin: 0;
22	background-color: #9E9E9E;
23	box-shadow: 0 -3px 3px 0 rgba(0,0,0,0.2);
24}
25footer .copyright {
26	float: left;
27	width: 60%;
28}
29footer .copyright p {
30	font-size: 0.7em;
31	line-height: 70px;
32	padding-left: 10%;
33	letter-spacing: 1px;
34	color: #ffffff;
35}
36footer .sns {
37	float: right;
38	width: 40%;
39}
40footer .sns a {
41	width: 25%;
42	font-size: 1.2em;
43	font-weight: bold;
44	line-height: 70px;
45	float: left;
46	-webkit-transition: all, 0.3s;
47	        transition: all, 0.3s;
48	text-align: center;
49	text-decoration: none;
50	color: white;
51}
52footer .sns a:hover {
53	-webkit-transition: all, 0.3s;
54	        transition: all, 0.3s;
55	background-color: #222222;
56}
57footer .sns .insta {
58	background-color: #e4405f;
59}
60footer .sns .fb {
61	background-color: #3b5999;
62}
63footer .sns .tw {
64	background-color: #55acee;
65}
66footer .sns .contact {
67	background-color:#7BC5AE;
68}
69@media (max-width: 480px) {
70	.contents {
71		margin-bottom: 200px;
72	}
73	footer {
74		height: auto;
75	}
76	footer .copyright {
77		width: 100%;
78	}
79	footer .copyright p {
80		padding: 0;
81		text-align: center;
82	}
83	footer .sns {
84		width: 100%;
85	}
86}
87

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

html
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/

左メニューが消えて赤枠をクリックすると消えたメニューが展開されると思います。

このとき、display:noneが消えるため、表示することができます。
このようにcollapseはコンテンツの表示・非表示を切り替えるときに使えます。

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

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

投稿2019/08/17 15:45

8zca

総合スコア559

sasakihina

2019/08/25 02:31

今海外にいて、返信が遅くなって申し訳ありません。丁寧な解説ありがとうございます！最近bootstrapを使い始めたものでよくわかっていなかった部分だったので、解決できてとてもありがたいです。日本に戻り次第やってみます！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問