「スマホで見るとレイアウトが崩れる……」
「パソコンとスマホで表示を変えたい」
Webサイトを作り始めると、こんな壁にぶつかることがあります。
そのときに使う技術が、CSSのメディアクエリです。
この記事では、メディアクエリの基本的な仕組みから書き方、よく使うパターン、そして注意点まで、初心者の方でもわかるようにていねいに解説します。
記事の最後にはSCSSでの書き方にも触れているので、ぜひ最後まで読んでみてください。
そもそもメディアクエリって何？
メディアクエリとは、「画面の幅や種類に応じて、適用するCSSを切り替える仕組み」のことです。
たとえばスマホの画面とパソコンの画面では、サイズがまったく違いますよね。
同じCSSをそのまま両方に当てると、文字が小さすぎたり、横スクロールが出てしまったりします。
メディアクエリを使うと、
- 画面幅が600px以下のとき（＝スマホ）はこのCSSを適用する
- 画面幅が600px以上のとき（＝タブレット・PC）はこのCSSを適用する
というように、デバイスに合わせてスタイルを出し分けることができます。
これがレスポンシブデザインの基本的な考え方です。
簡単にいうと、PC用デザインとスマホ用デザインを同時に設定するみたいなこと。
基本的な書き方
メディアクエリは @media というルールを使って書きます。書き方の構造は以下のようになります。
css
@media (条件) {
/* 条件が当てはまるときに適用するCSSをここに書く */
}具体的な例を見てみましょう。
css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}これは「画面幅が600px以下のとき、背景色を水色にする」という意味です。
パソコンで見ているときは通常のスタイルが適用され、スマホなど幅の狭い端末で見たときだけ水色になります。
よく使う2つの書き方：max-widthとmin-width
メディアクエリでは max-width と min-width の2種類をよく使います。この2つの違いを理解しておくと、多くの場面で応用できます。
max-width — 「〇〇px以下のとき」
css
@media (max-width: 768px) {
.sidebar {
display: none;
}
}「768px以下（＝タブレット・スマホ）のときはサイドバーを非表示にする」という指定です。大きい画面を基準にして、小さい画面向けに上書きしていくスタイルに向いています。
min-width — 「〇〇px以上のとき」
css
@media (min-width: 768px) {
.sidebar {
display: block;
}
}こちらは「768px以上のときだけサイドバーを表示する」という指定です。
小さい画面を基準にして、大きい画面向けに追加していくスタイル、
いわゆるモバイルファーストの書き方によく使われます。
どちらを使えばいい？
現代のWeb制作では、モバイルファースト（min-width）が推奨されています。
スマホでの閲覧が主流になってきたことと、検索エンジンがモバイル表示を重視していることが理由です。
ただし、既存のサイトを修正する場面では max-width を使うほうがスムーズなこともあります。
どちらが正解というわけではなく、プロジェクトの状況に合わせて使い分けるのが実務的な感覚です。
これから新規でつくるサイトはモバイルファーストが多い。
ただし、ユーザーの大半がPC利用者と見込まれるサイトはPCを中心に作る場合もあるよ！
ブレイクポイントって何？
「ブレイクポイント」というのは、スタイルが切り替わる画面幅の境界線のことです。
さきほどの 768px や 600px がブレイクポイントにあたります。
よく使われるブレイクポイントの目安は以下のとおりです。
ブレイクポイントは「デザインが切り替わる基準値」と覚えておくといいよ！
| 画面の種類 | 目安の幅 |
|---|---|
| スマートフォン | 〜767px |
| タブレット | 768px〜1023px |
| PC・デスクトップ | 1024px〜 |
ただし、これはあくまで「目安」です。実際には使っているデザインやコンテンツに合わせて、
崩れ始める幅でブレイクポイントを設定するのがベストプラクティスとされています。
複数の条件を組み合わせる
and を使うと、条件を組み合わせることもできます。
css
@media (min-width: 600px) and (max-width: 1024px) {
.container {
padding: 20px;
}
}これは「600px以上、かつ1024px以下のとき」、つまりタブレットサイズのときだけ適用されるCSSです。
スマホとPCで同じスタイルを使い、タブレットだけ別のスタイルを当てたいときなどに便利です。
やってはいけないパターンと注意点
メディアクエリを書き始めたときにやりがちなミスを、NG例とOK例でご紹介します。
NG：viewportのmetaタグを忘れる
HTMLファイルの <head> 内に以下の1行がないと、スマホでメディアクエリが正しく効きません。
これまじで初心者あるあるなので気を付けてください。
「CSSが効いてない！」とパニックになってCSSを見る人が多いけど、
実際は下記の一行が正しく記述されていないこともあります。。（実体験あり）
<!-- これがないとスマホで崩れる -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">挿入する場所↓
<!-- OK -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
</head>この1行がないと、スマホがPC向けのページを縮小表示してしまい、メディアクエリの条件が正しく判定されません。初心者の方がハマりやすいポイントなので、必ず書くクセをつけましょう。
NG：pxの後にセミコロンをつける
ダメな例↓
/* NG */
@media (max-width: 768px;) {正しい例↓
/* OK */
@media (max-width: 768px) {条件の括弧の中にセミコロンは不要です。
書いてしまうとCSSが無効になってしまうので注意してください。
実践的なサンプル：スマホで1カラム、PCで2カラム
理解を深めるために、よく使われる「スマホでは縦並び、PCでは横並び」のレイアウトを作ってみましょう。
<div class="container">
<div class="main">メインコンテンツ</div>
<div class="sidebar">サイドバー</div>
</div>cssはこんな感じ↓
/* スマホ向け（デフォルト）：縦に並べる */
.container {
display: flex;
flex-direction: column;
}
.main,
.sidebar {
width: 100%;
}
/* PC向け（768px以上）：横に並べる */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.main {
width: 70%;
}
.sidebar {
width: 30%;
}
}まずスマホ向けのスタイルを書き、@media (min-width: 768px) の中でPC向けのスタイルを上書きしています。
これがモバイルファーストの基本パターンです。
SCSSでメディアクエリを書くと、もっとスッキリする
ここまでは通常のCSSで書いてきましたが、SCSS（Sass）というCSSの拡張言語を使うと、メディアクエリをさらに読みやすく書けます。
SCSSではルールをネスト（入れ子）にできるので、対象の要素のスタイルとメディアクエリをひとまとめに書けます。
通常のCSSだとこう書くところを……
css
.card {
padding: 10px;
}
@media (min-width: 768px) {
.card {
padding: 20px;
}
}SCSSではこう書けます。
scss
.card {
padding: 10px;
@media (min-width: 768px) {
padding: 20px;
}
}.card の中にメディアクエリが収まっているので、「この要素のスタイルはここを見ればすべてわかる」という状態になります。ファイルが大きくなるほど、この書き方の恩恵は大きくなります。
scssに慣れたら、css直書きなんてもう出来ない。
さらに変数を使ってブレイクポイントを一元管理することもできます。
scss
$breakpoint-md: 768px;
.card {
padding: 10px;
@media (min-width: $breakpoint-md) {
padding: 20px;
}
}ブレイクポイントの数値を変えたいときに、変数を1か所直すだけで済むので、保守性がグッと上がります。
SCSSはWordPressのテーマ開発やチーム制作でもよく使われているので、CSSに慣れてきたら挑戦してみると良いでしょう。
まとめ
メディアクエリは、現代のWeb制作では欠かせない技術です。要点を振り返ると以下のようになります。
@media (条件) { }の形でCSSを切り替えるmax-widthは大きい画面を基準に、min-widthは小さい画面を基準に書く- 現代のWeb制作ではモバイルファースト（
min-width）が推奨 - HTMLに
viewportのmetaタグを必ず入れること - SCSSを使うとネストで書けて管理がしやすい
最初は「なんとなく動いた」でも全然OKです。実際に手を動かして試してみることで、どんどん感覚がつかめていきます。ぜひサンプルコードをコピーして、自分のエディタで動かしてみてください。
Web制作、デザインをやってる方、がんばって！
