CSS メディアクエリ：初心者向け完全ガイド
このガイドでは、CSS メディアクエリを使用して、さまざまな画面サイズや方向に合わせてレスポンシブな Web サイトを作成する方法について説明します。
1. CSS メディアクエリとは？
メディアクエリは CSS3 の強力な機能であり、画面サイズ、方向、解像度などのデバイス特性に基づいて異なるスタイルを適用できます。これにより、さまざまな画面サイズやデバイスに合わせて調整できるレスポンシブな Web デザインを作成できます。
2. メディアクエリの構文
メディアクエリは、@media ルール、メディアタイプ、およびメディア機能を使用して定義されます。基本的な構文は次のとおりです。
@media メディアタイプ and (メディア機能) {
/* 適用する CSS スタイル */
}
たとえば、画面の幅が 768 ピクセル以下の場合に特定のスタイルを適用するには、次のメディアクエリを使用できます。
@media screen and (max-width: 768px) {
/* 画面の幅が 768 ピクセル以下の場合に適用するスタイル */
}
3. 一般的なメディア機能
メディアクエリで使用できる一般的なメディア機能を以下に示します。
| メディア機能 | 説明 |
|---|---|
width |
画面の幅と一致します。 |
max-width |
画面の最大幅と一致します。 |
height |
画面の高さと一致します。 |
max-height |
画面の最大高さと一致します。 |
orientation |
画面の向き（横向きまたは縦向き）と一致します。 |
resolution |
画面の解像度と一致します。 |
4. ブレイクポイント
ブレイクポイントは、レイアウトが変更される特定の画面幅値です。たとえば、画面の幅が 768 ピクセル以下の場合は 1 列のレイアウトを使用し、それ以上の場合は 2 列のレイアウトを使用できます。
適切なブレイクポイントを選択するには、Web サイトのコンテンツとデザインを考慮する必要があります。一般的なブレイクポイントは次のとおりです。
- モバイル：768px 以下
- タブレット：768px ～ 1024px
- デスクトップ：1024px 以上
5. モバイルファースト vs デスクトップファースト
レスポンシブデザインには、モバイルファーストとデスクトップファーストの 2 つの主要なアプローチがあります。
モバイルファースト
モバイルファーストのアプローチでは、最初にモバイルデバイス向けにデザインし、次にメディアクエリを使用して、より大きな画面サイズにスタイルを追加します。このアプローチは、モバイルデバイスが普及しているため、ますます一般的になっています。
デスクトップファースト
デスクトップファーストのアプローチでは、最初にデスクトップデバイス向けにデザインし、次にメディアクエリを使用して、より小さな画面サイズにスタイルを調整します。
6. メディアクエリの例
さまざまな画面サイズに合わせてレスポンシブなレイアウトを作成するメディアクエリの例を以下に示します。
/* モバイルデバイスのデフォルトスタイル */
.container {
width: 100%;
}
/* タブレット以上の画面幅の場合 */
@media screen and (min-width: 768px) {
.container {
width: 75%;
}
}
/* デスクトップ以上の画面幅の場合 */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
7. メディアクエリのテスト
メディアクエリを作成したら、さまざまなブラウザやデバイスでテストすることが重要です。 Chrome 開発者ツールなどのブラウザーツールを使用して、さまざまな画面サイズをシミュレートできます。
8. まとめ
CSS メディアクエリは、レスポンシブな Web サイトを作成するための強力なツールです。メディアクエリを使用すると、さまざまな画面サイズやデバイスに合わせて調整できる Web サイトを作成できます。
メディアクエリに関するよくある質問
1. メディアクエリはすべてのブラウザでサポートされていますか？
最新のブラウザはすべてメディアクエリをサポートしています。ただし、Internet Explorer 8 以前などの古いブラウザは、メディアクエリをサポートしていません。
2. メディアクエリはどこに配置すればよいですか？
メディアクエリは、HTML ファイルの <head> セクション内、または外部 CSS ファイルに配置できます。
3. メディアクエリで JavaScript を使用できますか？
いいえ、メディアクエリは CSS の機能であり、JavaScript は使用できません。ただし、JavaScript を使用して、メディアクエリの状態に基づいて DOM を操作できます。