相対単位・とは？初心者向けのやさしい解説と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

相対単位とは？基本の考え方

「相対単位」とは、サイズの基準を固定の数字ではなく、別のサイズや画面の大きさなど、周りの条件に合わせて決める考え方です。Webデザインでは、画面サイズが変わっても見た目をできるだけ整えるために、相対単位を使うことが多いです。

例えばフォントサイズを基準にする場合、親要素のサイズが変わると文字の大きさも変わります。ここで出てくるのが em や rem、% などの相対単位です。これらを上手に使うと、スマホでもタブレットでも見やすいデザインを作りやすくなります。

相対単位の代表例

代表的な相対単位には次のものがあります。em、rem、%、vw、vh、vmin、vmaxです。

emとremの違い

emは「その要素の親のフォントサイズ」を基準にします。親の字体が大きくなると子のサイズも大きくなりやすく、階層が深くなるほど連鎖的に変わる特徴があります。逆に rem は「ルート要素 html のフォントサイズ」を基準にします。html のフォントサイズを変えるだけで、全体のサイズ感を統一的に調整できます。

％と vw/vh の使い分け

％は主に幅や高さ、場合によってはフォントサイズにも使えますが、親のサイズに強く依存します。vw/vh はビューポートと呼ばれる画面全体のサイズに対して比率をとるため、画面の横幅が大きくなると要素の幅が自動的に伸びます。これを使うと、横長のデザインを簡単に作ることができます。

使い分けの実例とコツ

実務では、基準をルートのフォントサイズにする rem を中心に置きつつ、テキスト内の小さな要素に em を使うなど、状況に応じて使い分けます。例えば基準フォントを 16px に固定したいときは html { font-size: 16px; } のように設定します。これに対して、ボタンの文字サイズだけを相対的に大きくしたい場合はそのボタン要素で 1.25em のように設定します。また、セクションの幅を画面サイズに合わせたい場合は幅を 60vw のように設定します。

表で見る相対単位の特徴

単位	基準	代表的な用途	主な注意点
em	親要素のフォントサイズ	要素内の相対サイズ	親の影響を受けやすい
rem	ルート要素 html のフォントサイズ	全体の見た目を揃えたいとき	階層の影響を受けにくい
%	親要素のサイズ	幅や高さの割合、フォントにも使える	文脈により意味が変わる
vw	ビューポートの幅	画面横幅に応じたデザイン	横幅が変わるとサイズも変わる
vh	ビューポートの高さ	画面縦方向のデザイン	縦長端末で効果大

まとめとして、相対単位は固定値の px に比べて柔軟性が高く、現代のウェブ制作には欠かせない道具です。使い方を正しく理解し、デザインの目的に合わせて適切な単位を選ぶ練習を繰り返しましょう。はじめは難しく感じるかもしれませんが、慣れるとレスポンシブなサイト作りが格段に楽になります。

相対単位の同意語

相対単位: 長さを基準値に対して割合で表す単位の総称。CSS では em、rem、%、vw、vh、vmin、vmax、ch、ex などが該当します。
相対長さ: 基準値に対して相対的に変化する長さの概念。フォントサイズやビューポートの大きさに応じて長さが変わる性質を指します。
パーセント単位: 基準値に対する割合で長さを表す単位。例: width: 50% は親要素の幅の半分を取ります。
フォント基準長さ: フォントサイズを基準に長さを決める相対単位の総称。em は直近の要素のフォントサイズ、rem はルート要素のフォントサイズを基準にします。
ビューポート基準長さ: ビューポートの幅や高さを基準に長さを決める相対単位。例: vw、vh、vmin、vmax。
親要素基準長さ: 親要素のサイズを基準に長さを決める相対長さ。主にパーセントがこの基準を参照します。
ルート要素基準長さ: rem のように、ルート要素のフォントサイズを基準にする相対長さ。
相対的寸法: 長さを基準値に対して相対的に表す概念。絶対長さに対する対概念として、em・rem・% などが該当します。

相対単位の対義語・反対語

絶対長さ: 相対単位に対する対義語。長さが周囲の要素（フォントサイズや親要素の大きさ）に依存せず、固定された長さとして決まる概念。
px（ピクセル）: 表示画面の固定長さを表す絶対長さ。デバイスの解像度で見え方が多少変わることはあるが、相対ではなく一定の長さとして扱われる。
pt（ポイント）: 紙のサイズで使われる固定長さ。1ptは1/72インチの長さ。
cm（センチメートル）: 実際の長さをセンチメートルで表す固定長さ。
mm（ミリメートル）: 実際の長さをミリメートルで表す固定長さ。
in（インチ）: 実際の長さをインチで表す固定長さ。1インチは2.54センチメートル。
pc（パイカ）: 12ポイント分の長さ。固定の絶対長さの一種。

