CSSの単位 px・%・em・rem の違いと使い分けを徹底解説

CSS を学び始めたとき、多くの人はまず px を使ってサイズを指定します。幅を 300px、文字サイズを 16px、余白を 20px のように書けば、見た目としてすぐに結果が分かりやすいからです。しかし、実際に画面幅が異なるデバイスへ対応しようとしたり、コンポーネントを再利用しやすい形で設計しようとしたり、アクセシビリティを意識して文字サイズの拡大へ対応しようとすると、単位の選び方が一気に重要になります。そのときに出てくるのが %、em、rem といった相対単位です。つまり、CSS の単位は単なる数字の書き方の違いではなく、レイアウト設計と保守性そのものに関わるテーマです。

特に実務では、「何となく px を使う」「何となく rem が今風らしいから使う」といった曖昧な理解のまま進めると、後からサイズ調整がしにくくなったり、親子関係によって意図しない拡大縮小が起きたり、レスポンシブ対応で無理が出たりします。つまり、単位は暗記項目ではなく、「何を基準にサイズを決めるのか」を選ぶ設計判断です。本記事では、px、%、em、rem をそれぞれ単独で説明するだけでなく、違い、使い分け、実務上の落とし穴、コード例まで含めて整理し、単位選びを感覚ではなく論理で判断できるようにしていきます。

1. CSSの単位とは

CSS の単位とは、要素の幅、高さ、余白、文字サイズなどを指定するときに使う「大きさの基準」です。一見すると、数値の後ろに付く記号にすぎないように見えますが、実際には「何を基準にその値を決めるか」が単位ごとに異なります。たとえば px は固定的に扱いやすい単位ですが、% は親要素を基準にしますし、em は親要素のフォントサイズ、rem はルート要素のフォントサイズを基準にします。つまり、単位を選ぶことは、見た目の大きさだけでなく、どの文脈に従ってサイズを変化させるかを選ぶことでもあります。

この視点が非常に重要なのは、CSS が単なる静的な見た目指定ではなく、画面サイズ、親子構造、ユーザー設定などの影響を受けるからです。もし「この要素は親に対して柔軟に広がるべきか」「この余白は文字サイズに応じて拡大してほしいか」「この全体スケールはサイト共通で調整したいか」といった視点がなければ、単位選びは場当たり的になります。逆に、単位の基準を理解していれば、同じデザインでもはるかに意図的に組み立てられるようになります。

1.1 固定値と相対値の違い

CSS の単位は、大きく固定値と相対値に分けて考えると整理しやすくなります。px は固定的な長さとして扱いやすく、指定した数値がそのまま見た目に反映されやすいです。一方で %、em、rem は相対単位であり、必ず何かを基準にして大きさが決まります。つまり、固定値は「この値で決め打つ」発想、相対値は「ある基準との関係で決める」発想です。この違いは、見た目の柔軟性や保守性に大きく影響します。

固定値は直感的で扱いやすい一方で、全体を後から拡縮したいときに弱くなりやすいです。たとえば全体のフォントスケールを一段大きくしたい場合、すべてが px で固定されていると変更箇所が多くなります。逆に相対値は柔軟ですが、基準を理解していないと「なぜこのサイズになったのか」が分かりにくくなります。つまり、どちらが優れているというより、「どれだけ固定したいか」「どれだけ関係性を持たせたいか」で選ぶべきものです。

1.2 単位理解が重要な理由

CSS の単位を理解することが重要なのは、単にコードをきれいに書くためではありません。実際には、単位の選び方がレイアウトの崩れ方、コンポーネントの再利用性、レスポンシブ対応のしやすさ、アクセシビリティ対応、さらには将来の保守コストにまで影響します。たとえば、全部を px で設計したUIは最初は分かりやすくても、後から「全体の文字を少し大きくしたい」となったときに修正が大きくなりやすいです。逆に em を何となく多用すると、ネストによる累積で予想外のサイズになり、コンポーネントが扱いにくくなることがあります。

