サイズ設定単位

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

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

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

数字

数値は、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% です。まず、幅を 150px として計算します。これは、親の幅の 50% であるためです。次に、150pxのうち10%（15px）に乗ります。

サイズと長さ

数値に単位を関連付けると、その単位はディメンションになります。 たとえば、1rem はディメンションです。この場合、数値に付加される単位は、仕様ではディメンション トークンと呼ばれます。長さは距離を表すディメンションで、絶対値または相対値を使用できます。

絶対長さ

すべての絶対長は同じ底に対して解決されるため、CSS 内で使用されている場所に関係なく予測可能です。たとえば、cm を使用して要素のサイズを調整して出力する場合、ルーラーと比較すると正確であるはずです。

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

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

相対的な長さ

相対的な長さは、パーセンテージのように、基本値に対して計算されます。これらとパーセンテージの違いは、コンテキストに応じて要素のサイズを設定できることです。つまり、CSS にはテキストサイズを基準とする ch や、ビューポート（ブラウザ ウィンドウ）の幅に基づく vw などの単位があります。相対長さは応答性が高いため、ウェブでは特に有用です。

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

CSS は、テキスト自体のサイズ（em 単位）や書体文字の幅（ch 単位）など、レンダリングされたタイポグラフィの要素のサイズに対する便利な単位を提供します。

ビューポート相対単位

ビューポート（ブラウザ ウィンドウ）のサイズを相対基準として使用できます。これらのユニットにより、使用可能なビューポート領域が占有されます。

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

その他の単位

特定の種類の値を扱うために指定されている単位が他にもあります。

角度の単位

カラー モジュールでは、角度の値（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 のすべて
• パーセンテージの説明