0

初心者で質問の要領も得ません。助けていただけたらありがたいです。

まず、HTMLでメニュー設定、次にCSSでメニューを横並びにする、さらに、モバイル用(幅が800px以下の場合)にはメニューを縦並びにする、ということをやりたい。

Chromeの「検証」のモバイル表示では字が小さくなって横並びのままです。しかし、普通の表示でウインドウを800px以下に縮めたら、縦に見えます。何がおかしいのでしょうか?

(追記)
いろいろ要領を得ず申し訳ございません。
いらないものが残っているかもしれませんが、以下、貼り付けてみました。
どうぞよろしくお願いいたします。

@charset "UTF-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1;
  background-color: #ffffff;
}

img {
  max-width: 100%;
}

/*ヘッダー*/
.header-inner {
  max-width: 1200px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-menu-button {
  display: none;
}

.header-logo {
  display: block;
  width: 85px;
}

.site-menu ul {
  display: flex;
}

.site-menu ul li {
  margin-left: 20px;
  margin-right: 20px;
}

.site-menu ul li a {
  font-family: 'Montserrat', sans-serif;
}

.header-title {
  font-family: 'Sawarabi Gothic', sans-serif;
}


/*フッター*/
.footer {
  color: #ffffff;
  background-color: hwb(0 0% 100% / 0.473);
  padding-top: 30px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo {
  display: block;
  width: 235px;
  margin-top: 90px;
}

.footer-tel {
  font-size: 16px;
  font-weight: bold;
  margin-top: 14px;
}

.copyright {
  font-size: 10px;
  font-weight: bold;
  margin-top: 90px;
}

.sub-title {
  margin-top: 9px;
}

@media (max-width: 780px) {
 
  .site-menu ul {
    display: block;
    text-align: center;
  }

  .site-menu li {
    margin-top: 15px;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    height: 50px;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  .header-inner {
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    position: relative;
  }

  .header-logo {
    width: 70px;
    height: 63px;
  }

  .header .site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    color: #ffffff;
    background-color: #736E62;
    padding-top: 30px;
    padding-bottom: 50px;
    display: none;
  }

 
  .toggle-menu-button {
    display: block;
    width: 44px;
    height: 34px;
    background-image: url(../images/home/bars_24.png);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 4px;
  }

  .toggle-menu-button:hover {
    background-color: #ddd;
  }

  .site-menu.is-active {
    display: block;
  }


  .header-title {
    font-size: 80%;
  }

  .main {
    padding-top: 50px;
  }

  .first-view {
    height: 200px;
  }

  .footer-logo {
    margin-top: 60px;
  }

  .footer-tel {
    font-size: 10px;
  }

  .copyright {
    margin-top: 45px;
    font-size: 10px;
  }
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="大阪交野にある作文小論文・英語多読の専門教室">
  <title>NAKAO学習教室</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/index.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&family=Sawarabi+Gothic&display=swap" rel="stylesheet">
</head>

<body>
  
  <header class="header">
    <div class="header-inner">
      <a class="header-logo" href="./index.html">
        <img src="#" alt="NAKAO学習教室">
      </a>
      <div class="header-title">
        <h1 class="title">学習教室</h1>
        <p class="sub-title">作文・小論文、英語多読の専門教室</p>
      </div>

      <button class="toggle-menu-button"></button>

      <div class="site-menu">
        <ul>
          <li><a href="./index.html">home</a></li>
          <li><a href="./about.html">教室について</a></li>
          <li><a href="./teacher.html">講師について</a></li>
          <li><a href="./guide.html">案内</a></li>
          <li><a href="./access.html">access</a></li>
        </ul>
      </div>
    </div>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Oswald&family=Sawarabi+Gothic&display=swap" rel="stylesheet">

  </header>

  <main class="main">
    <div class="first-view">
      <div class="first-view-text">
      
      </div>
    </div>
 
   
  </main>

  <footer class="footer">
    <div class="site-menu">
      <ul>
        <li><a href="./index.html">home</a></li>
        <li><a href="./about.html">教室について</a></li>
        <li><a href="./teacher.html">講師について</a></li>
        <li><a href="./guide.html">案内</a></li>
        <li><a href="./access.html">access</a></li>
      </ul>
    </div>
    <a class="footer-logo" href="./index.html">
      <img src="#" alt="NAKAO学習教室">
    </a>
    <p class="footer-tel">TEL 000-0000-0000</p>
    <p class="copyright"><small>&copy;学習教室</small></p>
  </footer>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <script>
    $(".toggle-menu-button").click(function() {
    $(".site-menu").toggleClass("is-active");
  })
  </script>
  
</body>

</html>

4
  • 良い質問をするには?を参考に質問文を校正してください。少なくとも質問文を完成させてからタイトルを考えてください。
    – sayuri
    2022年8月7日 2:15
  • 残念ながら、現象の再現ができません。確認ですが、検証のモバイル表示のサイズは800以下になっていますか?
    – keitaro_so
    2022年8月9日 5:14
  • ありがとうございます。モバイルの設定は、「iPhon6/7/8 375✖️667」になっています。
    – N-kao
    2022年8月10日 7:07
  • 1
    やはり再現ができないようです。たとえばcodepenのようなオンラインで確認できるツールを利用しても、現象は再現できないようです。もしかするとこれ以外のところに原因がある可能性があるので再現可能な短いコードを作成してみてください
    – keitaro_so
    2022年8月11日 1:33

1 件の回答 1

0

以下のように viewport の指定を追加してみてください。

<meta name="viewport" content="width=device-width,initial-scale=1">
1
  • ありがとうございます! 表示、正常になりました。感動です!
    – N-kao
    2022年8月14日 23:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。