Businessman marking on calendar for an appointment
スマートフォンやタブレット、ノートパソコンなど、ユーザーがWebサイトを閲覧するデバイスは多様化しています。こうした様々な画面サイズに対応するために欠かせないのが「メディアクエリ」です。CSSのメディアクエリを使うことで、デバイスごとに異なるスタイルを適用し、ユーザビリティの高いレスポンシブデザインを実現できます。この記事では、メディアクエリの基本的な構文から実践的なサンプルコードまで、丁寧に解説していきます。
CSSメディアクエリとは、画面サイズやデバイスの種類に応じて、異なるスタイルを適用できる機能です。Webページを柔軟に表示させるためのレスポンシブデザインの根幹をなす技術です。
たとえば、「画面が768px以下ならスマホ用のスタイルを適用する」というような制御が可能です。メディアクエリを使えば、1つのHTMLで複数のデバイスに対応できます。
メディアクエリの基本的な記述方法は以下の通りです。
@media 条件 {
/* 条件が一致したときに適用されるCSS */
}
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
上記のコードは、画面の幅が600px以下のときに背景色をライトブルーにするという意味です。
@media screen and (max-width: 768px) {
.container {
padding: 10px;
font-size: 14px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.container {
padding: 20px;
font-size: 16px;
}
}
@media screen and (min-width: 1025px) {
.container {
padding: 40px;
font-size: 18px;
}
}
メディアクエリには、メディアタイプを指定することができます。
| メディアタイプ | 説明 |
|---|---|
| all | すべてのデバイスに適用 |
| screen | スクリーン（モニター）用 |
| 印刷用 | |
| speech | 音声読み上げ用 |
例：
@media print {
body {
color: black;
background: none;
}
}
メディアクエリでは、以下のような**特性（フィーチャー）**を条件として使えます。
width：ビューポートの幅height：ビューポートの高さorientation：縦長か横長か（portrait or landscape）resolution：解像度（dpi, dppx）@media screen and (orientation: portrait) {
.header {
height: 100px;
}
}
メディアクエリはCSSファイル内ならどこでも書けますが、外部スタイルシートで管理するのが一般的です。たとえば：
<link rel="stylesheet" href="style.css">
外部CSS内に以下のように記述します。
/* PC向けの基本スタイル */
body {
font-size: 18px;
}
/* スマホ向けに上書き */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
以下は、ナビゲーションメニューがスマホでは縦並びになる実装例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアクエリサンプル</title>
<style>
.nav {
display: flex;
gap: 20px;
background: #333;
color: white;
padding: 10px;
}
@media screen and (max-width: 768px) {
.nav {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<nav class="nav">
<div>ホーム</div>
<div>サービス</div>
<div>お問い合わせ</div>
</nav>
</body>
</html>
min-widthで段階的に広げる設計が一般的です。メディアクエリは、レスポンシブデザインに不可欠な技術です。基本構文やよく使われる例を理解し、実際のプロジェクトに活用することで、どんな画面サイズにも対応した美しいデザインを実現できます。
まずは「@media screen and (max-width: 768px)」のようなシンプルな書き方から始め、徐々に複数条件や特性の使い方に慣れていきましょう。メディアクエリを自在に使いこなせれば、Webデザインの幅が一気に広がります。