90557


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

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

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

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

[code]

    @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;
      }
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2022-08-07T02:01:49.980
90413
2022-08-14T00:34:03.467
2022-08-13T16:57:44.813
3060
53883
question
html css
CSSで ul を flex から block に書き換えたが、Chromeのモバイル表示で縦並びにならない


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

[code]

    <meta name="viewport" content="width=device-width,initial-scale=1">
    
[/code]


CC BY-SA 4.0
2022-08-14T00:34:03.467
90557
2022-08-14T00:34:03.467
9464
90413
answer