【CSS】メディアクエリ(@media)とは？ | 最小値と最大値の指定を初心者向けにわかりやすく使い方を解説

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、メディアクエリ(@media)の最小値と最大値の指定を初心者向けにわかりやすく使い方を解説します。

1 メディアクエリとは？
2 CSSにおけるメディアクエリの使い方
3 メディアクエリ(@media)の最小値と最大値の指定をするSampleCode
4 おすすめ書籍(HTML&CSS編)
5 プログラミング学習・エンジニア転職関連の情報
6 Twitterやってます！Follow Me！
7 参考・引用
8 最近の投稿

メディアクエリとは？

メディアクエリとは何か？

次の説明がわかりやすいので、引用します。

メディアクエリとは、現在ページを開いているデバイス（デスクトップ, スマホ, タブレットなど）や、

画面幅、画面の向きなどを指定する記述のことです。

デスクトップの画面や、スマホなどデバイスの画面幅によってページに適用するスタイルを変更するときに使用します。

レスポンシブ設計では欠かせない記述になっています。

なお、指定するデバイスの種類をメディアタイプ、画面の向きなどをメディア特性と呼びます。
引用元: 【CSS】メディアクエリ(@media)とは何か？使い方を実例で解説

上記に記載があるように、デバイスの画面幅によってページに適用するスタイルを変更したい時に、

メディアクエリ(@media)を使います。

レスポンシブデザインでは、必須の技術になります！

CSSにおけるメディアクエリの使い方

メディアクエリを使用するためにはHTMLのheadタグ内に以下のビューポートを記述する必要があります。

<!-- メディアクエリを使用するために、必要な記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

この記述がないとメディアクエリが反応しないので注意が必要です。

CSSでメディアクエリを設定する

CSSでメディアクエリを設定する際の基本構文は、次のような構造をしています。

@media に続いて、メディアタイプの指定, 論理演算子, メディア特性の指定(条件値の指定) をすることで、

特定の条件の時に、Styleを適用するといった実装をすることができます。

@media [メディアタイプ] [論理演算子] [(メディア特性: 値)]{
  セレクタ{ 処理 }
}

メディアタイプの一覧

メディアタイプとその内容を次の表の通りです。

メディアタイプ	内容
screen	ディスプレイ（スマホ、PC、デスクトップなど）
print	印刷プレビューモード
speech	音声合成
all	すべての端末

【メディアタイプとその内容】

なお、メディアタイプの指定が無い場合は「all」扱いでメディアクエリ内の処理が適用されます。

レスポンシブ対応するときのメディアクエリは基本的に「screen」を選択します。

論理演算子の一覧

メディアクエリの論理演算子には以下の４つが用意されています。

演算子	内容
and	複数のメディア特性を一つにまとめる
,	複数のメディアクエリを連結する（orのような挙動）
not	メディアクエリを否定する
only	クエリすべてが一致した場合のみスタイルを適用する

【論理演算子の一覧】

レスポンシブ対応するときに使う論理演算子は「and」を使うのが一般的です。

メディア特性の一覧

メディア特性は、カッコ内に記述する条件文のような役割のものです。

数あるメディア特性の中でも、レスポンシブ対応するときには「min-width」と「max-width」を使用することが多いです。

メディア特性	内容	min-/max-の指定
width	表示幅を指定する	✔︎
max-width	最大幅を指定する（この画面幅以下ならスタイルを適用）
min-width	最少幅を指定する（この画面幅以上ならスタイルを適用）
height	表示高さを指定する	✔︎
orientation	画面の向き。値は、縦長ならportrait、横長ならlandscapeとなる
resolution	解像度。値はdpiで指定	✔︎
aspect-ratio	アスペクト比。値は、横/縦で指定。	✔︎

【メディア特性の一覧】

HTML&CSSの「ブレイクポイント」とは？

メディア特性であるmax-widthやmin-widthで指定した画面幅のように、適用されるスタイルが切り替わるポイントを

ブレイクポイント(breakpoint)と呼びます。

例えば、この後紹介するSampleCodeでは「767px」と「768px」がブレイクポイントになっています。

メディアクエリ(@media)の最小値と最大値の指定をするSampleCode

SampleCodeの全文とHTMLの実行イメージを掲載します。

まずは『ブレイクポイント①: 768px』では、

min-widthによって768pxが最小値(768px 以上・から)に設定しています。

なので、画面サイズ:768px 以上からは、次のようなStyleになります。

まずは『ブレイクポイント②: 767px』では、

max-widthによって767pxが最大値(767px 以下・まで)に設定しています。

なので、画面サイズ:767px 以下までは、次のようなStyleになります。

上記のSampleCodeは次のとおりです。

<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- メディアクエリを使用するために、必要な記述 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <style>

        /* Media-Sizeに関係なく適用させるCSS */
        .box1 {
            width:200px;
            height:100px;
        }
        
        .box2 {
            width:200px;
            height:100px;
        }
        
        .box3 {
            width:200px;
            height:100px;
        }
        
        /* ブレイクポイント①: 768px */
        /*　画面サイズ:768px からは、ここのStyleを適用する => 768pxが最小値(768px 以上)　*/
　　　　　/* PC-Tablet-Size */
        @media screen and (min-width:768px) {
            .box1 {
                background-color: red;
            }
        
            .box2 {
                background-color: blue;
            }
        
            .box3 {
                background-color: chartreuse;
            }
                
        }
        
        /* ブレイクポイント②: 767px */
        /*　画面サイズ:767px までは、ここのStyleを適用する => 767pxが最大値(767px 以下)　*/
        /* スマホサイズ */
        @media screen and (max-width:767px) {
        
            .box1 {
                background-color: orange;
            }
        
            .box2 {
                background-color: aquamarine;
            }
        
            .box3 {
                background-color: gray;
            }
        
        }
        
        </style>
</head>
<body>

    <h1>MediaQuery-Test🔥</h1>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
        
</body>
</html>