相対単位の共起語

絶対長さ: 長さを固定的に指定する単位の総称。例として px、pt、cm、mm、in などがあり、デザインの大きさを厳格に決めたい場面で使われます。
em: 親要素のフォントサイズを基準に大きさが決まる相対長さ。親のサイズが変わると子要素の見た目も変わります。
rem: ルート要素(html)のフォントサイズを基準にする相対長さ。親要素に依存せず、安定したスケール感を作るのに適しています。
%: 親要素のサイズを基準に相対的に長さを決める単位。幅・高さ・フォントサイズなど、比率で表現できます。
vw: ビューポートの幅の割合で指定する相対長さ。画面サイズに応じて自動的に調整されます。
vh: ビューポートの高さの割合で指定する相対長さ。
vmin: ビューポートの最小寸法を基準とした相対長さ。
vmax: ビューポートの最大寸法を基準とした相対長さ。
ex: 文字の x 高さを基準とする相対長さ。フォント依存で使われる頻度は高くありません。
ch: 0 の幅を基準とする相対長さ。主に0に近い幅を揃える場合に使われます。
px: 絶対長さの代表例。固定的な画素単位として使われ、デバイス依存の見え方に影響します。
pt: 印刷用の長さ単位。1pt は 1/72 インチで、印刷デザインでよく使われます。
cm: センチメートル単位。印刷や物理的な長さを表す際に用います。
mm: ミリメートル単位。印刷・測定系の感覚に近い長さです。
in: インチ単位。大きさを物理的に指定したいときに使います。
親要素: em の基準となる要素。親のフォントサイズが子要素の大きさを決めるときに重要です。
ルート要素: rem の基準となる要素。通常は html 要素のフォントサイズが基準になります。
フォントサイズ: テキストの大きさを決める CSS の基本プロパティ。相対単位はこの値を基準にサイズを算出します。
レスポンシブデザイン: 画面サイズに応じてレイアウトを調整する設計思想。相対単位を活用すると柔軟になります。
メディアクエリ: デバイス条件に応じて CSS を切り替える仕組み。相対単位と組み合わせて効果を高めます。
継承: 親要素のスタイルが子要素に影響する仕組み。特に font-size は継承と相対単位の挙動に関係します。
デザイン: 見た目の美しさや使い勝手を決める要素。相対単位は柔軟性を高め、訪問者の環境に適応します。

相対単位の関連用語

em: 現在の要素の font-size を基準にした相対長さ。親要素の font-size が 16px なら、2em は 32px。入れ子になると相対倍率が積み重なる点に注意。
rem: ルート要素（通常は html）の font-size を基準にする相対長さ。例: 1.5rem は html の font-size の 1.5 倍。ページ全体の統一感を出したいときに便利。
ex: x の高さを基準にする相対長さ。フォントによって実測値が変わりやすく、サポート状況が限定的な場合があるので使いどころを選ぶ。
ch: 数字などの幅を基準にする相対長さ。フォントの数字の幅を揃えたいときに役立つ。
vw: ビュー幅（画面の横幅）を基準にする相対長さ。画面サイズに合わせて要素の幅を自動調整したいときに使う。
vh: ビュー高（画面の縦サイズ）を基準にする相対長さ。縦方向のレイアウト調整に役立つ。
vmin: vw と vh の小さい方を基準にする相対長さ。画面の短辺に合わせたデザイン設計に便利。
vmax: vw と vh の大きい方を基準にする相対長さ。大画面での比率維持などに使われる。
%: 親要素のサイズを基準にする相対長さ。幅・高さ・マージン・パディングなど多くのプロパティで用いられる。例: width: 50%;
fr: CSS Grid のスペース分配単位。1fr は利用可能スペースの一部を表す。例: grid-template-columns: 1fr 2fr; 1fr が全体の1/3、2fr が2/3。
smaller: フォントサイズの相対値の一種。親要素の font-size より小さく表示したいときに使う。
larger: フォントサイズの相対値の一種。親要素の font-size より大きく表示したいときに使う。