---
title: "px・em・rem・%とは？CSSの単位の違いをやさしく解説"
description: "px・em・rem・%のどれを使うべきか迷う人に向けて、固定単位と相対単位の違いや継承の影響をやさしく解説。文字サイズや余白を場面に応じて使い分けるための判断基準が身につきます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-units-term"
markdown: "https://giga-site.com/articles/css-units-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# px・em・rem・%とは？CSSの単位の違いをやさしく解説

CSSでサイズを指定するとき、pxにするかremにするかで迷ったことはありませんか。単位には固定的なものと、基準に応じて伸び縮みするものがあります。それぞれの性質を理解すると、文字や余白を場面に合わせて柔軟に整えられるようになります。

> Source HTML: https://giga-site.com/articles/css-units-term
> Article index: https://giga-site.com/articles/index.md

## 絶対単位と相対単位

CSSの単位は大きく、固定的な絶対単位と、何かを基準に変化する相対単位に分かれます。pxは代表的な絶対単位で、環境にかかわらずほぼ一定の大きさを保ちます。

一方em・rem・パーセントは相対単位で、親要素や基準の文字サイズ、親の大きさに応じて値が変わります。基準が変わると連動して伸び縮みするのが特徴です。

どちらが優れているということではなく、固定したい部分と柔軟に変えたい部分で使い分けるのが基本の考え方です。性質を知っておくと選択に迷いません。

## pxの特徴

pxは見たままの固定サイズを指定できるので、結果が予測しやすく直感的です。枠線の太さや、ぴったり固定したい小さな要素など、ぶれてほしくない箇所に向きます。

ただしすべてをpxで固定すると、文字サイズを基準にした拡大縮小に追従しにくくなります。利用者が文字を大きくしても要素が連動しない、といった場面が出てきます。

そのため近年は、固定したい一部にpx、伸び縮みさせたい部分に相対単位、という組み合わせがよく使われます。

## 実務ではどこで関係する？

CSS単位は言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

px・em・rem・%とは？CSSの単位について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## emとremの違い

emは、その要素に効いている文字サイズを基準にします。親の文字サイズが変わると連動するため、入れ子が深いと値が積み重なって予想外に大きくなることがあります。

remは、ページの基準となる文字サイズだけを参照します。どこで使っても同じ基準なので値が安定し、入れ子による積み重なりが起きません。全体のサイズ管理に向きます。

文字サイズや余白を全体で統一的に管理したいならrem、特定の要素を基準にまとまりごとに調整したいならem、と覚えると使い分けやすくなります。

## 単位を選ぶ手順

迷ったときは、その値を固定したいか、基準に合わせて伸び縮みさせたいかから考えると決めやすくなります。次の手順で選ぶと一貫します。

1. 枠線など正確に固定したい箇所はpxを選ぶ
2. 文字サイズや余白など全体で統一管理したい値はremを選ぶ
3. 親要素を基準にまとまりで調整したい値はemを選ぶ
4. 親の大きさに対する比率で決めたい幅などはパーセントを選ぶ
5. 実機やブラウザで文字拡大時の挙動を確認する

## パーセントの使いどころ

パーセントは親要素の大きさに対する比率を表します。幅を親の半分にする、画像を親いっぱいに広げるといった、相対的なレイアウトに向いています。

ただし基準になる対象がプロパティによって異なるため、何に対する比率なのかを意識して使うことが大切です。基準を取り違えると、思った大きさにならない原因になります。

## 単位の見え方を実機で確認する

相対単位の挙動は、画面幅や文字サイズを変えてみて初めて実感できることが多いものです。確認用ページをスマホやチームの環境でも見てもらいたいとき、ギガサイト便ならHTMLをドロップするだけで共有URLを発行できます。

発行されるURLはスマホからも開けて、CDNのエッジ配信で表示が速いので、デバイスごとの見え方の違いを素早く確かめてもらえます。

## よくある質問

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

全体で文字サイズや余白を統一的に管理したいならremが扱いやすいです。入れ子による値の積み重なりが起きず安定します。特定の要素を基準にまとまりごとに調整したい場面ではemが向きます。

### pxだけで作ってはいけませんか？

いけないわけではありませんが、すべて固定すると文字サイズの拡大などに追従しにくくなります。固定したい一部にpx、伸び縮みさせたい部分に相対単位、と組み合わせると柔軟さと予測しやすさを両立できます。

### パーセントは何に対する比率ですか？

親要素の大きさに対する比率です。ただしプロパティによって基準が異なることがあるため、何に対する割合なのかを意識して使う必要があります。基準を取り違えると意図した大きさになりません。

### レスポンシブにはどの単位が向きますか？

基準に応じて伸び縮みする相対単位が向きます。文字や余白の統一管理にはrem、親に対する比率での幅指定にはパーセントが扱いやすく、固定したい一部だけpxを使う組み合わせが実用的です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)
- [トランジションとは？CSSで動きを滑らかにする基礎](https://giga-site.com/articles/css-transition-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "px・em・rem・%とは？CSSの単位の違いをやさしく解説",
  "description": "px・em・rem・%のどれを使うべきか迷う人に向けて、固定単位と相対単位の違いや継承の影響をやさしく解説。文字サイズや余白を場面に応じて使い分けるための判断基準が身につきます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-units-term",
  "url": "https://giga-site.com/articles/css-units-term",
  "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": "全体で文字サイズや余白を統一的に管理したいならremが扱いやすいです。入れ子による値の積み重なりが起きず安定します。特定の要素を基準にまとまりごとに調整したい場面ではemが向きます。"
      }
    },
    {
      "@type": "Question",
      "name": "pxだけで作ってはいけませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いけないわけではありませんが、すべて固定すると文字サイズの拡大などに追従しにくくなります。固定したい一部にpx、伸び縮みさせたい部分に相対単位、と組み合わせると柔軟さと予測しやすさを両立できます。"
      }
    },
    {
      "@type": "Question",
      "name": "パーセントは何に対する比率ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "親要素の大きさに対する比率です。ただしプロパティによって基準が異なることがあるため、何に対する割合なのかを意識して使う必要があります。基準を取り違えると意図した大きさになりません。"
      }
    },
    {
      "@type": "Question",
      "name": "レスポンシブにはどの単位が向きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "基準に応じて伸び縮みする相対単位が向きます。文字や余白の統一管理にはrem、親に対する比率での幅指定にはパーセントが扱いやすく、固定したい一部だけpxを使う組み合わせが実用的です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```