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 はデジタル コンテンツだけでなく、印刷コンテンツのスタイル設定にも使用されます。絶対長は、印刷用にデザインする場合に非常に便利です。
| ユニット | 名前 | 次と同等 |
|---|---|---|
| cm | センチメートル | 1 cm = 96 ピクセル/2.54 |
| mm | ミリメートル | 1 mm = 1 cm の 10 分の 1 |
| Q | 1/4 ミリメートル | 1Q = 1 cm の 1/40 |
| in | インチ | 1in = 2.54cm = 96px |
| pc | ピカス | 1 個 = 1 インチの 1/6 |
| pt | ポイント | 1 pt = 1 インチの 1/72 |
| px | ピクセル | 1 ピクセル = 1 インチの 1/96 |
相対長
相対長は、パーセンテージと同様にベース値に対して計算されます。これらとパーセンテージの違いは、要素のサイズを状況に応じて設定できることです。つまり、CSS には、テキストサイズを基準とする ch や、ビューポート（ブラウザ ウィンドウ）の幅に基づく vw などの単位があります。相対長はレスポンシブな性質があるため、ウェブで特に便利です。
フォントサイズの相対単位
CSS には、レンダリングされたタイポグラフィの要素のサイズ（テキスト自体のサイズ（em 単位）やタイポフェイスの文字の幅（ch 単位）など）を基準とする便利な単位が用意されています。
| 単位 | 相対: |
|---|---|
| em | フォントサイズを基準とした場合、1.5em は親のベースの計算フォントサイズより 50% 大きくなります。（従来は、大文字の「M」の高さ）。 |
| ex | 要素の現在の計算されたフォントサイズで x-height、文字「x」、または「.5em」を使用するかどうかを判断するヒューリスティクス。 |
| 上限 | 要素の現在計算されたフォントサイズにおける大文字の高さ。 |
| ch | 要素のフォント内の狭いグリフの平均文字間隔（「0」グリフで表されます）。 |
| ic | 要素のフォント内の全角グリフの平均文字間隔（「水」（CJK 水の象形文字、U+6C34）グリフで表されます）。 |
| rem | ルート要素のフォントサイズ（デフォルトは 16 px）。 |
| lh | 要素の行の高さ。 |
| rlh | ルート要素の行の高さ。 |
ビューポート相対単位
ビューポート（ブラウザ ウィンドウ）のサイズを相対的な基準として使用できます。これらのユニットは、使用可能なビューポート スペースを分割します。
| 単位 | 相対 |
|---|---|
| vw | ビューポートの幅の 1% です。この単位は、ユーザーがサイズ変更するとフォントもサイズ変更されるように、ページの幅に基づいてヘッダー フォントのサイズを変更するなど、クールなフォント トリックを行うために使用されます。 |
| vh | ビューポートの高さの 1%。 フッター ツールバーがある場合などに、これを使用して UI のアイテムを配置できます。 |
| vi | ルート要素のインライン軸におけるビューポートのサイズの 1%。Axis は書き込みモードを指します。英語などの横書きモードでは、インライン軸は水平です。一部の日本語書体などの縦書きモードでは、インライン軸は上から下に走ります。 |
| vb | ルート要素のブロック軸内のビューポートのサイズの 1%。 ブロック軸の場合は、言語の方向です。 英語などの LTR 言語では、英語の読者はページを上から下に解析するため、縦方向のブロック軸が使用されます。縦書きモードには、横方向のブロック軸があります。 |
| vmin | ビューポートの短い辺の 1% |
| vmax | ビューポートの長辺の 1%。 |
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 ディスプレイなどの非常に高解像度の画面を検出し、より高解像度の画像を提供する場合に、この機能が役立ちます。
理解度を確認する
サイズ設定に関する知識をテストする
有効なディメンションは次のうちどれですか。
絶対単位と相対単位の違い
ビューポート単位は絶対値です。