サイズ設定単位

CSS ポッドキャスト - 008: サイズ設定ユニット

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

この例では 「0」の幅に等しい ch 単位を使用できます。 計算されたサイズでレンダリングされます。 このユニットを使用すると、テキストのサイズ調整用に設計されたユニットを使用して、テキストの幅を制限できます。 その結果 テキストのサイズに関係なく 予測可能な制御が可能です ch ユニットは、この例のような特定のコンテキストで役立つ少数のユニットの一つです。

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×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 でのサイズ設定と単位
• エムズのすべて
• 割合の説明