思い

pcではハンバーガーメニューを非表示に、スマホではハンバーガーメニューを表示する。
また、pcではpc用のナビゲーションも表示し、スマホではpc用のナビゲーションを非表示にする。
pcではカードを横並びにし、スマホではカードの横幅を100%にする。

HTMLのhead内の要素

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>霊夢のブログ</title>
<link rel="stylesheet" href="/contents/style.css?ver=1.3">

このように、ビューポートも入れ、CSSも読み込みました。

CSSのメディアクエリ

@media screen and (max-width: 480px) {
 /* カード */
 .col-sm-6 {
 width: 100%!important;
 }
 /* ハンバーガーメニューのボタン */
 #overlay-button {
 display: block!important;
 }
 /* いらない */
 #pagetitle {
 display: block!important;
 }
 /* pc用のナビゲーションを非表示にする */
 .pcnav {
 display: none!important;
 }
}

スクリーンショット

どうすればいいですか?

3Answer

@Madao_2306 posted at 2024-08-28

記述自体に大きな誤りはなさそうなので...下記が原因かな？と思います。
①クラスがHTMLとCSSで一致していない（よく自分もやってしまいます...）
②CSSの優先順位の兼ね合いでうまくスタイルがあたっていない

→なのでCSSが適切に当たっているか、改めてゆっくり見直してみるとよいかと思います！（ダイレクトな解決でなくてごめんなさい！）

簡単にですが似たようなレスポンシブの動きになりそうなもの作ったので、参考になれば幸いです！

.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }

      .header {
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 70px;
        align-items: center;
        padding-inline: 20px;
        margin-bottom: 40px;
        background-color: aqua;
        box-sizing: border-box;
      }

      .container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 40px;
      }

      #humburger {
        display: none;
      }
      .box {
        list-style: none;
        display: block;
        width: 100px;
        height: 100px;
        background-color: pink;
      }

      @media screen and (max-width: 480px) {
        #navigation {
          display: none;
        }
        #humburger {
          display: block;
        }

        .container {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <header class="header">
      <div>
        <nav id="navigation">
          <ul>
            <li>News</li>
            <li>Profile</li>
            <li>Contact</li>
          </ul>
        </nav>
      </div>
      <button id="humburger">三</button>
    </header>
    <main>
      <div>
        <ul class="container">
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
        </ul>
      </div>
    </main>
  </body>
</html>

<補足>
・ブラウザを縮小して確認だと、ブレイクポイント480pxにギリギリ達しないかもしれないのでGoogleの開発者ツールで画面幅を変えて確認するとわかりやすいかもです！(参考記事：https://sole-color-blog.com/blog/659/)
・②関連で...「!import」を使うと、最優先でその箇所のスタイルを上書きして当てることになるので、どのスタイルを当てたいのかが分からなくなるため、非推奨です。
→「!import」を使わずにCSSを整理して、どこにスタイルを当てたか確認するとネックのところが分かりそうな気がします！（参考記事：https://qiita.com/shimada_slj/items/f2da347639729b9c9e48）