HTML/CSSでメディアクエリを設定したのに効かない場合、記述の文法ミスやスペース不足などが原因であることが多いです。この記事では、よくある間違いを指摘し、正しい書き方と注意点を解説します。
スペースと記号の確認
ご質問のコードでは、「＠media screen and(orientation:landscape) and (max-width:1280px)」と書かれていますが、「and」と括弧の間にスペースが必要です。正しくは次の通りです。
@media screen and (orientation: landscape) and (max-width: 1280px) {このようにスペースを入れることで、ブラウザが正しく条件を認識します。
プロパティの終わりにセミコロンを付ける
CSSでは各プロパティの最後にセミコロン「;」が必要です。ご質問のコードではセミコロンが抜けています。
p { margin-top: 300px; margin-right: auto; margin-left: 900px;}これを修正することで、ブラウザが各プロパティを正しく解釈し、適用されるようになります。
メディアクエリの条件を確認
orientationやmax-widthなどの条件が正しいかも確認しましょう。例えば、ブラウザの幅が1280px以上の場合はmax-width: 1280pxは適用されません。また、画面の向きがportraitの場合はorientation: landscapeも適用されません。
開発中はブラウザのデベロッパーツールで、メディアクエリが適用されているか確認すると便利です。
まとめ
メディアクエリが効かない主な原因は、スペース不足、括弧の使い方、セミコロンの欠如、条件の誤りです。正しい書き方は以下の通りです。
@media screen and (orientation: landscape) and (max-width: 1280px) { p { margin-top: 300px; margin-right: auto; margin-left: 900px; }}この構文に修正すれば、メディアクエリが期待通りに適用されます。
コメント