CSSでスマホ・タブレット向けデザインを簡単作成！メディアクエリの使い方とサンプルコード
CSSにおける「@media screen and (max-width: 1024px)」の意味と使い方
このメディアクエリの場合、以下の意味になります。
- @media screen: 画面表示用のスタイルを定義します。印刷用やスクリーンリーダー用のスタイルとは区別されます。
- and (max-width: 1024px): 画面幅が 1024px以下 の場合に、以下のスタイルを適用します。
つまり、このメディアクエリは、画面幅が1024px以下のデバイス（スマートフォンやタブレットなど）で閲覧されている場合にのみ、以下のスタイルを適用することを意味します。
例：
/* 通常のスタイル */
body {
font-size: 16px;
line-height: 1.5;
}
/* 画面幅が1024px以下の場合のスタイル */
@media screen and (max-width: 1024px) {
body {
font-size: 14px;
line-height: 1.4;
}
}
上記の場合、画面幅が1024px以上のデバイスでは、body 要素のフォントサイズは16px、行高は1.5になりますが、画面幅が1024px以下のデバイスでは、フォントサイズは14px、行高は1.4になります。
メディアクエリは、Webページを様々なデバイスで閲覧できるようにするために非常に重要な機能です。 上記の例のように、画面サイズに合わせてフォントサイズや行高を変更したり、画像のサイズを変更したり、レイアウトを調整したりすることができます。
メディアクエリは、以下の構文で記述します。
@media mediatype and (mediafeature) {
CSS-code;
}
- mediatype: メディアタイプを指定します。screen は画面表示用、print は印刷用、speech はスクリーンリーダー用などを指定します。
- mediafeature: メディア機能を指定します。max-width、min-width、orientation、resolution などがあります。
- CSS-code: メディアクエリが適用される場合に適用されるCSSコードを記述します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メディアクエリサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
<img src="image.jpg" alt="画像">
</body>
</html>
CSS
/* 通常のスタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
/* 画面幅が1024px以下の場合のスタイル */
@media screen and (max-width: 1024px) {
body {
font-size: 14px;
}
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
img {
max-width: 80%;
}
}
このコードでは、以下のことが行われています。
- 通常スタイル:
- フォントファミリーを Arial または等幅フォントに設定します。
- ボディの余白とパディングを設定します。
- 見出し（
h1）のフォントサイズを24pxに設定します。 - 本文（
p）のフォントサイズを16px、行高を1.5に設定します。 - 画像（
img）の最大幅を100%、高さを自動に設定します。
- 画面幅が1024px以下の場合のスタイル:
- 画像の最大幅を80%に設定します。
このコードを実行すると、画面幅が1024px以上のデバイスでは、通常のスタイルが適用されます。一方、画面幅が1024px以下のデバイスでは、メディアクエリで定義されたスタイルが適用されます。
メディアクエリ以外にも、画面サイズや解像度に応じてWebページのデザインを変更する方法はいくつかあります。
BootstrapやFoundationなどのCSSフレームワークには、メディアクエリを含むレスポンシブデザイン用のツールが組み込まれています。これらのフレームワークを使用すると、メディアクエリを記述することなく、簡単にレスポンシブなWebページを作成することができます。
JavaScriptを使用して、画面サイズや解像度を検出し、それに応じてスタイルを動的に変更することもできます。ただし、この方法には、メディアクエリを使用するよりも複雑なコーディングが必要となります。
サーバーサイドスクリプティングを使用して、ユーザーエージェント情報に基づいて異なるスタイルシートを配信することもできます。ただし、この方法には、サーバー側で追加の処理が必要となります。
それぞれの方法には長所と短所があるため、要件に応じて最適な方法を選択する必要があります。
以下に、各方法の詳細と、それぞれを使用する利点と欠点の要約を示します。
| **方法 | 説明 | 利点 | 欠点** |
|---|---|---|---|
| メディアクエリ | CSS内にメディアクエリを記述して、画面サイズや解像度に応じてスタイルを適用します。 | シンプルで使いやすい | 複雑なレイアウトには不向き |
| CSSフレームワーク | BootstrapやFoundationなどのCSSフレームワークを使用すると、メディアクエリを含むレスポンシブデザイン用のツールが組み込まれています。 | 簡単で迅速にレスポンシブなWebページを作成できる | フレームワークに依存する必要がある |
| JavaScript | JavaScriptを使用して、画面サイズや解像度を検出し、それに応じてスタイルを動的に変更します。 | 柔軟性が高い | 複雑なコーディングが必要 |
| サーバーサイドスクリプティング | サーバーサイドスクリプティングを使用して、ユーザーエージェント情報に基づいて異なるスタイルシートを配信します。 | すべてのデバイスでユーザーエージェント情報が正確であるとは限らない | サーバー側で追加の処理が必要 |
メディアクエリは、画面サイズや解像度に応じてWebページのデザインを簡単に変更できる強力なツールです。ただし、複雑なレイアウトには不向きな場合があります。そのような場合は、CSSフレームワーク、JavaScript、またはサーバーサイドスクリプティングなどの他の方法を検討する必要があります。
css media-queries
