サイズ設定単位

The CSS Podcast - 008: Sizing Units

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

この場合、計算されたサイズでレンダリングされたフォントの「0」文字の幅に等しい ch 単位を使用できます。このユニットを使用すると、テキストのサイズ調整用に設計されたユニットを使用してテキストの幅を制限できます。これにより、テキストのサイズに関係なく、予測可能な制御が可能になります。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 を使用して要素のサイズを設定し、印刷した場合、定規と比較すると正確に印刷されます。

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」文字の幅を超えることはできません。

その他の単位

特定の型の値を扱うように指定されている単位が他にもいくつかあります。

角度の単位

色モジュールでは、角度単位について説明しました。これは、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 の単位は、1 インチあたりのドット数を表します。メディアクエリで Retina ディスプレイなどの非常に高解像度の画面を検出し、より高解像度の画像を提供する場合に、この機能が役立ちます。

理解度を確認する

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

リソース

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