メディアクエリ

メディアクエリとは、CSSの記述においてWebページのデザインを異なるデバイスや画面サイズに合わせて調整するための方法です。

簡単に言うと、メディアクエリを使うと、スマホ、タブレット、デスクトップなどの異なるデバイスで異なるスタイルを適用できます。

メディアクエリの特徴

メディアクエリはメディアタイプとメディア特性の2つのコンポーネントから成り立っています。

特定のメディア（表示デバイス）の種類に対してスタイルを適用するために使用される指定です。

Webサイトを表示するデバイスは様々で、画面、印刷、音声など、異なる環境で異なるスタイルを適用するためにメディアタイプを使用します。

all：	すべてのデバイスに適用されるスタイル
print：	印刷時やPDFなどで表示する際に適用されるスタイル印刷プレビュー時の表示や、ページの印刷用設定に使用されます。
screen：	コンピュータのスクリーン、タブレット、スマートフォンなどの画面に表示する際に適用されるスタイル

特定の条件に基づいてスタイルを適用するために使用されます。

特定の条件とは、デバイスの画面の幅、高さ、解像度、向きなどに基づいてスタイルを変更できます。

width：	ビューポートの幅に基づき、特定のスタイルを適用
height：	ビューポートの高さを基準に、スタイリングを決定することが可能
aspect-ratio：	デバイスの画面の縦横比により、デザインを調整
orientation：	デバイスが縦向き（portrait）か横向き（landscape）かに応じて、スタイルを変更
resolution：	画面の解像度に応じた細かなスタイルの設定が可能

CSSファイルにメディアクエリを記述する場合、@mediaルールを使って条件を指定します。

画面幅が480px以下のデバイスに対してスタイルを記述する場合

@media screen and (max-width: 480px) {
    /* 480px以下のディスプレイ用のスタイルを記述 */
    body {
        background-color: #000;
    }
}

画面幅が769px以下のデバイスに対してスタイルを記述する場合

@media screen and (min-width: 769px) {
    /* 769px以上のディスプレイ用のスタイルを記述 */
    body {
        background-color: #000;
    }
}

以上が、「メディアクエリ」についての説明でした。

次のステップで、「Chromeの開発モード」について説明していきます。

コーディング実践

全 7 動画

Sassコーディング