つまり、単位はデザインの見た目だけでなく、変更しやすさと壊れにくさにまで関わる設計要素です。ここを感覚ではなく理屈で理解しておくと、「なぜここで rem を使うのか」「なぜここだけ px が適切なのか」といった判断ができるようになります。単位選びは細部の話に見えて、実際には CSS 設計全体の質を左右する大きなテーマです。

2. px を理解する

px は、CSS を書き始めた人が最初に触れることが多い単位です。実際、見た目を素早く作りたいときには非常に便利で、指定した値がイメージしやすく、他の相対単位に比べて「なぜこのサイズになったのか」が分かりやすいです。そのため、チュートリアルや簡単なUIでは px が多用されますし、実務でも今なお多くの場面で使われています。つまり、px は古い単位でも間違った単位でもなく、今でも十分に有効な選択肢です。

ただし、px を便利だからという理由だけで広範囲に使うと、柔軟性の低い設計になりやすいのも事実です。特にフォントサイズや大きなレイアウト幅まで px で固めてしまうと、全体のスケール変更が難しくなります。したがって、px は「使ってはいけない単位」ではなく、「どこまでを固定したいかを考えて使う単位」と理解するのが適切です。

2.1 px が向いている場面

px が向いているのは、細かな寸法の再現性が重要な場面です。たとえばボーダーの太さ、アイコンのサイズ、シャドウのずれ量、厳密な間隔調整などは、相対的に変わるより一定であったほうが扱いやすいことが多いです。また、小さなUI部品の微調整では、1px 単位の制御がそのまま見た目へ直結するため、px の明快さが強みになります。つまり、px は「固定されていたほうが意図がぶれにくい要素」に非常に向いています。

特に、装飾的な細部や小さな境界線では rem や em より px のほうが適切なことがあります。なぜなら、文字サイズのスケールに連動してボーダーまで大きくなる必要はない場面が多いからです。つまり、px は柔軟性が低いから悪いのではなく、そもそも柔軟でなくてよい場所には非常に合理的な単位です。

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.icon {
  width: 24px;
  height: 24px;
}

この例では、ボーダーやアイコンサイズのように、比較的一定であってほしい値に px を使っています。こうした箇所は、相対単位にして全体スケールへ連動させるより、明示的に固定したほうが扱いやすいことが多いです。

2.2 px を多用するときの注意点

px の注意点は、レイアウトやタイポグラフィ全体まで固定的にしてしまいやすいことです。たとえば見出し、本文、余白、コンテナ幅まですべて px で管理すると、「全体のサイズ感を少し大きくしたい」「アクセシビリティの観点でもう少し柔軟にしたい」となったときに、個別修正の量が増えます。つまり、px は分かりやすい反面、全体スケール設計には向かないことがあります。

また、レスポンシブデザインとの相性も考える必要があります。もちろん px 自体がレスポンシブ非対応というわけではありません。メディアクエリと組み合わせれば十分に対応可能です。ただし、親やルートに連動して自然に変化する単位ではないため、「最初から柔軟に変化する設計」を作るには相対単位のほうが有利なことがあります。つまり、px の弱点は単位そのものではなく、「広すぎる範囲に固定値を適用しやすいこと」にあります。

3. % を理解する

% は、CSS における非常に代表的な相対単位です。特にレイアウト設計では頻繁に使われ、親要素に対してどれくらいの大きさを取るかを指定するのに向いています。たとえば「親幅の 50%」「コンテナの 100%」のように、外側との関係性を前提にサイズを決めたいときに自然です。つまり、% は要素単体の大きさを決めるというより、「親との比率関係で大きさを決める」ための単位です。

この単位が重要なのは、レスポンシブデザインとの相性が良いからです。固定幅ではなく比率でサイズを持たせることで、親要素や画面サイズが変わったときにも自然に追従しやすくなります。ただし、基準が親要素に依存するため、理解が曖昧だと「なぜこのサイズになったのか」が急に分かりにくくなることもあります。つまり、% は柔軟性と引き換えに、文脈理解を要求する単位です。

