Q&A
メディアクエリでスマホサイズのCSSを適用できるようにしたい
前提
HTML/CSSでポートフォリオを作成しています。
レスポンシブ対応するためメディアクエリでスマホサイズのCSSを記載しており、メディアクエリは読み込み済みのstyle.cssシートに記載してます。
デベロッパーツールで検証してもPCサイズが適用されたままでスマホサイズのメディアクエリで記載したCSSが取り消し線で表示されてました。
下記の画像はクラス.header-titleで記載したフォントサイズをPC版とスマホ版で異なるように記載したつもりのものです。
発生している問題・エラーメッセージ
エラーメッセージ
### 該当のソースコード // HTML <header> <div class="header"> <div class="header-logo"> <img class="header-img" src="./image/usagi.png" alt="logo-image"> <a href="#"><h1 class="header-title">My Portfolio</h1></a> </div> </div> ...etc </header> //CSS //PC header { width: 100%; height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; .header-logo { display: flex; align-items: center; margin-left: 10px; .header-img { width: 55px; height: 55px; margin-left: 2px; border: 2px solid #000; border-radius: 50%; } .header-title { margin-left: 10px; margin-bottom: 2px; font-size: 50px; } ... //smartpohone @media (max-width: 599px) { header { width: 93%; height: 60px; top: 0; right: 0; left: 0; z-index: 1; .header-title { font-size: 22px; } } } ### 試したこと メディアクエリが効かないときに確認することなどググって以下を確認・対応済みの状態です。 ①{}の抜け落ちがないか? →確認済み、抜け落ちがあるとエラーが出ますが現状そのようなエラーは無し ②viewportの記述はあるかどうか → <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0">と記入してます ③HTML側で読み込まれていない →試しにメディアクエリ内にbodyのbackground-colorに対して色を当てたところ、それは反映されました。 ### 補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/08 06:48