---
title: "rem・emで指定した文字サイズが想定とずれるときの原因と対処"
description: "remやemで指定した文字サイズが思ったより大きい・小さい、入れ子でどんどん変わってしまうと困っているフロントエンド開発者向け。基準値の考え方と原因の切り分け方を整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/rem-em-font-size-wrong"
markdown: "https://giga-site.com/articles/rem-em-font-size-wrong/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# rem・emで指定した文字サイズが想定とずれるときの原因と対処

remやemで文字サイズを指定したのに、想定より大きい・小さい、あるいは入れ子で文字がどんどん変わってしまう。原因はrootのfont-size、emの相対計算、そしてブラウザ設定の影響にあります。この記事では基準の考え方と切り分け方を整理します。

> Source HTML: https://giga-site.com/articles/rem-em-font-size-wrong
> Article index: https://giga-site.com/articles/index.md

## remとemの基準の違い

remはルート要素(html)のfont-sizeを基準にする単位です。htmlのfont-sizeが16pxなら1remは16px、1.5remは24pxになります。ページのどこで使っても基準が一定なので、サイズ設計が予測しやすいのが特徴です。

一方emは、その要素自身の(継承された)font-sizeを基準にします。親のfont-sizeが大きければ同じ1emでも実寸が変わります。この相対性が、ネストしたときの意図しない拡大・縮小の原因になりがちです。

想定とずれるときは、まずその指定がremなのかemなのか、そして基準がどこにあるのかを意識して確認するのが第一歩です。

## emのネスト継承で起きる連鎖

emはネストすると効果が掛け算で積み重なります。例えばfont-size:1.5emを指定した要素の中に、さらに1.5emの要素があると、実寸は1.5×1.5=2.25倍になります。リストの入れ子などで文字が際限なく大きくなるのはこの典型です。

この連鎖を避けたいなら、サイズの基準を固定したい箇所はremを使うのが安全です。emは、親に対する相対的な調整(余白やアイコンのスケーリングなど)に限定して使うと扱いやすくなります。

どうしてもemを多用する場合は、各階層の継承font-sizeを開発者ツールのComputedで実測し、掛け算の結果を確認しながら設計します。

## 症状別チェック表

rem・emで指定した文字サイズが想定とずれるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## ずれを切り分ける手順

文字サイズのずれは、基準を一つずつ確定させると原因が見えてきます。

1. htmlのfont-sizeの算出値を確認する(初期は多くのブラウザで16px)
2. 対象要素の指定がremかemかを確認する
3. emなら親要素のfont-sizeをたどって基準を把握する
4. Computedで対象のfont-sizeの実寸(px)を確認する
5. ブラウザの最小フォントサイズ設定が効いていないか確認する

## htmlに62.5%を当てる手法の落とし穴

html{font-size:62.5%}として1rem=10pxに揃える手法は計算が楽になりますが、ユーザーがブラウザのデフォルト文字サイズを変更している場合の相対性を崩しやすいという指摘があります。アクセシビリティを重視するなら、remをそのまま16px基準で使うほうが無難です。

また、pxで全部指定するとユーザーのブラウザ設定を無視してしまうため、本文サイズはremで指定して拡大設定を尊重するのが望ましい設計です。

想定とのずれを感じたら、自分の環境のブラウザ文字サイズ設定が標準のままかも併せて確認してください。設定を大きくしているとrem基準も連動して大きくなります。

## 実寸を共有して認識を合わせる

文字サイズの議論は、言葉より実際の表示を見比べるほうが早く合意できます。rem版・em版・px版を並べたサンプルを作り、複数端末で見比べると差が明確になります。

そうした検証用ページを関係者に見せたいときは、ギガサイト便にHTMLをドロップして発行される共有URLが使えます。CDN配信で表示が速く、URLのまま中身を差し替えられるので、サイズ調整を繰り返しながら同じリンクで確認を続けられます。一時公開ページにはnoindexが付くので検索結果に出る心配もありません。

## よくある質問

### remとemはどちらを使うべきですか

基準を一定にしたいfont-sizeにはrem、親に対する相対的な調整にはemが向きます。本文サイズの設計にはremを基本に据えると予測しやすくなります。

### 1remは何pxですか

htmlのfont-size次第です。多くのブラウザの初期値は16pxなので1rem=16pxですが、html側で変更していればその値が基準になります。

### 入れ子のリストで文字が大きくなり続けます

emをネストして掛け算が積み重なっているためです。基準を固定したい箇所はremに変えると連鎖を断てます。

### pxで指定すれば確実ではないですか

見た目は安定しますが、ユーザーのブラウザ文字サイズ設定を無視してしまいます。アクセシビリティを考えると本文はremで指定するのが望ましいです。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [環境によってフォントが別物に置き換わり見た目が変わるときの対処](https://giga-site.com/articles/font-fallback-different-look/index.md)
- [アイコンフォント（Font Awesome等）が四角や文字で表示されるときの対処](https://giga-site.com/articles/icon-font-shows-square/index.md)
- [WindowsとMacで文字の太さ・見え方が違うときの対処](https://giga-site.com/articles/windows-mac-font-rendering-diff/index.md)
- [日付・時刻がずれるときの対処（タイムゾーン）](https://giga-site.com/articles/timezone-date-wrong/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "rem・emで指定した文字サイズが想定とずれるときの原因と対処",
  "description": "remやemで指定した文字サイズが思ったより大きい・小さい、入れ子でどんどん変わってしまうと困っているフロントエンド開発者向け。基準値の考え方と原因の切り分け方を整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/rem-em-font-size-wrong",
  "url": "https://giga-site.com/articles/rem-em-font-size-wrong",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "remとemはどちらを使うべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "基準を一定にしたいfont-sizeにはrem、親に対する相対的な調整にはemが向きます。本文サイズの設計にはremを基本に据えると予測しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "1remは何pxですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "htmlのfont-size次第です。多くのブラウザの初期値は16pxなので1rem=16pxですが、html側で変更していればその値が基準になります。"
      }
    },
    {
      "@type": "Question",
      "name": "入れ子のリストで文字が大きくなり続けます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "emをネストして掛け算が積み重なっているためです。基準を固定したい箇所はremに変えると連鎖を断てます。"
      }
    },
    {
      "@type": "Question",
      "name": "pxで指定すれば確実ではないですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "見た目は安定しますが、ユーザーのブラウザ文字サイズ設定を無視してしまいます。アクセシビリティを考えると本文はremで指定するのが望ましいです。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```