html { font-size: 62.5%; } をやめるときの移行手順

Posted on by

事故らずに 16px 基準へ戻すための実務ガイド

前回の記事で触れた通り、html { font-size: 62.5%; } は今や積極採用しない設計です。

とはいえ、すでに運用中のサイトやテンプレートに組み込まれているケースも多いはず。

今回は、

  • 既存サイトで 62.5% を使っている
  • rem が 10px 基準で設計されている
  • でも今後は 16px 基準に戻したい

という場合の安全な移行手順を解説します。

なぜそのまま消すと危険なのか？

まず大前提。

現在：

html {
  font-size: 62.5%;
}

=

1rem = 10px

これを消すと：

1rem = 16px

になります。

つまりすべての rem 指定が 1.6倍に拡大 します。

例：

font-size: 1.4rem;  /* 14px のつもり */

↓

1.4rem × 16px = 22.4px

完全に崩壊します。

なので、いきなり削除はNGです。

移行の基本戦略

やることはシンプルです。

「10px換算で書かれたrem値」を「16px基準に変換する」

つまり：

旧rem値 × 0.625 = 新rem値

なぜなら：

10px → 16px
10 ÷ 16 = 0.625

手順①：影響範囲を把握する

まずやること：

  • rem がどこで使われているか検索
  • フォントサイズだけか？
  • margin / padding / width も使っているか？
  • line-height は？

VS Codeで：

rem

検索して一覧化します。

手順②：htmlを一旦100%に変更（テストブランチで）

html {
  font-size: 100%;
}

※ 本番にいきなり反映しない

この時点で画面は崩れます。

ここから修正開始です。

手順③：フォントサイズから直す

例

旧コード（10px基準）：

h1 { font-size: 2.4rem; }  /* 24px */
p  { font-size: 1.4rem; }  /* 14px */

変換：

2.4 × 0.625 = 1.5rem
1.4 × 0.625 = 0.875rem

新コード：

h1 { font-size: 1.5rem; }     /* 24px */
p  { font-size: 0.875rem; }   /* 14px */

まずはテキスト系から修正します。

理由：

  • 視覚的影響が最も大きい
  • デザインの基準になる

手順④：余白・サイズを修正

margin / padding / width も同様に変換します。

例：

padding: 3rem;   /* 30px */

↓

3 × 0.625 = 1.875rem
padding: 1.875rem;

手順⑤：line-height は基本そのままでOK

もしこうなっている場合：

line-height: 1.6;

これは単位なしなので問題なし。

ただし：

line-height: 2.4rem;

のような絶対指定は要変換。

手順⑥：ルート変数を活用すると楽

大量にある場合は、いきなり全変換せずに、

:root {
  --scale: 0.625;
}

一時的に：

h1 {
  font-size: calc(2.4rem * var(--scale));
}

のようにして段階移行する方法もあります。

最終的に値を確定させてから、変数を削除します。

手順⑦：レイアウト崩れチェック

特に注意するポイント：

  • ヘッダー高さ
  • ヒーローセクション
  • ボタン高さ
  • カードレイアウト
  • grid / flex gap
  • メディアクエリ

ブレークポイントはpxで書かれていることが多いので、
rem変換とは無関係ですが、視覚差は必ず確認。

手順⑧：メディアクエリを見直す（重要）

もしこうなっている場合：

@media (min-width: 76.8rem) {

これは：

76.8rem × 10px = 768px

という設計です。

16px基準に戻すなら：

768 ÷ 16 = 48rem

へ変更する必要があります。

ここは忘れやすいので要注意です。

手順⑨：Figmaと再同期

デザインがpxベースの場合は：

  • 16px基準で再確認
  • フォントサイズの再定義
  • 余白スケール整理

ここでついでに、

  • 8pxグリッド
  • タイポスケール
  • clamp導入

なども整理するとベストです。

手順⑩：アクセシビリティ確認

  • ブラウザ拡大200%
  • OSフォント拡大
  • スマホ表示

16px基準に戻すことで、
ユーザー設定の反映が自然になります。

ここは大きなメリットです。

移行時のよくあるミス

❌ いきなり削除して崩壊
❌ フォントだけ直して余白忘れる
❌ メディアクエリremを放置
❌ line-heightが詰まる
❌ clamp計算が狂う

おすすめの進め方（現実的）

  1. ブランチ作成
  2. htmlを100%に変更
  3. フォントだけ変換
  4. 主要ページ確認
  5. 余白修正
  6. レスポンシブ確認
  7. メディアクエリ変換
  8. 全体チェック

段階的にやるのが安全です。

まとめ

html { font-size: 62.5%; } をやめるのは、

  • デザイン崩壊との戦い
  • しかし長期的にはメリット大
  • アクセシビリティ改善
  • 外部CSSとの整合向上
  • 将来保守が楽になる

という投資です。