絶対と相対だけじゃない：CSS単位の追求

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

ピクセルから百分率、秒数まで、各CSS単位タイプにはユニークな機能があり、開発者がデザインのビジョンを生き生きと現実のものにするのを可能にしています。CSS単位を探求することで、精度とクリエイティビティが融合する世界が開かれるのです。

CSS単位の重要性
CSS単位の種類
ビューポートベース単位
- ビューポートベース単位の使用例
専門単位
- 角度と時間単位の使用例
グリッドfr単位の使用例
フォントサイズch単位の使用例
CSS単位の選択と性能
CSS単位の選択ガイド

CSS単位は、webデザインと開発の基礎をなすもので、開発者にスタイルシートの中で寸法やタイミングを一定の精度で指定する手段を提供します。以下のコードスニペットでは、ピクセル(px)、レム、ビューポート高さ(vh)、パーセンテージ(%)、秒数(s)、角度(deg)などのCSS単位を見ることができます。CSS単位は通常、数値の前に付けられます。

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  height: 6rem;
  width: 10rem;
  border: 1px solid red;
  border-radius: 10px;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
div:hover {
  transform: rotate(0deg);
}

CSS単位を議論する際、長さベースの単位にのみ焦点を当てがちです。しかし、長さベースの単位が最も重要であるものの、時間や角度ベースの単位など、他の長さベース外の単位も含まれています。

CSS単位には多様な計量種類が含まれており、それぞれ特徴と用途があります。本記事では、絶対単位と相対単位、ビューポートベース単位、そしてその他の時間、角度、解像度ベースなどの専門単位について探求していきます。これら単位の微妙な違いを理解することで、より反応性の高く視覚的に魅力的なWebエクスペリエンスを構築するための知識とツールが得られるはずです。

CSS単位の重要性

CSS単位の目的は、他のあらゆる単位と同様、標準を確立し、測定の精度を確保することです。しかし、CSS単位は特にWebデザインと開発の分野に特化しています。様々なCSS単位が存在することで、Web設計やレイアウトの課題に適切な単位が常に存在します。この点から、CSS単位を使う主なメリットは以下の通りです:

レスポンシブデザイン:CSS単位により、様々なスクリーンサイズやデバイスに適応する、レスポンシブなレイアウトの作成が可能になり、一貫したユーザー体験が実現できます。
柔軟なスタイリング:相対単位を使うことで、スケーラビリティと柔軟性を維持し、デザインの調整と更新が簡単になります。
アクセシビリティ:適切なCSS単位の使用により、テキストや他の要素のサイズと間隔が全ユーザーに適したものになり、アクセシビリティが向上します。
パフォーマンス最適化:適切なCSS単位の選択は、パフォーマンスに影響を及ぼし、一部の単位は他よりも優れたレンダリング効率を提供します。
ブラウザ間の互換性:CSS単位により、寸法やレイアウトプロパティの指定に標準化されたアプローチを提供し、ブラウザ間の互換性の問題を軽減できます。

CSS単位の種類

様々なCSS単位は以下の4つのカテゴリに分類できます:

絶対単位
相対単位
ビューポートベース単位
専門単位

最初の3つのカテゴリは主に長さベースの単位で、最後のカテゴリは長さベース外のCSS単位について説明します。以降のセクションでこれらの単位を個別に見ていきます。

絶対単位

絶対単位は、スクリーンサイズやデバイスの解像度に関わらず一定の寸法を表します。例えば、要素の幅を200pxと指定すれば、全てのスクリーンとデバイスで常に200ピクセル幅で表示されます。webの開発で最も実用的な例がピクセルです。他の絶対単位はピクセルの概念に基づいており、主に印刷関連です。

ピクセル(px)

ピクセルは、CSSで絶対長さを定義する際の最も一般的な単位です。1pxは画面やデバイス表示の1ドットを表します。CSSでピクセルを使って寸法を指定すれば、正確な寸法が定義されます。例えば、divの幅を200pxに設定すれば、どのデバイスや画面で表示しても常に200ピクセル幅になります。

ピクセルは固定サイズのレイアウトを作る際に単純で精密なため広く使われていますが、ディスプレイ間の「ピクセル密度」(PPI)の違いにより、物理的なサイズが異なる場合があることに注意が必要です。高解像度ディスプレイ(Retinaディスプレイなど)では、1インチあたりのピクセル数が多く、物理的なサイズが小さくなります。しかし、多くのデザインシナリオでは絶対的な精度が必要とされるため、ピクセルは便利な選択肢です。

