WordPressでremがズレる原因と実務の単位割り当てメモ
この記事には広告リンクを含みます。紹介している商品・サービスの一部はアフィリエイトプログラムを利用しています。 商品・サービスの選定はご自身の判断でお願いいたします。
WordPressのテーマにCSSを追加したのに、rem指定の文字サイズが想定より小さく見える。
こういうケースの原因はほぼ決まっている。
テーマがhtmlのfont-sizeを上書きしているせいで、remの基準値がずれているのだ。
ここではDevToolsで5秒で終わらせる診断手順と、WordPress案件で迷わない単位の割り当てルールをまとめる。
WordPressでremがズレる最多原因：テーマのfont-size上書き
remは「htmlのfont-size」を基準に計算する。
ブラウザのデフォルトはhtml font-sizeが16px、つまり1rem = 16pxだ。
ところがWordPressテーマはここを書き換えることがある。
代表的なのが「62.5%リセット」だ。html { font-size: 62.5%; }を仕込むと1rem = 10pxになる。
10pxを基準にすると「1.6rem = 16px」のように計算しやすくなる反面、テーマ側にすでに入っている場合は自分のrem設計がずれる。
以前関わったWordPressリニューアル案件で、このパターンに遭遇した。
自分のCSSに問題がないのにどこかがおかしい、とComputedを開いたところ、テーマがhtml { font-size: 62.5%; }を仕込んでいた。
remの基準が0.625倍になっていたため、指定した文字サイズが全体的に小さくなっていた。
remの計算式：指定値（rem） × html font-size（px） = 実際のサイズ
例：1.6rem × 10px = 16px（62.5%リセット環境）
html font-sizeを上書きするのはテーマだけではない。
Page Builder系プラグインや独自リセットCSSを読み込むプラグインが干渉するケースもある。
子テーマなしで親テーマCSSを直接編集していれば、テーマ更新のたびにfont-sizeリセットが戻りremがまたズレるという循環にもなる。
原因の候補が複数あっても、DevToolsのComputedを開けばどれも絞れる。
DevToolsで5秒確認する手順と対処
テーマがhtml font-sizeを上書きしているかどうかは、次の手順で確認する。
- 対象ページをブラウザで開き、F12でDevToolsを起動する
- Elementsタブで
<html>要素を選択 - 右側のComputedタブを開き、「font-size」の算出値を確認する
- 16pxでなければ、何かがhtml font-sizeを上書きしている
- Stylesタブに取り消し線が付いたルールが、上書き元のCSSだ
取り消し線の横にはファイル名が表示されるので、干渉元をテーマファイル単位で特定できる。
干渉元がプラグインのCSSだった場合も、プラグイン名のファイルがリストに出てくる。
wp-content/themes/ 配下のファイル名が出れば子テーマ側で対処、プラグインのCSSなら当該プラグインの設定を確認する。
対処は子テーマ側でhtml { font-size: 100%; }を明示するだけだ。
style.cssの冒頭かカスタムCSS欄に1行追加するだけで、16px基準に戻る。
WordPress案件でCSS/JS干渉が重なるケースはjQueryが動かないケースの診断手順も参考になる。
実務の単位割り当て早見表
remズレを解消したうえで、要素ごとにどの単位を当てるかを整理しておく。
判断軸は「テーマや画面サイズが変わったときに意図どおりスケールするか」だ。
用途 | 推奨単位 | 理由 |
|---|---|---|
フォントサイズ（サイト全体） | rem | html基準で統一スケール |
コンポーネント内の余白・サイズ | em | 親font-sizeに追随する |
ボーダー・シャドウ | px | 1px単位の精度が必要 |
レイアウト幅 | % / vw / rem | レスポンシブに追随 |
フルスクリーン高さ | dvh | モバイルアドレスバー対応 |
入力欄の幅 | ch | 文字数ベースで安定する |
emとremの違いを一言で言うと——emは親（または自身）のfont-sizeが基準、remはhtmlが基準だ。
コンポーネント内でテキストに比例させるならem、サイト全体を統一するならrem。
この2軸を押さえれば、実務で単位に迷う場面はほぼなくなる。
WordPress案件でrem設計に入る前に確認すべきプロパティは、テーマCSSのhtmlとbodyのfont-sizeだ。
Computedタブで実際の算出値を確認してから設計を始めると、後から全体のズレに気づく手戻りを防げる。
これをやっておくだけで、テーマ更新後にremが突然ズレるトラブルも事前に防げる。
30秒の確認が、後の1時間を節約する。
- remがズレる最多原因はテーマによるhtml font-sizeの上書き（62.5%リセットが典型）
- DevToolsのComputedで16pxかを確認、Stylesの取り消し線で干渉元を特定する
- 子テーマ側で
html { font-size: 100%; }を明示するだけで解消する - フォントはrem、コンポーネント余白はem、ボーダーはpxが実務の基本割り当て
- WordPress案件のrem設計前にComputedで基準値を確認する習慣を持つ
コーディング代行・実装判断で詰まったらBuildに振ってください。
WordPressのCSS干渉診断から対処まで対応しています。
