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 は、デジタル コンテンツだけでなく、印刷コンテンツのスタイルにも使用されます。
絶対的な長さは、印刷媒体のデザインで非常に役立ちます。
単位 | 名前 | 次と同等 |
---|---|---|
cm | センチメートル | 1 cm = 96 ピクセル/2.54 |
mm | ミリメートル | 1 ミリメートル = 1 センチメートルの 10 分の 1 |
Q | 1/4 ミリメートル | 1Q = 1 センチメートルの 40 分の 1 |
in | インチ | 1in = 2.54cm = 96px |
パソコン | ピカス | 1 個 = 1 インチの 1/6 |
ポイント | ポイント | 1 ポイント = 1 インチの 1/72 |
ピクセル | ピクセル | 1 ピクセル = 1 インチの 1/96 |
相対的な長さ
相対的な長さは、パーセンテージのように、ベース値に対して計算されます。
これらとパーセンテージの違いは、要素のサイズを状況に応じて設定できることです。
つまり、CSS にはテキストサイズを基準とする ch
などの単位があり、
ビューポート(ブラウザ ウィンドウ)の幅に基づく vw
があります。
相対的長さは応答性が高いため、ウェブ上で特に有用です。
フォントサイズの相対単位
CSS には、レンダリングされたタイポグラフィの要素のサイズに関連する便利な単位が用意されています。
たとえば、テキスト自体のサイズ(em
単位)や書体の幅(ch
単位)などです。
単位 | 以下との比較: |
---|---|
フォントサイズに応じて つまり、1.5em は、計算された親のフォントサイズよりも 50% 大きくなります。 (従来は大文字の「M」の高さ)。 | |
例 | x-height を使用するかどうかをヒューリスティックに 文字「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
である
つまり、幅 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 ディスプレイをメディアクエリで使用して、高解像度の画像を提供するなどです。
理解度をチェックする
サイズ設定に関する知識をテストする
有効なディメンションは次のうちどれですか。
絶対単位と相対単位の違い
ビューポートの単位は絶対値で指定します。