サイズ設定単位

The CSS Podcast - 008: Sizing Units

ウェブはレスポンシブなメディアですが、インターフェースの全体的な品質を高めるために、サイズを制御したい場合があります。たとえば、読みやすくするために行の長さを制限するなどです。ウェブのような柔軟なメディアで、どのようにすればよいでしょうか。

この場合は、ch 単位を使用できます。これは、レンダリングされたフォントで計算されたサイズの「0」文字の幅に相当します。この単位を使用すると、テキストのサイズを指定するように設計された単位でテキストの幅を制限できます。これにより、テキストのサイズに関係なく、予測可能な制御が可能になります。ch 単位は、この例のような特定のコンテキストで役立つ数少ない単位の 1 つです。

Numbers

数値は、opacity、line-height の定義に使用され、rgb のカラーチャネル値にも使用されます。数値は、単位のない整数（1、2、3、100）と小数（.1、.2、.3）です。

数値には、コンテキストに応じた意味があります。たとえば、line-height を定義する場合、単位を指定せずに数値を定義すると、その数値は比率を表します。

p {
  font-size: 24px;
  line-height: 1.5;
}

この例では、1.5 は p 要素の計算されたピクセル フォントサイズの150% に等しくなります。つまり、p の font-size が 24px の場合、行の高さは 36px として計算されます。

数字は次の場所でも使用できます。

• フィルタの値を設定するとき: filter: sepia(0.5) は、要素に 50% セピア フィルタを適用します。
• 不透明度を設定するとき: opacity: 0.5 は 50% 不透明度を適用します。
• カラーチャネル: rgb(50, 50, 50)。色の値を設定するには、0 ～ 255 の値を使用できます。色のレッスンをご覧ください。
• 要素を変換するには: transform: scale(1.2) は要素を初期サイズの 120% にスケーリングします。

パーセンテージ

CSS でパーセンテージを使用する場合は、パーセンテージの計算方法を理解する必要があります。たとえば、width は親要素で使用可能な幅の割合として計算されます。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

上の例では、レイアウトでデフォルトの box-sizing: content-box が使用されていると仮定すると、div p の幅は 150px です。

margin または padding をパーセンテージとして設定すると、方向に関係なく、親要素の幅の一部になります。

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

上の例では、margin-top と padding-left の両方が 150px に計算されます。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

transform 値をパーセンテージとして設定した場合、変換が設定されている要素が基準になります。この例では、p の translateX 値は 10%、width は 50% です。まず、幅を計算します。親の幅の 50% であるため、150px です。次に、150px の 10% を取得します。これは 15px です。

寸法と長さ

数値に単位を付加すると、ディメンションになります。たとえば、1rem はディメンションです。このコンテキストでは、数値に付加される単位は、仕様でディメンション トークンと呼ばれます。長さは距離を指すディメンションで、絶対値または相対値のいずれかです。

絶対長

すべての絶対長は同じベースに対して解決されるため、CSS で使用される場所に関係なく予測できます。たとえば、cm を使用して要素のサイズを設定し、印刷した場合、定規と比較すると正確である必要があります。cm や in などの物理単位は、ピクセルサイズが異なるため、画面にそのサイズで確実に表示されないことに注意してください。物理的な単位は、信頼性が高く、印刷スタイルシートに最適です。

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

このページを印刷すると、div は 10 x 5 cm の黒い長方形として印刷されます。CSS はデジタル コンテンツだけでなく、印刷コンテンツのスタイル設定にも使用されます。絶対長は、印刷用にデザインする場合に非常に便利です。

相対長

相対長は、パーセンテージと同様にベース値に対して計算されます。これらの値とパーセンテージの違いは、デフォルトのフォントサイズやウィンドウのサイズなど、関連するベースサイズに基づいてサイズを定義できることです。つまり、CSS には、フォントサイズの指標を基準とする ch や、ビューポート（ブラウザ ウィンドウ）の幅に基づく vw などの単位があります。相対長は、レスポンシブな性質のため、ウェブで特に便利です。

フォントサイズの相対単位

CSS には、レンダリングされたタイポグラフィの要素のサイズを基準とする便利な単位が用意されています。たとえば、テキスト自体のサイズ（em 単位）やタイポフェイスの文字の幅（ch 単位）などです。

ビューポート相対単位

ビューポート（ブラウザ ウィンドウ）のサイズを相対的な基準として使用できます。これらのユニットは、使用可能なビューポート スペースを分割します。

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

この例では、1vw がビューポートの幅の 1% であるため、div はビューポートの幅の 10% になります。p 要素の max-width は 60ch です。つまり、計算されたフォントとサイズで 60 個の「0」文字の幅を超えることはできません。

ビューポート相対単位の代替

ビューポート相対単位の値は、ビューポートのサイズが変更されない限り同じままです。ただし、モバイル ブラウザでは通常、ビューポートの計算サイズを変更せずに、小さな画面に可能な限り多くのコンテンツを表示するために、UI 要素を表示または非表示にします。ビューポート相対単位の代わりに、可視領域の変化を考慮した単位を使用できます。

コンテナ相対単位

要素のコンテナのサイズを相対的な基準として使用できます。これらのユニットは、使用可能なコンテナ容量を分割します。コンテナ クエリ内で、使用可能なスペースに基づいてフォントサイズを設定する場合に便利です。

その他の単位

特定のタイプの値を扱うために指定された単位もあります。

角度の単位

色モジュールでは、角度単位について説明しました。これは、hsl の色相など、度単位の値を定義する場合に役立ちます。変換関数内で要素を回転する場合にも便利です。

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

角度単位として deg を使用すると、div を中心軸で 90° 回転できます。

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

解像度の単位

上の例では、min-resolution の値は 192dpi です。dpi の単位は インチあたりのドット数です。たとえば、メディアクエリで Retina ディスプレイなどの非常に高解像度の画面を検出し、より高解像度の画像を提供するといった場合に、この機能が役立ちます。

理解度を確認する

サイズに関する知識をテストする

リソース

• CSS 仕様の値と単位レベル 4
• MDN のサイズと単位
• EMS について
• 割合の説明