3.1 % が向いている場面

% が最も活きるのは、幅に関する設計です。コンテナ幅を 100% にしたり、カラムを 50% にしたり、画像を親要素いっぱいに広げたりといった用途では非常に自然に使えます。特にレスポンシブなレイアウトでは、画面幅や親幅に応じて伸縮してほしい要素が多いため、% の価値は大きいです。つまり、% は「親との関係の中で広がるべき要素」に強い単位です。

また、横幅だけでなく、マージンや位置指定の一部でも使われることがあります。ただし、そのときも常に「何に対する割合か」を意識しなければなりません。% は便利ですが、基準を見失うと急に扱いにくくなるため、関係性が明確な場面で使うのがコツです。

.container {
  width: 80%;
  margin: 0 auto;
}

.card {
  width: 50%;
}

この例では、container は親要素に対して 80% の幅を持ち、card はその中で 50% の幅を取ります。つまり、% は単体の大きさというより、親との比率設計に向いていることが分かります。

3.2 % を使うときの注意点

% の落とし穴は、何を基準に計算されるのかが分かりにくくなりやすいことです。特にネストが深いレイアウトでは、「この 50% は画面に対してなのか、親コンテナに対してなのか」が曖昧になることがあります。さらに、幅は比較的直感的でも、高さの % は思った通りに効かないことがあります。親要素側に高さが明示されていないと、期待した基準が存在せず、意図したサイズにならないからです。

つまり、% は便利ですが、親要素との関係が明確な場面で使う必要があります。とくに高さに % を使う場合は、基準となる親高さがどう定義されているかを確認しないと、思った通りの挙動になりません。柔軟であることは強みですが、文脈依存であることも忘れてはいけません。

.parent {
  width: 600px;
  /* height が未指定 */
}

.child {
  width: 50%;
  height: 50%;
}

この場合、width: 50% は比較的分かりやすく親幅の半分になりますが、height: 50% は親高さが明示されていないと期待どおりに機能しないことがあります。% を使うときは、基準の存在を必ず意識すべきです。

4. em を理解する

em は、親要素のフォントサイズを基準にする相対単位です。これだけ聞くと少し分かりにくく感じるかもしれませんが、要するに「文字サイズとの関係でコンポーネント全体をスケールさせたい」ときに向いています。たとえば、ボタンの文字が大きくなったとき、内側の余白や高さも一緒に少し大きくなってほしい場面があります。そうした場合、em は非常に自然です。つまり、em は単なる長さの単位ではなく、「親のタイポグラフィ文脈に連動する単位」だと言えます。

この性格のおかげで、em はコンポーネント内部での相対的なスケール設計に向いています。ただし、そのぶんネストの影響を受けやすく、親子関係が深くなると意図しない累積が起こることがあります。つまり、em は強力ですが、使いどころを誤ると管理が難しくなる単位です。

4.1 em が向いている場面

em が向いているのは、コンポーネント内部の余白やサイズを、そのコンポーネント自身の文字サイズへ連動させたい場面です。たとえばボタン、バッジ、カード、入力欄などは、文字サイズが少し変わったときに余白や高さも一緒に自然に変わったほうが見た目のバランスが取りやすいです。そうしたときに padding: 0.75em 1em; のように書くと、文字サイズとの比例関係を保ちやすくなります。つまり、em はコンポーネント単位のスケーリングに向いています。

また、局所的なコンテキストに従うというのが em の強みです。サイト全体ではなく、その部品の中だけでバランスを取りたいときには rem より em のほうが自然なことがあります。つまり、em はグローバル設計よりローカル設計に強い単位です。

.button {
  font-size: 1rem;
  padding: 0.75em 1.2em;
  border-radius: 0.5em;
}

この例では、button の文字サイズを変えると、内側余白と角丸も一緒にスケールします。コンポーネントとしてのまとまりを保ちやすいため、em の利点がよく出る使い方です。

