px・em・rem・%とは？CSSの単位の違いをやさしく解説

絶対単位と相対単位

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のエッジ配信で表示が速いので、デバイスごとの見え方の違いを素早く確かめてもらえます。