JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSの測定単位まとめ｜絶対単位・相対単位の意味と使い分け

CSSでは、インチ（in）やセンチメートル（cm）、ポイント（pt）といった絶対単位から、パーセント（%）やemのような相対単位まで、さまざまな測定単位がサポートされています。スタイルシートでフォントサイズや余白、行間などを指定する際には、これらの単位を適切に使い分けることが重要です。

主なCSS測定単位の一覧

以下の表に、CSSで利用できる主な測定単位とその説明、記述例をまとめました。

単位説明記述例
%別の値（通常は親要素）を基準とした割合で寸法を定義します。p {font-size: 16pt; line-height: 125%;}
cmセンチメートルを基準に寸法を定義します。div {margin-bottom: 2cm;}
emフォントの高さを基準とした相対単位です。emはその要素に設定されたフォントサイズと等しくなるため、フォントサイズが12ptの場合は1em＝12pt、2em＝24ptとなります。p {letter-spacing: 7em;}
exフォントのx-height（小文字の「x」の高さ）を基準とした相対単位です。p {font-size: 24pt; line-height: 3ex;}
inインチを基準に寸法を定義します。p {word-spacing: .15in;}
mmミリメートルを基準に寸法を定義します。p {word-spacing: 15mm;}
pcパイカを基準に寸法を定義します。1パイカ＝12ポイントで、1インチは6パイカに相当します。p {font-size: 20pc;}
ptポイントを基準に寸法を定義します。1ポイントは1/72インチです。body {font-size: 18pt;}
px画面上のピクセルを基準に寸法を定義します。p {padding: 25px;}
vhビューポート（表示領域）の高さの1%を表します。h2 { font-size: 3.0vh; }
vwビューポートの幅の1%を表します。h1 { font-size: 5.9vw; }
vminビューポートの幅と高さのうち、小さい方の1%を表します（1vwまたは1vhのいずれか小さい方）。p { font-size: 2vmin; }

絶対単位と相対単位の違い

cm、in、mm、pc、pt、pxなどの絶対単位は、固定された物理的なサイズを表す単位です。一方、%、em、ex、vh、vw、vminなどの相対単位は、親要素のフォントサイズやビューポートの大きさなど、他の値を基準として計算されます。そのため、画面サイズが異なるデバイスにも柔軟に対応できる、レスポンシブデザインとの相性の良さが大きな特徴です。

単位の使い分けのポイント

  • 印刷用のスタイル：ptやcm、inなどの物理単位が適しています。
  • 画面表示：pxが直感的で扱いやすく、多くの場面で使われています。
  • レスポンシブ対応：%、em、vh、vwなどの相対単位を活用すると、デバイスごとの画面サイズに応じた柔軟なレイアウトを実現できます。

なお、emとよく似た単位として、親要素ではなくルート要素（html要素）のフォントサイズを基準とするremもあります。近年のWeb制作では、remやビューポート単位（vh・vwなど）を組み合わせた設計が主流になりつつあります。目的に応じてこれらの単位を使い分けることで、保守性が高く見やすいスタイルシートを構築できます。

  1. CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

    CSSの単位とは CSSの単位には、フォントサイズ、文字サイズ、ビューポートの寸法など、さまざまな種類があります。これらは大きく「絶対単位」と「相対単位」の2つのカテゴリに分けられます。それぞれの特徴を正しく理解し、適切な場面で使い分けることが、レスポンシブで保守性の高いスタイリングを実現する第一歩となります。 CSSの絶対単位 絶対単位は、他の要素や表示環境に影響されない固定の値を表します。印刷時のように正確な物理寸法が必要な場面で役立ちます。主な絶対単位は以下の通りです。 番号単位と名称 1cmセンチメートル（1cm = 100mm） 2inインチ（1in = 2.54cm）

  2. 【初心者向け】CSSの絶対単位と相対単位の違いと使い分けを徹底解説

    CSSの絶対単位と相対単位は、どちらも「距離」を表す単位に分類されます。両者の大きな違いは、長さの基準となる対象にあります。 CSSの相対単位とは 相対単位は、親要素やビューポートなど他の要素を基準として要素の長さを定義します。例えば、相対単位 vh はビューポート（ブラウザの表示領域）の高さを基準とする単位です。 主なCSS相対単位は以下のとおりです。 番号単位と基準 1%親要素の寸法 2emその要素のフォントサイズ 3exその要素のフォントにおける x-height（小文字「x」の高さ） 4lhその要素の行の高さ（line-height） 5remルート要素（html要素）のフォン