4.2 em で起きやすい問題

em の最大の注意点は、ネストによる累積です。親要素のフォントサイズが 1.2em、その子要素も 1.2em、さらに孫要素も 1.2em のように積み重なると、最初の想定よりかなり大きくなります。これは em が「親のフォントサイズ」を基準にするからです。つまり、便利な相対性が、そのまま複雑さにもなり得るわけです。

この問題が起きやすいのは、コンポーネントが入れ子になる設計です。小さな部品単位では便利でも、深い階層へ広く使うと、なぜそのサイズになったのかを追いにくくなります。つまり、em は「ローカルには強いが、深くネストすると制御が難しくなる」という性格を持っています。広域なサイズ管理には注意が必要です。

.parent {
  font-size: 1.2em;
}

.child {
  font-size: 1.2em;
}

.grandchild {
  font-size: 1.2em;
}

このように em を階層で重ねると、最終的なフォントサイズは元のサイズよりかなり大きくなります。em は便利ですが、ネスト構造では累積を常に意識しなければなりません。

5. rem を理解する

rem は、ルート要素、つまり通常は html 要素のフォントサイズを基準にする相対単位です。em が親のフォントサイズに従うのに対して、rem はページ全体の基準に従います。これにより、どの場所で使っても基準がぶれにくくなり、全体のスケールを統一的に管理しやすくなります。つまり、rem は「局所的な文脈」ではなく、「サイト全体の設計基準」に強い単位です。

この特徴のため、近年の実務ではフォントサイズや余白の多くを rem で設計するケースが増えています。特にデザインシステムやコンポーネントライブラリを作るときには、全体のサイズルールを一つの基準へそろえやすいことが大きな利点です。ただし、rem も万能ではなく、「常にこれだけ使えばよい」というものではありません。重要なのは、サイト全体スケール管理に向いているという性格を理解することです。

5.1 rem が向いている場面

rem が最も向いているのは、フォントサイズ、余白、レイアウト間隔などを全体で一貫したスケール感で管理したい場面です。たとえば本文 1rem、見出し 2rem、セクション間余白 3rem のように定義しておけば、ルートサイズを変えるだけで全体の印象をまとめて調整しやすくなります。つまり、rem はコンポーネントごとに独立して伸縮するというより、サイト全体のサイズ言語を統一するために向いています。

また、アクセシビリティの観点でも利点があります。ルートフォントサイズを基準にすることで、利用者のブラウザ設定や全体的な文字拡大と相性が良くなります。つまり、rem は保守性とアクセシビリティを両立しやすい単位として実務で重宝されています。

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

.section {
  padding: 2rem;
}

この例では、全体の基準を html の 16px に置き、その上で本文、見出し、余白を rem で管理しています。ルートサイズを変更すれば全体のスケールを一括調整しやすくなるのが利点です。

5.2 rem が実務でよく使われる理由

rem が実務で好まれる大きな理由は、ネストの影響を受けにくく、サイズの追跡がしやすいことです。em のように親子関係の中で累積しないため、「この 1.5rem は常にルート基準の 1.5 倍」と言い切れます。この一貫性は、コンポーネント数が増えるほど大きな価値になります。つまり、rem は広い範囲の設計を安定させやすい単位です。

さらに、デザインシステムとの相性も良いです。スペーシング、フォントサイズ、余白、ブロック間距離などをトークン的に管理するとき、rem だと統一された尺度を持たせやすくなります。つまり、rem は「今書きやすい単位」ではなく、「後から運用しやすい単位」として優秀です。

6. px、%、em、rem の違い

ここまでそれぞれを個別に見てきましたが、実務では「で、結局どう違うのか」を横並びで理解することが大切です。単位ごとの性格を比較すると、どこで何を使うべきかがかなり明確になります。重要なのは、単位の見た目ではなく基準の違いです。何に対して相対なのか、あるいは固定的なのかが、そのまま使いどころの違いになります。

