メディアクエリ（Media Queries）とは？
メディアクエリは、CSSの機能で、異なるデバイスや画面のサイズに応じてスタイルを適用するために使います。これにより、レスポンシブデザイン（画面サイズに応じた自動調整がされるデザイン）を実現することができます。
たとえば、デスクトップでは大きなレイアウト、モバイルでは縦長のレイアウトに切り替えるような場合にメディアクエリが活躍します。
メディアクエリの基本構文
メディアクエリの基本的な構文は次の通りです：
@media メディアタイプ and (条件) {
/* ここにCSSを書きます */
}
@media: メディアクエリを定義するキーワードです。
メディアタイプ: どのデバイスをターゲットにするか（例: screenは画面表示用）。
条件: スタイルを適用する条件（例えば、幅が特定のサイズ以上や以下の場合）。
主なメディアクエリの種類
- 画面の幅に基づくメディアクエリ
@media screen and (max-width: 768px) {
/* 画面幅が768px以下の場合に適用されるスタイル */
body {
background-color: lightblue;
}
}
- max-width: 画面の最大幅を指定。
- min-width: 画面の最小幅を指定。
例えば、上記の例では、画面幅が768px以下のデバイス（主にタブレットやモバイル）に対して、背景色をlightblueに変更しています。
- 画面の向き（縦横）に基づくメディアクエリ
@media screen and (orientation: portrait) {
/* 縦向きの画面の場合に適用されるスタイル */
body {
font-size: 16px;
}
}
portrait: 画面が縦向きの場合に適用。
landscape: 画面が横向きの場合に適用。
レスポンシブデザインでの活用方法
レスポンシブデザインでは、フレキシブルなレイアウトとメディアクエリを組み合わせて、画面サイズに応じた表示を行います。たとえば、以下のように段階的にレイアウトを変更することができます。
/* デスクトップ用 */
@media screen and (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
/* タブレット用 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* モバイル用 */
@media screen and (max-width: 767px) {
.container {
display: block;
}
}
このコードでは、デスクトップサイズでは3列、タブレットサイズでは2列、モバイルサイズでは1列のレイアウトに変更します。
メディアクエリのベストプラクティス
- モバイルファーストアプローチ: 最初にモバイル用のスタイルを書き、その後メディアクエリでデスクトップ用のスタイルを追加する方法です。これにより、モバイルユーザーに優れたエクスペリエンスを提供できます。
- メディアクエリを適切に組み合わせる: 幅だけでなく、画面の向きや解像度も条件に含めることで、より精度の高いレスポンシブデザインが可能になります。
- 最小限のブレークポイント: 画面サイズの違いに対して、過剰に多くのブレークポイントを作ることは避けるべきです。主要なサイズに絞り、必要最小限の調整にとどめるのがベストです。
まとめ
メディアクエリは、レスポンシブデザインに欠かせない強力なツールです。デバイスや画面サイズに応じたスタイルを適用することで、ユーザーがどのデバイスでも快適にサイトを閲覧できるように調整できます。モバイルファーストアプローチを活用し、メディアクエリを適切に使いこなすことで、より多様なデバイスに対応するウェブサイトを作成しましょう。