![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
レスポンシブデザインにおいて重要な役割を果たす「メディアクエリ」について解説します。
メディアクエリとは
メディアクエリは、デバイスの種類や画面サイズなどの条件に応じて、特定のCSSを適用できる機能です。この機能を使用することで、以下のような対応が可能になります。
- 画面サイズに応じたレイアウトの変更
- フォントサイズの調整
- コンテンツの表示・非表示
これにより、ユーザーの利用環境に最適化されたデザインを提供できます。
メディアクエリの書き方
メディアクエリは主に以下の3つの方法で記述できます。
- CSS内で@mediaを使用する
- HTML内のlink要素でmedia属性を指定する
- CSS内で@importを使用する
以下、それぞれの方法を具体例とともに解説します。
CSS内で@mediaを使用する
CSSファイル内で直接メディアクエリを記述する方法です。
|
1 2 3 |
@media メディアタイプ and (条件) { /* 適用させたいCSS */ } |
例: 画面幅が767px以下の場合にフォントサイズや余白を調整
|
1 2 3 4 5 6 |
@media screen and (max-width: 767px) { body { font-size: 15px; margin: 10px; } } |
HTML内のlink要素でmedia属性を指定する
外部CSSファイルを読み込む際、特定の条件下でのみ適用する方法です。
|
1 |
<link rel="stylesheet" href="読み込むCSSのパス" media="メディアタイプ and (条件)"> |
例: 画面幅が767px以下の場合にsmall.cssを適用する
|
1 |
<link rel="stylesheet" href="small.css" media="screen and (max-width: 767px)"> |
CSS内で@importを使用する
外部CSSを条件付きで取り込む方法です。
|
1 |
@import url("読み込むCSSのパス") メディアタイプ and (条件); |
例: 画面幅が767px以下の場合にsmall.cssを取り込む
|
1 |
@import url("small.css") screen and (max-width: 767px); |
メディアクエリを使用する際のポイント
HTML内meta要素へのviewport指定が必要
レスポンシブデザインでは、<head>内に表示領域を指定するmeta要素を記述する必要があります。
例:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
メディアタイプの種類
メディアクエリで使用できる主なメディアタイプは以下の通りです。
- all : 全てのデバイス（デフォルト値）
- screen : スクリーンデバイス（PC、タブレット、スマートフォンなど）
- print : 印刷デバイス（プリンターや印刷プレビュー）
- speech : 音声出力デバイス
「モバイルファースト」と「デスクトップファースト」
メディアクエリを使用する際は、以下のどちらかのアプローチを選びます。
- モバイルファースト
小さな画面サイズ向けのスタイルを最初に定義し、画面が大きくなるにつれてスタイルを追加・上書きしていく手法 - デスクトップファースト
大きな画面サイズ向けのスタイルを最初に定義し、画面が小さくなるにつれてスタイルを追加・上書きしていく手法
モバイルファースト と デスクトップファースト については、こちらの記事で詳しく解説しています。
まとめ
メディアクエリを正しく活用することで、あらゆるデバイスで快適なユーザー体験を提供できます。また、モバイルファーストやデスクトップファーストといった設計方針を明確にしておくことで、メンテナンス性の高いCSSを構築できます。