WordPressのCSSをモバイルファーストで書く方法｜min-widthの使い方と追加場所

モバイルファーストのCSSは、スマートフォンの狭い画面向けのスタイルを「基本」として書き、画面が広くなったときの指定を min-width のメディアクエリで足していく書き方です。最初にデスクトップ向けを書き、max-width で狭い画面向けに打ち消していく「デスクトップファースト」とは順序が逆になります。この記事では、WordPressでCSSを書く場所と、モバイルファーストで書くときの具体的な手順を説明します。

モバイルファーストとデスクトップファーストの違い

同じ「狭い画面では1列、広い画面では3列」のレイアウトを、2つの書き方で比べます。

デスクトップファースト（max-width で狭い画面向けに上書きする）:

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .cards { grid-template-columns: 1fr; gap: 1rem; }
}

モバイルファースト（min-width で広い画面向けに足していく）:

.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

モバイルファーストでは、メディアクエリの外にあるスタイルがすべての画面に効き、画面が広くなるにつれて指定が追加されます。スマートフォンで読み込まれる指定が単純になり、後から打ち消す記述も減ります。「モバイルファースト」と言いながら最初のメディアクエリを max-width にすると、デスクトップファーストと同じ構造になってしまうので注意してください。

前提: viewport の指定を確認する

スマートフォンのブラウザは、viewport の指定がないページを広い画面として縮小表示するため、メディアクエリが期待どおりに効きません。ページのソースに次のような meta 要素があるか確認します。

<meta name="viewport" content="width=device-width, initial-scale=1" />

ブロックテーマでは、WordPress本体（5.8以降）がこの meta 要素を出力します。クラシックテーマでは、テーマの header.php などに書かれているのが一般的です。古い自作テーマで見当たらない場合は、header.php の <head> 内に追加します。

CSSを書く場所

親テーマのファイルを直接編集すると、テーマの更新で上書きされて消えます。次のいずれかの場所に書きます。

量が多い場合や、テーマ全体をモバイルファーストで組み直す場合は、子テーマにCSSファイルを置いて読み込むのが管理しやすい方法です。

子テーマでCSSファイルを読み込む

子テーマの functions.php で、wp_enqueue_scripts フックを使って読み込みます。filemtime() をバージョン番号にすると、ファイルを更新したときにブラウザのキャッシュが切り替わります。

<?php
add_action( 'wp_enqueue_scripts', function () {
	$file = get_stylesheet_directory() . '/css/mobile-first.css';

	wp_enqueue_style(
		'mychild-mobile-first',
		get_stylesheet_directory_uri() . '/css/mobile-first.css',
		array(),
		file_exists( $file ) ? filemtime( $file ) : null
	);
}, 20 );

優先度を 20 にしているのは、親テーマのスタイル（多くは既定の優先度 10 で登録される）より後に読み込ませ、同じ詳細度のセレクターで上書きできるようにするためです。

モバイルファーストで書く手順

1. ブレークポイントを決める

ブレークポイントは端末の機種ではなく、レイアウトが崩れ始める幅で決めます。最初は2つ程度で足ります。この記事の例では、600px（2列にする幅）と1024px（3列やサイドバーを出す幅）を使っています。使っているテーマにブレークポイントがある場合は、それに合わせると、テーマのCSSと切り替わる幅がずれません。

2. メディアクエリの外にスマートフォン向けを書く

最初に、メディアクエリを使わずにスマートフォン向けのスタイルを書きます。

/* すべての画面に効く基本のスタイル（スマートフォン向け） */
body {
  font-size: 1rem;
  line-height: 1.8;
}

.site-content {
  padding-inline: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

.sidebar {
  margin-top: 2rem;
}

3. min-width で広い画面向けを足す

次に、画面が広くなったときに変える部分だけを min-width のメディアクエリに書きます。小さい幅のメディアクエリから順に並べます。

@media (min-width: 600px) {
  .site-content {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .site-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
    max-width: 1200px;
    margin-inline: auto;
  }

  .sidebar {
    margin-top: 0;
  }
}

min-width のメディアクエリは、広い画面ほど多くのブロックが同時に当てはまります。後に書いたものが優先されるので、小さい幅から順に並べることが前提になります。

4. メディアクエリを使わない方法も検討する

文字の大きさやカードの列数は、メディアクエリを使わずに画面幅に合わせて変えることもできます。

/* 画面幅に応じて 1.5rem から 2.25rem の間で変わる見出し */
h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

/* カード1枚の最小幅を16remとし、入る数だけ列を作る */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

ブロックテーマでは、theme.json の文字サイズの設定で、画面幅に応じて文字サイズを変える仕組み（流動的なタイポグラフィ）も使えます。

既存のCSSをモバイルファーストに書き換える

デスクトップファーストで書かれたCSSを書き換えるときは、次の順で進めると崩れを見つけやすくなります。

1. 書き換える前の状態を、スマートフォン・タブレット・デスクトップの幅でスクリーンショットに残す
2. max-width のメディアクエリの中身のうち、一番狭い幅のものをメディアクエリの外（基本のスタイル）に移す
3. もともと基本のスタイルにあったデスクトップ向けの指定を、min-width のメディアクエリに移す
4. 各幅で表示を確認し、1のスクリーンショットと比べる

親テーマのCSSがデスクトップファーストの場合、子テーマで書いた基本のスタイルが、親テーマの max-width のメディアクエリに上書きされることがあります。開発者ツールで、どのルールが効いているかを確認しながら進めます。

表示を確認する

• ブラウザの開発者ツールのデバイス表示（Chrome や Edge では「デバイスツールバー」）で、幅を変えながら確認する
• ブレークポイントの前後（例: 599px と 600px）で表示が切り替わるか確認する
• 開発者ツールの画面と実機では、アドレスバーの高さなどが異なるため、最後はスマートフォンの実機でも確認する
• キャッシュ系プラグインやCDNを使っている場合は、CSSを変更したあとにキャッシュを削除する

まとめ

• モバイルファーストは、スマートフォン向けをメディアクエリの外に書き、min-width で広い画面向けを足す書き方。max-width を起点にすると逆の構造になる
• viewport の meta 要素がないとメディアクエリが期待どおりに効かない。ブロックテーマでは本体が出力する
• CSSは親テーマに直接書かず、追加CSS・サイトエディターの「スタイル」・子テーマのいずれかに書く
• min-width のメディアクエリは小さい幅から順に並べる
• clamp() や auto-fit を使うと、メディアクエリを減らせる

関連記事:

• WordPressの子テーマを作る方法
• theme.jsonでスタイルを設定する方法
• WordPressのレスポンシブ画像の仕組み