© 2025 Mensapo-web , All Rights Reserved.

実際のやり取りの一部

  • こんにちは。
    CSSでメディアクエリを書いてみたのですが上手く反映しません。
    書き方が合っているかを見ていただきたいです。

  • こんにちは。
    メディアクエリの書き方ですね。
    それでは、ソースコードかソースを確認できるURLを共有いただけますか?
    また、CSSのファイル名も共有をお願いします。

  • はい。
    少々お待ちください
    [URL]

    ファイル名はstyle.cssです

  • 共有ありがとうございます。
    確認いたしますので少々お待ちください。

  • 内容を確認しました。
    基本的な考え方は合っていますが惜しいですね!

    メディアクエリはブレイクポイント毎に書く必要があります。
    例)
    .test {
    color: yellow;
    }
    @media screen and (min-width:600px) {
    .test {
    color: black;
    }
    }
    @media screen and (min-width:1025px) {
    .test {
    color: pink;
    }
    }

    この場合は、600px以下はblack。1025px以上はピンク。デフォルトは黄色となるメディアクエリの書き方です。

※実際のやり取りをもとに構成しています。一部、個人情報などに配慮し内容を編集・省略しています。

解決までの所要時間・難易度

所要時間:
10分程度
難易度:

対応範囲カテゴリ

メンサポからの一言

メディアクエリは、レスポンシブ対応を行う上で必須事項です! 独学でここまで出来るようになったのは素晴らしいので、もっともっと突き詰めて行って欲しいですね★ メディアクエリは、闇雲に書くとこんがらがってしまうので、一つづつ整理しながら書いていくと良いでしょう! 慣れてくればさらさら~って書けるようになりますよ!

現場のプロにオンラインでいつでも相談

そのWebの悩み、いますぐ聞ける

1回だけでもOK
すぐ聞ける、すぐ解決!

チャットやMeetで、手軽に相談。小さな疑問も、すぐにプロが解決。法人向けにはメールやZoom対応も可能です。

経験豊富なデザイナーや
エンジニアが直接対応

現場経験豊富なプロが、実務に基づいたリアルなアドバイスを提供。画面共有によるサポートも可能です。

フリーランス、法人にも対応の
柔軟なサポート体制

スポット相談から月額サポートまで柔軟に対応。継続相談や法人向けの優先対応もご用意しています。

今すぐ無料で登録する

© 2025 Mensapo - web , All Rights Reserved.