受託のLP案件で、テストサーバーにアップして見たら、文字も余白も、全体が1.6倍に大きくなっていました。
🎥 この記事の内容は動画でも解説しています。
原因は、サイト共通CSSのhtml{font-size:62.5%}が、テストサーバーでは読み込まれていなかったことでした。
rem(ルートの文字サイズを基準にする単位)で組んでいたので、基準が10pxから16pxに変わって、全部が1.6倍になりました。
直し方は、LP側のCSSにも、同じ基準値と最小限のリセットを持たせることです。
何が起きたか
このLPは、サイト共通のCSS(/assets/css/common.css)が読み込まれる前提で、rem指定で組んでいました。
共通CSSには、html{font-size:62.5%}が入っています。
ブラウザの標準の文字サイズは、初期設定のままなら16pxです。
その62.5%で、1rem=10pxになります。
1.6remが16px、というように、px感覚で計算しやすくなる書き方です。
テストサーバーでは、この/assets/が読み込まれませんでした。
理由までは、渡された情報からは辿れていません。
共通CSSが無いので、基準は、ブラウザ標準の16pxのままでした。
- 共通CSSあり: 1rem=10px、1.6rem=16px
- 共通CSSなし: 1rem=16px、1.6rem=25.6px
25.6÷16で、ちょうど1.6倍です。
気づいたのは、テストサーバーを開いた自分でした。
原因の調査と修正は、Claude Codeに頼みました。
直し方：LP側のCSSに基準値とリセットを持たせる
LPのCSS(layout.css)の冒頭に、共通CSSと同じ値を足してもらいました。
html{font-size:62.5%}
main *,main *::before,main *::after{box-sizing:border-box}
main :where(h1,h2,h3,p,ul,dl,dd){margin:0}
main :where(ul){padding:0}直すときに決めたのは、次の3つです。
html{font-size:62.5%}は、共通CSSと同じ値にする。共通CSSがある環境では、同じ値の指定が重なるだけで、結果は変わらないbox-sizing(幅の計算方法をそろえる指定)と余白のリセットは、mainの中だけに限定する。共通のヘッダーやフッターは、LP側から触ってはいけない決まりだった- 見出し・段落・リストの余白リセットには、
:where()を使う。:where()内の要素名は優先順位に加算されないので、クラスで書いた個別の余白指定を、上書きしにくくなる
確かめ方：共通CSSが無い環境を、手元で再現する
LPのフォルダだけを、別のフォルダにコピーします。
それを、/assets/が無いサーバーで開いて、PC・SPの見た目を比べました。
確かめたのは、自分です。
- 共通CSSあり(本番相当): PCはピクセル単位で一致。SPも、描画の細かなノイズ以外は一致
- 共通CSSなし(テスト環境相当): PC・SPとも、デザインどおりの寸法と見た目
同じ構成でLPを組むときの確認ポイント
- rem前提で組むなら、基準になる
htmlの文字サイズが、どこで決まっているかを先に確認する - テストサーバーに最初にアップしたとき、共通ファイルが読み込めているかを開いて確かめる
- LP側に基準値を持たせるなら、
htmlの文字サイズは共通CSSと同じ値にする。余白とbox-sizingの調整は、main配下に限定する - AIに任せるなら、共通CSSがある場合と無い場合の両方で見比べるよう、指示に入れる
- 崩れたら、まずブラウザの開発者ツールで、
common.cssが読み込めているかを確認する。次に、htmlの計算後の文字サイズが10pxか16pxかを見る
まとめ
- 共通CSSの
html{font-size:62.5%}が読み込まれないと、remの基準が10pxから16pxに変わり、LP全体が1.6倍に崩れる - LP側のCSSに、共通CSSと同じ基準値と、
main配下に限定したリセットを持たせたら、共通CSSあり・なしの両方でデザインどおりになった - テストサーバーに最初にアップしたときに、共通ファイルが読めているかを開いて確かめる
