Q&A
コードのマークダウンが一部出来てないので、調整願います。
参考：https://teratail.com/questions/238564
そこがご自身のコードと同じでないと、こちらで再現できないのでアドバイスが難しくなります。
前提・実現したいこと
レスポンシブデザインを実行したい
発生している問題・エラーメッセージ
html,cssファイルを分けて書いているのですが、viewportもcssも反映されているのに、メディアクエリは反映されず、デベロッパーツールにも記載されていない
### HTML <!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.0"> <meta name="description" content="蒼乃建設"> <title>蒼乃建設</title> <!-- CSS --> <link href="css/styles.css" rel="stylesheet"> <!-- リセットCSS --> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> </head> <body> <div class="wrap"> <div id="home" class="big-bg"> <header class="page-header wrapper"> <h1 class="logo"><img class="logo" src="img/header_logo.png" alt="蒼乃建設" width="139px" height="60px"></h1> <nav> <ul class="main-nav"> <li><a href="#">企業理念</a></li> <li><a href="#">施工事例</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> </body> </html> ```ここに言語を入力 ```CSS @charset "UTF-8"; /* 共通部分 */ html { font-size: 100%; } /* フォント、行の高さ、色 */ img{ max-width: 100%; } /* header */ a{ text-decoration: none; color: black; } .page-header{ display: flex; justify-content: space-between; } .wrapper{ max-width: 1185px; margin-left: 113px; padding: 0 4%; } .logo{ margin-top: 15px; } .main-nav{ display: flex; font-size: 18px; text-transform: uppercase; list-style: none; margin-top: 47px; font-weight: 500; } .main-nav li{ margin-left: 60px; font-family:"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho Light", YuMincho, "Yu Mincho", 游明朝体, sans-serif; } .main-nav a{ color: black; } .main-nav a:hover{ color: #0bd; } .big-bg{ background-image: url(../img/download.png); background-repeat: no-repeat; background-size: cover; background-position:center; min-height: 80vh; width: 100%; } /* smartphone */ @media screen and (max-width:600px) { .wrapper{ padding: 0px; margin-left: 0px; justify-content: flex-start; } }
試したこと
andと（）の間のスペースや記述を統合
補足情報（FW/ツールのバージョンなど）
Visual stadio code、GoogleCromeを使っております。
＞max-media
ってどこから持ってきました？私が知らないだけの可能性もあるし、申し訳ないですが、見たことがないです。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries
max-widthの誤入力です。直しましたが、やはり記述されません。
コードのマークダウンを行いました
１点細かくて申し訳ないですが
### HTML
など、実際のコードにない（と勝手に私は思っています。あったらごめんなさい）情報は除いてもらった方が確認しやすいです。
回答1件
0
例えばbackground:red;を入れてブラウザ幅狭めていくとちゃんと背景赤くなっているので「メディアクエリが間違っている」わけではないと思います。
気になる点は、自身が読み込まれているcssの後にリセットCSSらしきものを読み込ませているところですね。
どんな指定をしたところで基本は後勝ちなので、リセットCSSの影響はかなり受けます。
投稿2021/02/28 09:32
編集2021/02/28 11:22総合スコア80875
あなたの回答
tips
プレビュー