印刷関連CSS単位

印刷関連CSS単位は主に、印刷文書の寸法とレイアウトを指定するのに使われます。これらの単位により、物理的な用紙上やWebページの印刷時の表示をコントロールできます。

印刷関連単位	詳細
インチ (in)	長さの単位で、印刷メディアやデザインで一般的に使われます。1inは概ね96ピクセルに相当します(標準96PPI)。
センチメートル (cm)	長さの単位で、メートル法を使う地域ではよく使われます。1cmは約37.8ピクセルに相当します(標準96PPI)。
ミリメートル (mm)	より小さな長さの単位で、印刷メディアやデザインで使われます。1mmは約3.78ピクセルに相当します(標準96PPI)。
ポイント (pt)	長さの単位で、タイポグラフィーや印刷メディアで一般的に使われます。1ptは1インチの1/72、約0.75ピクセルに相当します(標準96PPI)。フォントサイズの指定に使われますが、Webデザインでは使用は一般的ではありません。
パイカ (pc)	長さの単位で、タイポグラフィーや印刷メディアで使われます。1pcは12ポイントに相当します。ポイントと似た用途です。

Webレイアウトでこれら印刷関連CSS単位を使うのは非常に一般的ではなく、推奨されません。デバイス間で一貫性のある結果が得られず、予期せぬレンダリングが発生する可能性があるため、特にレスポンシブデザインには適していません。

絶対単位の使用例

以下のシンプルなコードは、300px x 300pxのdivを持つコンテナクラスを示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Relative Units Example</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

この上記のコードをモバイル画面で表示すると、divが375pxのモバイル画面幅の大部分を占めるように表示されます。一方、デスクトップ画面では、1024pxの広い画面の中で300px x 300pxのdivが小さく表示されます。

絶対単位の使用例

絶対単位は、全てのレンダリングで正確なコントロールが必要な以下のような場面に適しています:

固定要素サイズ:ピクセル(px)などの絶対単位は、境界線の幅、ストロークの幅、フォントサイズなど、スケーリングが重要でない固定サイズの要素を定義する際に一般的に使われます。
画像寸法:絶対単位を使って画像の寸法を設定することで、様々なスクリーンサイズやデバイスでの一貫した表示が可能になります。
メディアクエリ:絶対単位はメディアクエリを使ったレスポンシブデザインのブレークポイントを定義する際によく使われます。

絶対単位は並外れた精度を提供しますが、これは利点でもあり欠点でもあります。レスポンシブデザインの文脈では、スクリーンサイズの変化に適応できないことが大きな欠点になります。

相対単位

相対単位はCSSで、別の要素(通常は親要素)のサイズに基づいて寸法を定義する方法を提供します。主な相対単位の例は以下の通りです:

相対単位	詳細
em	emはその要素自体のフォントサイズに対する相対的な単位です。例えば、要素のフォントサイズが16pxの場合、1emは16pxに相当し、0.5emは8pxになります。テキストサイズに対する寸法を設定する際に役立ちます。
rem	remもemと似ていますが、現在の要素ではなくルート要素(通常はhtmlタグ)のフォントサイズに対する相対的な単位です。これにより、より予測可能で管理しやすくなり、特に入れ子の深い大規模プロジェクトで有用です。
パーセンテージ(%)	パーセンテージは、含む要素のサイズに対する相対的な単位です。例えば、divの幅が300pxで子要素の幅を50%に設定すれば、子要素の幅は150pxになります。パーセンテージは最も多用されている柔軟な相対単位の1つです。

emとremの違いを理解するのは初学者によくある問題ですが、こちらの記事が大変参考になるでしょう - [Ems vs Rems]. また、一部の機関ではビューポートベース単位も相対単位の1つに分類しています。

相対単位の使用例