つまり、単位の違いとは、見た目の差ではなく「設計思想の差」です。固定したいのか、親に追従したいのか、コンポーネントに追従したいのか、全体スケールに追従したいのかで選ぶべきものが変わります。

6.1 単位ごとの基準の違い

px は固定的に扱いやすい単位で、明確にこの大きさと決めたいときに向いています。% は親要素との比率関係に基づくため、レイアウト幅のように親へ追従したいときに向いています。em は親フォントサイズを基準にし、コンポーネント内部の相対スケールに向いています。rem はルートフォントサイズを基準にし、全体の統一スケール管理に向いています。つまり、違いは単位そのものというより、「何との関係を持たせるか」にあります。

この基準の差を理解していないと、たとえば em と rem の違いが曖昧になり、「どちらも文字サイズっぽい単位」で終わってしまいます。しかし実際には、em はローカル文脈、rem はグローバル文脈という大きな差があります。この違いを押さえるだけで、設計判断はかなりしやすくなります。

6.2 使いどころの違い

使いどころで見ると、px はボーダーやアイコンのような固定的な細部に、% は幅やレイアウト比率に、em はコンポーネント内部の余白や局所スケールに、rem は文字サイズや全体余白の統一設計に向いています。つまり、単位は排他的ではなく、役割ごとに併用するのが自然です。実務で良い CSS は、一つの単位だけで統一されているよりも、各単位の強みを役割に応じて使い分けていることが多いです。

逆に、すべてを一つの単位へ寄せようとすると無理が出やすいです。たとえば全部を rem にすると細かなボーダーまで全体スケールに引っ張られますし、全部を px にすると全体調整が難しくなります。つまり、「どれを主役にするか」はあっても、「どれか一つだけで完結する」と考えないほうが健全です。

6.3 同じ要素で比較するとどう見えるか

単位の違いを実感するには、同じような目的で並べて見るのが分かりやすいです。たとえばカードの余白を 16px、10%、1em、1rem で指定したとき、それぞれ何が基準になるのかを考えると、同じ「余白」でも意味が大きく違うことが見えてきます。16px は常に一定、10% は親幅依存、1em は親の文字サイズ依存、1rem はルート文字サイズ依存です。つまり、同じ数字でも、単位が違えば設計意図がまったく違います。

この理解があると、他人の CSS を読んだときにも意図を推測しやすくなります。単位を見ることで、「これは全体スケールを意識しているな」「これは親幅へ追従させたいんだな」と読み取れるようになります。CSS の可読性は、単位理解によっても大きく変わります。

7. CSS の単位をどう使い分けるべきか

単位の特徴を知ったあとに重要なのは、実際の設計でどう使い分けるかです。ここで大切なのは、「この単位が正解」という考え方ではなく、「この用途ではどの基準が自然か」を判断することです。単位は優劣ではなく役割です。見た目をどう変えたいか、何に追従させたいか、どのレベルでスケール管理したいかを考えることで、かなり自然に選べるようになります。

また、実務ではフォントサイズ、余白、幅といった対象ごとに主役になる単位が少しずつ違います。そのため、用途別に整理して考えるのが最も実践的です。

7.1 フォントサイズでの使い分け

フォントサイズでは、サイト全体の統一性とアクセシビリティを考えると rem が非常に有力です。見出し、本文、補足テキストなどをルート基準で管理できるため、全体のスケール感を統一しやすくなります。一方で、小さな部品内部で文字サイズと余白を一緒に連動させたい場合には em も有効です。つまり、全体タイポグラフィは rem、局所コンポーネントでは em という分け方がよく機能します。

px をフォントサイズへ使うことももちろん可能ですが、全体スケール調整のしやすさという点では相対単位のほうが有利です。特に長期運用では、後から全体サイズを調整する可能性が高いため、フォントサイズを全部 px 固定にするのは少し慎重になったほうがよいです。

7.2 余白や間隔での使い分け

