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