以下のシンプルなコードは、コンテナ divに3つの子 div が含まれ、それぞれの幅がコンテナの異なる百分率を占めるものです。コンテナ自体は、HTML bodyの幅の半分のサイズになっています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html {
        font-size: 2px;
      }
      .container {
        width: 50%;
        height: 200px;
        padding: 2rem;
        background-color: gold;
        display: flex;
        gap: 2rem;
      }
      .box {
        width: 20%;
        height: 100%;
        margin-bottom: 1rem;
        background-color: purple;
      }
      .box-1 {
        width: 60%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box-1"></div>
      <div class="box box-2"></div>
      <div class="box box-3"></div>
    </div>
  </body>
</html>

このコードをモバイル画面で表示すると、コンテナ divがモバイル画面の50%を占め、box divがそれぞれ60%、20%、20%の幅になっています。一方、デスクトップ画面では、コンテナとbox divが全てデバイス画面に合わせて拡縮されています。すなわち、相対単位は絶対単位よりも画面やデバイスに応答的です。

また、2remのパディングが非常に小さく見えるのは、remがルート要素のフォントサイズに基づいているためです。通常はデフォルトの16pxですが、ここでは2pxに設定しているので、remの値が非常に小さくなっています。

相対単位の使用例

相対単位は、様々なレンダリングに対応した寸法とサイズが必要な場面に適しています。Webの開発で最も一般的に使われている単位です。

相対単位の主な使用例は以下の通りです:

レスポンシブレイアウト: パーセンテージ(%)、em、remなどの相対単位は、様々なスクリーンサイズや向きに適応するレスポンシブなレイアウトを作る際に不可欠です。
テキストサイズ: emやremなどの相対単位をフォントサイズに使うことで、ユーザーの好みのフォントサイズや端末特性に応じて、テキストが適切に拡縮されます。
フルードグリッド: パーセンテージ(%)などの相対単位は、フルードなグリッドレイアウトを作る際によく使われます。これらのレイアウトはビューポートサイズに応じて動的に調整されるため、レスポンシブWebデザインに最適です。幅、高さ、余白、パディングをパーセンテージで定義することで、要素がスクリーンサイズに合わせて適応的に変化します。
可変画像とメディア: 画像やメディア要素の寸法を指定する際は、相対単位の使用が望ましく、パーセンテージで画像の幅を定義すれば、コンテナに応じて等比例的にスケーリングされます。
ネストされたコンポーネント: 相対単位は、Webページ内のネストされたコンポーネントの可変性と柔軟性を維持する上で不可欠です。emやremなどの相対単位を使うことで、親コンテナのサイズやフォントサイズが変わっても、ネストされた要素のサイズが適切に維持されます。

ビューポートベース単位

ビューポートベースのCSS単位は、ブラウザウィンドウの可視領域であるビューポートのサイズに対する相対的な寸法を指定できるようにします。これらの単位はレスポンシブWebデザインに不可欠で、様々なスクリーンサイズやデバイスに適応するレイアウトを作れるようにしてくれます。ビューポートベース単位には以下のようなものがあります:

ビューポート単位	詳細
vw (viewport width)	vwはビューポートの幅に対する割合を表します。1vwはビューポート幅の1%に相当します。例えば、ビューポート幅が1000pxの場合、10vwは100px(1000pxの10%)になります。ビューポートの幅に応じて要素が等比例的にスケーリングされるデザインに有効です。
vh (viewport height)	vhはビューポートの高さに対する割合を表します。1vhはビューポート高さの1%に相当します。例えば、ビューポート高さが800pxの場合、20vhは160px(800pxの20%)になります。ビューポートの高さに基づいてスケーリングする要素に使われます。
vmin	1vminはビューポートの小さい方の寸法(幅または高さ)の1%に等しくなります。例えば、ビューポートの幅が1000pxで高さが800pxの場合、1vminは8px(800pxの1%)になります。
vmax	一方、1vmaxはビューポートの大きい方の寸法の1%に等しくなります。同じ例だと、1vmaxは10px(1000pxの1%)になります。

ビューポートベース単位の新しいバリエーションとして、large、small、dynamicなども登場しています。

ビューポートベース単位の使用例

ビューポートベース単位は以下のような場面で活用されます:

レスポンシブデザイン: ビューポートベースの単位を使うことで、様々なスクリーンサイズやデバイスに適応するレスポンシブなレイアウトを作ることができ、どの端末でも一貫したユーザー体験が実現できます。
ダイナミックなスケーリング: ビューポートベース単位により、ビューポートサイズの変化に応じて要素がプロポーショナルにスケーリングされるため、適応性の高いインターフェイスを設計できます。
フルスクリーン要素: ビューポート単位を使えば、ブラウザウィンドウ全体を占める全画面セクションや要素を作ることができ、没入感のあるユーザー体験を実現できます。
端末間の互換性: ビューポートベース単位を活用することで、大画面や小画面のデバイスに最適化されたWebエクスペリエンスを構築でき、アクセシビリティとユーザビリティの向上に貢献します。

専門単位

専門単位とは、サイズや寸法以外の特定の要件に対応するCSS単位です。いくつかの専門単位を見ていきましょう。

単位の種類	単位	詳細
時間ベース単位	s (秒)	秒数を表します。CSS アニメーションやトランジションのデュレーション指定に使われます。
	ms (ミリ秒)	ミリ秒単位の時間を表します。アニメーションやトランジションの正確なタイミング指定に使われます。
角度ベース単位	deg (度)	角度を度数で表します。CSSのtransform プロパティでの回転指定に使われます。
	rad (ラジアン)	角度をラジアンで表します。JavaScriptの計算で好まれることがあります。
	turn (回転)	1回転を360度または2πラジアンとする角度の単位です。CSS のアニメーションや変形で便利に使えます。例えば、0.25turnは90度の回転を表します。
解像度ベース単位	dpi (dots per inch)	解像度をドット毎インチで表します。主に印刷用スタイルシートで使われます。
	dpcm (dots per centimetre)	解像度をドット毎センチメートルで表します。dpiと同様ですが、インチではなくセンチメートルを使います。
	dppx (dots per pixel)	解像度をドット毎ピクセルで表します。高解像度ディスプレイ(Retinaなど)をターゲットにするメディアクエリで使われます。
グリッドベース単位	fr (fractional unit)	利用可能なスペースの割合を表します。CSS Gridレイアウトでフレキシブルなグリッドトラックを定義する際に使われます。例えば、1frは1つの割合、2frは2つの割合を意味し、柔軟でレスポンシブなグリッドレイアウトを実現できます。
フォントベース単位	ex	現在のフォントの小文字'x'の高さを表します。あまり一般的ではありませんが、テキストレイアウトの垂直方向の整列に便利です。
	ch	現在のフォントの'0' (ゼロ)文字の幅を表します。文字幅に基づいた要素のサイズ指定や配置に役立ちます。

これらの専門単位はそれぞれ固有の目的を持ち、デザインの様々な側面を正確にコントロールできるようにしてくれます。アニメーションのタイミング、角度の指定、デバイス解像度のターゲティング、柔軟なグリッドレイアウト、フォントに関連したスタイリングの微調整など、これらの単位は現代的で反応性の高いWebエクスペリエンスを構築するためのツールキットを提供してくれます。

角度と時間単位の使用例

以下のコード例は、角度(deg)と時間(s)の専門単位を使って、単純なCSSトランジションを制御しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }
    .container {
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
    }
    .rotate {
      rotate: 45deg;
      transition: rotate 2s;
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    .rotate:hover {
      rotate: 270deg;
    }
  </style>
  <body>
    <div class="container">
      <div class="rotate"></div>
    </div>
  </body>
</html>

ここでは、45度(45deg)の角度でロテーションされた div に「.rotate」クラスが設定されています。このdivにマウスオーバーすると、トランジションが2秒(2s)かけて45度から270度(270deg)まで回転します。このような細かな制御は、トランジションやアニメーションで一般的に見られます。

グリッドfr単位の使用例

以下のコードは、fr 単位をグリッド要素に使う例です。クラス名「container」のdivにグリッドレイアウトが設定されており、3つの子div要素の幅がfr単位で指定されています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      width: 400px;
      height: 400px;
      display: grid;
      grid-template-columns: 1fr 4fr 2fr;
    }
    .box-1 {
      background-color: red;
    }
    .box-2 {
      background-color: blue;
    }
    .box-3 {
      background-color: yellow;
    }
  </style>
  <body>
    <h1>Grid fr unit</h1>
    <div class="container">
      <div class="box box-1"></div>
      <div class="box box-2"></div>
      <div class="box box-3"></div>
    </div>
  </body>
