【初心者向け】CSSのmedia queriesの使い方

公開日: 2021.10.25
更新日: 2024.01.03
CSSのmedia queriesの使い方

webサイトに訪問したユーザのデバイスサイズや環境毎に表示形式を変えたい

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

  • cssでmedia queriesの使い方が分かる

昨今、webサイトを訪問するユーザが使用するデバイスはPC、スマホ、タブレット等非常に多岐にわたります。せっかくwebサイトをデザインしても、PCのユーザにしか綺麗に表示されないともったいないですよね。

是非本記事をお読みいただき、理解を深めてください。

cssのmedia queriesとは

cssのmedia queriesを使用することで、「このブラウザとデバイスの環境の時には、このデザインにする」というように、環境ごとに表示するデザイン形式を変えることができます。

これだけだとイメージが湧きづらいと思うので、早速次にコードを見ていきましょう。

cssのmedia queriesの使い方

まず、cssのmedia queriesの基本を紹介します。

css
@media media-type and (media-feature-rule) {
/* CSS 規則をここに記載 */
}

環境の条件を「media-type」と「media-feature-rule」に記載し、その中に適用したいcss規則を書けば完成です。

まだイメージがつかないと思うので、具体例を見ていきましょう。。

css
@media screen and (max-width: 500px) {
body {
color: green;
}
}

上記の例では、「ビューポートが500pxより狭い場合には緑色にする」という設定をしています。

今回は上記の1つの例だけですが、media queriesを複数繋げて、「500pxより狭い場合には緑、500pxより広い場合には薄い緑」とパターンに応じたcssの設定が可能です。

まとめ

いかがでしたでしょうか。今回は初心者向けなので基本的なmedia queriesの書き方を紹介しました。是非本記事をきっかけに、各ユーザの環境に適したwebサイト設計を進めてください。

関連記事

  • CSSで文字の均等割り付けをする方法を徹底解説

    CSSで文字の均等割り付けをする方法を徹底解説

    公開日: 2022.01.31
    更新日: 2024.01.06
  • 頻出するタグとプロパティを初心者向けに解説

    【HTML/CSS】頻出するタグとプロパティを初心者向けに解説

    公開日: 2022.02.17
    更新日: 2024.01.03
  • Railsのdeviseを用いてログイン認証を実装する方法を解説

    【Rails入門説明書】form_forについて解説

    公開日: 2018.10.31
    更新日: 2024.01.04
  • 「Rails」入門の説明書

    【Rails入門説明書】helperについて解説

    公開日: 2019.01.01
    更新日: 2024.01.11
  • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    © 2025 WEBCAMP MEDIA Powered by AFFINGER5