余白では、全体で統一されたスペーシングシステムを作りたいなら rem が向いています。セクション間余白、カード間距離、レイアウトグリッドなどは、全体基準にそろっていたほうが保守しやすいからです。一方で、ボタン内部やラベル周辺のように、その部品の文字サイズへ連動してほしい余白は em が自然です。つまり、外側の構造的余白は rem、内側のコンポーネント余白は em と考えると整理しやすいです。

px は微調整には便利ですが、余白全体の設計を全部 px で固めると後からスケール調整が大変になります。したがって、余白の世界では「局所的な微調整に px、全体設計に rem、部品内部に em」という考え方がかなり実践的です。

7.3 幅やレイアウトでの使い分け

幅やレイアウトでは % が活躍しやすいです。特に親要素に応じて広がるレイアウトや、複数カラム構成では % が自然です。レスポンシブな幅設計では、固定幅よりも割合指定のほうが柔軟に対応しやすくなります。ただし、すべてを % で決める必要はなく、最大幅には px や rem を併用することもよくあります。つまり、レイアウトは % を軸にしつつ、必要に応じて固定上限を持たせるのが自然です。

コンテナ自体は % で可変にしつつ、内部タイポグラフィや余白は rem で管理する、という組み合わせは非常に一般的です。レイアウト設計では一つの単位だけで解決しようとせず、役割に応じて併用することが重要です。

8. CSS の単位とレスポンシブデザイン

レスポンシブデザインでは、画面サイズや表示条件が変わっても自然に見えることが重要です。そのため、単位選びは非常に大きな意味を持ちます。すべてを固定値で作ると、狭い画面では窮屈になり、広い画面では間延びしやすくなります。一方で、相対単位を使うと、基準に応じて伸縮しやすくなります。つまり、レスポンシブ設計と単位選びは切り離せない関係にあります。

ただし、ここでも「相対単位だけ使えばよい」と単純化するのは危険です。レスポンシブ対応では、固定値と相対値をどう組み合わせるかが大切です。つまり、柔軟性が必要な場所と、固定でよい場所を分ける視点が重要です。

8.1 レスポンシブ対応で相対単位が重要になる理由

相対単位がレスポンシブで重要になるのは、画面や親要素の変化へ追従しやすいからです。% はレイアウト幅に、rem は全体スケールに、em はコンポーネント内部の比例関係に活きます。これらを適切に使うと、異なる画面幅でも違和感の少ない構成を作りやすくなります。つまり、レスポンシブ設計では「サイズを固定する」より「サイズ関係を設計する」ことが大切になります。

特に最近のフロントエンドでは、デバイスごとの差だけでなく、ユーザーごとの文字設定やブラウザズームも無視できません。その意味でも、相対単位を理解することはレスポンシブだけでなく、柔軟なUI全般の基礎になります。

8.2 レスポンシブ設計で px をどう扱うか

レスポンシブ設計だからといって、px を完全に避ける必要はありません。ボーダー、アイコン、細かなシャドウ、狭い範囲の微調整など、固定値のほうが自然な場面は今でも多くあります。問題は px を使うこと自体ではなく、画面全体やタイポグラフィ全体まで px で固めてしまうことです。つまり、px は排除すべき単位ではなく、固定が適切な場所で使うべき単位です。

レスポンシブ対応で大切なのは、「全部相対」でも「全部固定」でもなく、役割ごとに適切な単位を混ぜることです。このバランス感覚があると、実務で無理のない CSS を作りやすくなります。

8.3 単位選びとアクセシビリティの関係

アクセシビリティの観点では、ユーザーが文字サイズを変更したときやブラウザ設定を変えたときに、UI がどれだけ自然に追従するかが重要です。rem はルート基準であるため、この追従性と相性が良いです。em も局所的には有効ですが、ネスト管理が必要です。一方、すべてを px 固定にすると、ユーザー設定への柔軟性が下がることがあります。つまり、単位選びはデザインの都合だけでなく、利用者の閲覧体験にも関わります。

アクセシビリティは特別な追加要件ではなく、通常の設計品質の一部です。その意味で、単位を理解することは、見た目だけでなく使いやすさを設計することでもあります。