</html>

子div要素の単位が'1fr'、'4fr'、'2fr'と指定されているため、コンテナの幅が7等分され、その比率で各子要素の幅が決まります。

フォントサイズch単位の使用例

以下のコードは、ch単位を使ってコンテナ要素のサイズをその中のテキストサイズに合わせる方法を示しています。クラス名「container」のdivには、テキストを含む「text-box」クラスの2つのdivが入っており、text-boxの幅が'10ch'に設定されています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      width: 400px;
      height: 400px;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      justify-content: center;
      align-items: center;
      background-color: navy;
    }
    .text-box {
      background-color: red;
      color: white;
      width: 10ch;
    }
  </style>
  <body>
    <div class="container">
      <div class="text-box">000000000000000</div>
      <div class="text-box">ABCDEFGHIJKLMNO</div>
    </div>
  </body>
</html>

この例では、10chは10個の0文字に相当するため、最初のtext-boxは10文字ぴったりですが、2つ目のtext-boxは15文字のため文字が溢れてしまっています。また、ちょうど10文字では溢れていないことに注意が必要です。これはchがゼロ文字の幅に基づいているためです。

CSS単位の選択と性能

CSS単位を扱う際には、それらがウェブページのパフォーマンスに及ぼす影響を考慮することが重要です。CSS単位自体が直接的にパフォーマンスに影響を与えるわけではありませんが、使い方によってはロード時間やユーザー体験に影響する可能性があります。以下のパフォーマンス要因を考慮し、最適化テクニックを活用することで、CSS単位の使用がスムーズで反応性の高いユーザー体験に寄与できるようになります。

