Q&A
コードは画像ではなく、コピーしたものを貼り付けてください。その時、マークダウンのコードブロック内にいれてください。
下記を参考に。
https://teratail.com/help/question-tips#questionTips3-5-1
前提・実現したいこと
メディアクエリ(@media screen)が適用されない原因を特定したい。
発生している問題・エラーメッセージ
HTMLとCSSを始めて1ヶ月の初心者です。
メディアクエリが適用されない理由が分からなくて困っています。
HTMLのheadタグ内にViewportが記載されていない事やCSS内の{}等の記述ミスの場合というのが原因としてよくあると思いますが、今回の場合それが原因ではないようなので、背景が青にならない原因が分かりません。
原因が分かる方いましたら教えて頂きたいです。よろしくお願いします。
該当のソースコード
<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>テストページ</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="div1"> <h1>タイトル</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>
#div1 { background-color: pink; } @media screen and(min-width: 500px) { #div1{ background-color: blue; } }
試したこと
CSS内のbackground-color:blueの個所に!importantを追加
補足情報（FW/ツールのバージョンなど）
テキストエディタはSublime Text3を使っています。
@media screen and の次にすぐに ( でなくて、半角スペース入れて ( にするとどうなりますか？
hatena19さん
ご指摘ありがとうございます。
質問方法申を熟知しておらず申し訳ありません、テラテイルに登録して直ぐに質問してしまいました。
今回の件は無事に解決したので、これを機に熟読します。
mari.rinnさん
ご指摘ありがとうございます。
@media screen and の次にすぐに半角スペースを入れてみたところ、メディアクエリが適用されて背景が青になりました。
半角スペースで区切らないと別々のコードとして認識されないという事ですね、勉強になりました。
解決されたなら良かったです。
その場合、自己解決ということで、コメント欄に自己解決した方法を書いて質問を閉じてください。よろしくお願いします。
解決できました、ご丁寧にありがとうございました。
回答1件
0
自己解決
CSSコードの「andと(min-width:500px)の間」に半角スペースを入れる事で解決しました。
ありがとうございました。
CSS
1 2@media screen and (min-width: 500px) { 3 4
投稿2021/04/04 07:09
総合スコア0
あなたの回答
tips
プレビュー
