[CSS] レスポンシブデザインにおいて重要な役割を果たす「メディアクエリ」とは

MARKLEAPS

2024.12.04

レスポンシブデザインにおいて重要な役割を果たす「メディアクエリ」について解説します。

メディアクエリとは

メディアクエリは、デバイスの種類や画面サイズなどの条件に応じて、特定のCSSを適用できる機能です。
この機能を使用することで、以下のような対応が可能になります。

・画面サイズに応じたレイアウトの変更
・フォントサイズの調整
・コンテンツの表示・非表示

これにより、ユーザーの利用環境に最適化されたデザインを提供できます。

メディアクエリの書き方

メディアクエリは主に以下の3つの方法で記述できます。
1．HTML内のlink要素でmedia属性を指定する
2．CSS内で@mediaを使用する
3．CSS内で@importを使用する

以下、それぞれの方法を具体例とともに解説します。

HTML内のlink要素でmedia属性を指定する

外部CSSファイルを読み込む際、特定の条件下でのみ適用する方法です。

<link rel="stylesheet" href="読み込むCSSのパス" media="メディアタイプ and (条件)">

1	<link rel="stylesheet" href="読み込むCSSのパス" media="メディアタイプ and (条件)">

例: 画面幅が767px以下の場合にsmall.cssを適用する

<link rel="stylesheet" href="small.css" media="screen and (max-width: 767px)">

1	<link rel="stylesheet" href="small.css" media="screen and (max-width: 767px)">

CSS内で@mediaを使用する

CSSファイル内で直接メディアクエリを記述する方法です。

@media メディアタイプ and (条件) {
    /* 適用させたいCSS */
}

@media メディアタイプ and (条件) {

/* 適用させたいCSS */

}

例: 画面幅が767px以下の場合にフォントサイズや余白を調整

@media screen and (max-width: 767px) {
    body {
        font-size: 15px;
        margin: 10px;
    }
}

@media screen and (max-width: 767px) {

body {

font-size: 15px;

margin: 10px;

}

CSS内で@importを使用する

外部CSSを条件付きで取り込む方法です。

@import url("読み込むCSSのパス") メディアタイプ and (条件);

1	@import url("読み込むCSSのパス") メディアタイプ and (条件);

例: 画面幅が767px以下の場合にsmall.cssを取り込む

@import url("small.css") screen and (max-width: 767px);

1	@import url("small.css") screen and (max-width: 767px);

メディアクエリを使用する際のポイント

HTML内meta要素へのviewport指定が必要

レスポンシブデザインでは、<head>内に表示領域を指定するmeta要素を記述する必要があります。

例:

<meta name="viewport" content="width=device-width, initial-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1">

メディアタイプの種類

メディアクエリで使用できる主なメディアタイプは以下の通りです。

all : 全てのデバイス（デフォルト値）
screen : スクリーンデバイス（PC、タブレット、スマートフォンなど）
print : 印刷デバイス（プリンターや印刷プレビュー）
speech : 音声出力デバイス

「モバイルファースト」と「デスクトップファースト」

メディアクエリを使用する際は、「モバイルファースト」または「デスクトップファースト」のどちらかのアプローチを選びます。

モバイルファースト: 初期スタイルをモバイル向けに記述し、大きな画面向けに上書きするスタイル
デスクトップファースト: 初期スタイルをデスクトップ向けに記述し、小さな画面向けに上書きするスタイル

「モバイルファースト」と「デスクトップファースト」については、こちらの記事で詳しく解説しています。

メディアクエリを正しく活用することで、あらゆるデバイスで快適なユーザー体験を提供できます。
初心者の方はまず@mediaの使用から始め、慣れてきたら他の方法も試してみましょう。
また、モバイルファーストやデスクトップファーストといった設計方針を明確にしておくことで、メンテナンス性の高いCSSを構築できます。

CSS