ファイルサイズ

特定のCSS単位の使用、特に多数の要素や複雑なレイアウトの定義に際しては、CSSファイルのサイズが増大する可能性があります。パーセンテージ(%)やvw、vhなどの相対単位は、明示的な寸法定義が不要なため、ピクセル(px)などの絶対単位よりもコンパクトなCSSファイルサイズになる傾向にあります。これにより、特にモバイルデバイスや低速インターネット接続環境でのページ読み込み時間が改善されます。また、minificationやgzip圧縮などの手法を活用すれば、CSSファイルサイズをさらに小さくできます。

レンダリング効率

ピクセル(px)などの絶対単位は、一部のデバイスやスクリーン解像度においてレンダリングが効率的ではない可能性があります。相対単位やビューポートベースの単位を使うことで、幅広いデバイスでのスケーラビリティと優れたレンダリング性能が得られます。可能な限り、FlexboxやGridなどのレイアウトツールを活用し、明示的なサイズ指定を避けることも重要です。また、ブラウザのレンダリングエンジンによってはCSS単位の扱いに違いがあるため、複数のブラウザやデバイスでの動作確認が必要です。

アニメーションとトランジション

CSSでアニメーションを行ったりトランジションを実装する際は、選択するCSS単位がパフォーマンスに影響を及ぼします。ハードウェアアクセラレーションに対応したプロパティと適切な単位を使うことで、アニメーションの滑らかさやトランジションの性能を最適化できます。

CSS単位の選択ガイド

状況に応じた適切なCSS単位を選択することは、デザイン目標の達成と優れたパフォーマンス・レスポンシブネスの両立につながります。以下はCSS単位を選ぶ際のヒントです:

デザイン目標を考慮する: プロジェクトのデザイン要件と目標を理解し、レイアウトが固定、流動的、またはレスポンシブである必要があるかを判断します。
レスポンシブデザインを優先する: 相対単位やビューポートベースの単位を活用し、様々なビューポートサイズや向きに適応できるレイアウトを作りましょう。これにより、どの端末でも一貫したユーザー体験が実現できます。
複数の単位を組み合わせる: 絶対単位、相対単位、ビューポートベース単位を適切に組み合わせることで、精密なコントロールと柔軟性のバランスを取ることができます。例えば、固定要素にはピクセル(px)を、流動的なレイアウトにはパーセンテージ(%)を使うなどです。
様々なデバイスやビューポートでテストする: 異なるデバイス、スクリーンサイズ、ブラウザで定期的にテストし、選択したCSS単位が期待通りの動作をすることを確認しましょう。
パフォーマンスを最適化する: 特にレイアウトの寸法指定では、可能な限り絶対単位の使用を抑え、相対単位を活用することでスケーラビリティとファイルサイズの最適化が図れます。
アクセシビリティを考慮する: ユーザーの多様なニーズ(画面リーダーユーザーや大きなテキストサイズを好むユーザーなど)に対応できるよう、適切なCSS単位を選択しましょう。
一貫性を保つ: プロジェクト全体でCSS単位の使用を統一し、開発と保守の効率化を図りましょう。一貫した単位使用はコードの可読性も高めます。
最新情報を把握する: CSS単位の使用に関する最新のベストプラクティスや、新しい単位の登場、ブラウザサポートの変化などに留意し、状況に応じて柔軟にアプローチを調整していきましょう。

これらのヒントを参考にしながら、プロジェクトの要件に合ったCSS単位を慎重に選択すれば、視覚的に魅力的で反応性の高い、高パフォーマンスなWebエクスペリエンスを実現できるはずです。