9. CSS の単位で起きやすい問題

単位の理解が曖昧なまま CSS を書くと、最初はたまたま動いて見えても、後から問題が出やすくなります。特に em の累積、% の基準誤解、px だけで固めたことによる柔軟性不足は典型です。つまり、単位の問題は「その場では完成して見えるが、運用で壊れる」という形で出やすいのが特徴です。

この章では、よくある失敗を通じて、なぜ単位理解が大切なのかを具体的に見ていきます。失敗例を知っておくと、設計段階でかなり防ぎやすくなります。

9.1 em の累積でサイズが崩れる問題

em は親フォントサイズ基準なので、ネストが深い場所ではサイズがどんどん拡大または縮小することがあります。コンポーネントの中だけなら便利でも、複数階層にまたがって使うと、どの時点で大きくなったのかを追いにくくなります。これは特に再利用コンポーネントで起きやすい問題です。つまり、em は局所的には強いが、広域では制御が難しくなることがあります。

この問題を避けるには、em の用途をコンポーネント内部へ寄せ、全体スケールは rem で持つといった役割分担が有効です。単位を使う範囲まで設計することが重要です。

9.2 % の基準を誤解してレイアウトが崩れる問題

% は親要素が基準なので、その親が何者かを誤解するとレイアウトが簡単に崩れます。特に高さ指定では、親に明示的な高さがないのに height: 100% を使ってしまい、思ったように広がらない問題がよく起きます。これは % が悪いのではなく、基準の前提を満たしていないことが原因です。

つまり、% を使うときは常に「これは何の何パーセントなのか」を自分で説明できる状態であるべきです。基準の見えない % は、後から読む人にとっても非常に分かりにくくなります。

9.3 px だけで設計して柔軟性が失われる問題

最初から最後まで px で設計すると、見た目はすぐ作れますが、全体の文字サイズ調整やレスポンシブ対応で無理が出やすくなります。特に余白やフォントサイズをすべて固定すると、デザイン全体のスケール変更が局所修正の積み重ねになりがちです。つまり、px は便利ですが、「全部これでよい」と考えた瞬間に後からの変更コストが上がりやすくなります。

この問題を避けるには、固定すべき細部と、全体で連動させたい部分を最初から分けて設計することです。単位は後から貼り替えるものではなく、最初から役割を意識して選ぶべきです。

おわりに

CSS の単位は一見すると細かな実装テクニックのように見えますが、実際にはレイアウト設計の前提そのものに関わる重要な要素です。どの単位を選ぶかによって、要素同士の関係性、拡張時の影響範囲、そしてユーザー環境への適応力が大きく変わります。単位を意識せずにスタイルを書いていると、「なぜか崩れる」「調整すると別の場所が壊れる」といった不安定な UI になりやすくなります。つまり、単位の理解は見た目の調整ではなく、「壊れにくい構造を作るための設計知識」として捉えるべきものです。

また、px・%・em・rem のどれか一つが正解になることはほとんどありません。重要なのは、それぞれの特性を理解したうえで、「どの範囲に対して影響を持たせたいか」を基準に使い分けることです。例えば、レイアウトの骨格は安定させつつ、内部の余白や文字サイズは柔軟にスケールさせる、といった設計ができるようになると、UI は調整しやすく、再利用もしやすくなります。単位の選択はスタイル記述の一部ではなく、コンポーネント設計の一部です。

最初のうちは、どの単位を使うべきか迷うことも多いですが、実装と調整を繰り返す中で、「このケースではこの単位が自然にハマる」という感覚が少しずつ身についていきます。そのとき大切なのは、なんとなくで選ぶのではなく、「なぜこの単位を使うのか」を説明できる状態を目指すことです。単位を意図的に選べるようになると、UI は見た目だけでなく、変更・拡張・運用のすべてにおいて扱いやすくなります。CSS の単位は小さな要素ですが、その積み重ねが、最終的な品質に大きな差を生み出します。