CSSの単位の指定

2023.04.05

px

用途：固定サイズで表示したい箇所
スクリーンの1ピクセルの長さを1とした単位。レスポンシブサイトであっても固定サイズで表示したい箇所全般に広く使用されるが、文字サイズに指定した場合、ブラウザの文字サイズ変更機能が効かなくなるというデメリットがある。

％

用途：親要素のサイズに比例して変化するようにしたい箇所
割合を表す単位。幅、高さ、余白、位置などのサイズを親要素を基準として相対的な割合で指定し、ブラウザ幅が変動しても指定した割合を維持したまま伸縮する状態を作ることができる。

  • 適用するプロパティによって親要素の何のサイズを基準とするのかが微妙に異なる
  • 要素が入れ子になっている場合は計算が複雑になる可能性がある

といったクセがあるので、どこのサイズを基準として％値を算出しているのかよく考えて使用する必要がある。

em

用途：その時々の文字サイズに連動したサイズ指定をしたい箇所
親要素に指定・継承されている文字サイズ（大文字Mの高さ＝全角1文字分）を基準とした単位。その時々の文字サイズに連動して変動するようなサイズ指定をしたい場合に重宝する単位だが、emは親要素の文字サイズを基準としているため、em指定の要素が入れ子になった場合は計算が複雑になる。

  • 本文の字下げ
  • 一行の高さ（行送り）
  • リンクやボタンのテキストに付随するアイコン類

rem

用途：ブラウザの文字サイズ変更機能を生かしたまま、固定サイズで表示したい箇所
root emの略。ルート（html）のフォントサイズを1として考える単位。
ブラウザのデフォルトのフォントサイズは16pxであり、html要素にfont-size: 62.5%を指定することで、pxにすると10pxになる。この状態で26pxとしたい場合、remの指定は2.6remになるので、計算が分かりやすくなる。
ただし、pxで幅や高さが絶対値で固定されている要素の中でremを使用すると、ブラウザ設定でフォントサイズを変えられた場合remのサイズも変わってしまうため、文字崩れが発生してしまう。この場合はフォントサイズもpxで指定する。

  • font-sizeにpxの代わりに使用することで、ブラウザの文字サイズ変更機能を阻害しないようにする
  • paddingやmarginなどに使用することで、ブラウザの文字サイズ変更機能を使われた場合でも文字と余白のデザインバランスを担保できるようにする

vw、vh、vmin、vmax

用途：viewportサイズに連動してシームレスに伸縮させたい箇所
ビューポートサイズを基準とした単位で、1vwはブラウザの横幅の1%、1vhはブラウザの縦幅の1%に相当する。100vwでviewportの幅いっぱい、100vhでviewportの高さいっぱいになる。（%と違い親要素に依存しないため、remとほぼ同じ関係性となる）
例として、ブラウザ幅が1200pxのとき1vwは12px、ブラウザ幅が768pxのとき1vwは7.68pxとなる。
ただしvw単位はスクロールバーの幅を含む仕様のため、width: 100vw;を指定するとスクロールバーの幅分、横スクロールが発生してしまうので注意。この問題を回避するため、幅は100%で指定する。

  • ファーストビュー全体を覆うようなボックスを実装する
  • 縦横比率を維持したボックスを実装する
  • テキストをブラウザ幅に応じてなめらかに伸縮させる。折返しを発生させたくないタイポグラフィをテキストで実装する際に特に重宝する

vminは、ビューポートの幅と高さのうち、小さい（狭い）ほうを基準とする単位。
vmaxは、ビューポートの幅と高さのうち、大きい（広い）ほうを基準とする単位。

vmin、vmaxの使用例として、ページのヘッダ要素の上下のpaddingが挙げられる。ビューポートが小さい場合（スマホ）で、paddingが少なくなってしまうことがある。vminを使用することで、ビューポートより小さいサイズ（幅または高さ）に基づいてpaddingを適切に設定できる。

.page-header {
  padding: 10vmin 1rem;
}

ch

用途：文字の量に基づいた幅が必要なときに最適な単位
ex と ch という単位は文字が基準になっているという意味で em と rem という単位に似ている。ex と ch が違うのはフォントに依存するということである。

ch は chracter unit で、その要素を表示するのに使用されるフォントの“0(ゼロ、U+0030)”の文字の送り幅（※）を“1ch”と定義した相対単位である。
基本的には等幅フォントが対象で、要素にwidth: 40ch と指定すれば40文字入る幅が設定され、通常のフォントだけでなく点字のレイアウトにも便利である。
※“送り幅(advance measure)”は文字の開始位置から次の文字の開始位置までの長さのこと。書字方向によって異なり、横書きの場合は文字の横幅、縦書きの場合は文字の高さとなる。

ch を使用した長さは親要素や祖先要素の文字の大きさによって変動する。ルート要素の文字の大きさをもとに長さを計算したい場合には rch を使用する。

<div class="sample-box">

  文字の大きさ
  <p class="font-3ch">
    猫は、上のかぎり黒くて、ことはみな白き。
  </p>

  長さ
  <div class="boxw-3ch">
    width: 3ch;
  </div>

</div>
div.sample-box { font-size: 16px;}

p.font-3ch { font-size: 3ch;}
div.boxw-3ch { width: 3ch;}

【参考】
https://moonglows76.tumblr.com/post/103016608753/%E3%81%82%E3%81%AA%E3%81%9F%E3%81%8C%E7%9F%A5%E3%82%89%E3%81%AA%E3%81%84%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%AA%E3%81%84css%E3%81%AE7%E3%81%A4%E3%81%AE%E5%8D%98%E4%BD%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://web.havincoffee.com/css/value/length/ch.html

ex

ex単位とは、レンダリングに使用されるフォントのx-heightを表す。x-heightとは x などの小文字の高さで、通常はフォントの中でもっとも背の高い文字の約半分の高さとなる。ex はいろんな用途があるが、タイポグラフィ的な微調整に使われることがほとんどかと思われる。

  • 段落の行の高さをx-heightの1.2倍に設定する。
  • 要素のパディングとマージンをx-heightの倍数に設定する。
  • ベースライングリッドを作成して要素を垂直に揃える。

cap

CSSのcap単位とは、ラテン語の大文字の高さを1とする相対単位である。そのため、フォントに設定された他の単位によってその長さが決まる。

cap単位はスケールに依存せず、フォントのサイズに対応したレイアウトを作成する場合に役立つ。たとえば、アイコンを見出しやリストなどのテキストに揃えるときに便利で、使用フォントに関係なく視覚的な比率を維持できる。

.icon {
  height: 1cap;
  margin-left: 0.5cap;
}

cap単位を使うとアイコンの配置にポジショニングを使用しなくて済む。アイコンは単にフォントの高さに揃えているだけである。cap単位はr(em)単位と同様に、アクセシビリティとユーザビリティを向上させることができる単位である。レイアウトのスケールに依存せず、ユーザーが好みのフォント設定やデバイスの画面サイズに関係なく、コンテンツを効果的に操作できるようになる。

ic

CSSのic単位はおそらく欧米では必要のない単位で、CJK（中国語・日本語・韓国語）で使用されるフォントの全角文字（水: 水表意文字、U+6C34）の幅を表す。

【参考】
https://qiita.com/degudegu2510/items/6d5d53ca9833aef7ec83

lh

CSSのlh単位とは、line-heightプロパティが使用されている要素の計算値（行の高さ）と同じになる。
この単位は、タイポグラフィで素晴らしいレイアウト効果を実現するのに役立つ。

以下の例は、line-heightに基づいてボックスのパディングをサイズ調整している。

:root {
  --font-size: 1rem;
  --line-height: 1;
  --padding: 0.8lh; /* Change this value to see the full effect */
}
.demo {
  max-width: 40ch;
  padding: var(--padding);
  background: skyblue;
}

【参考】
https://coliss.com/articles/build-websites/operation/css/relative-length-units-based-on-font.html

ビューポート単位（vi,vb,svh,lvh,dvh）

ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応することができる。Safari 15.4でこれらの新しいビューポート単位がサポートされた。
サポートされているブラウザ（Can I Use）

  • vi：既存のViewportのインライン方向を基準にした百分率単位
  • vb：既存のViewportのブロック方向を基準にした百分率単位
  • Small Viewport：動的に変化するコンテンツ（アドレスバーなど）が展開された時のビューポートサイズを基準に定義される
    • svw：Small Viewportのwidthを基準にした百分率単位
    • svh：Small Viewportのheightを基準にした百分率単位
    • svi：Small Viewportのインライン方向を基準にした百分率単位
    • svb：Small Viewportのブロック方向を基準にした百分率単位
    • svmin：Small Viewportのwidthとheightの小さい方を基準にした百分率単位
    • svmax：Small Viewportのwidthとheightの大きい方を基準にした百分率単位
  • Large Viewport：動的に変化するコンテンツ（アドレスバーなど）が格納された時のビューポートサイズを基準に定義される
    • lvw：Large Viewportのwidthを基準にした百分率単位
    • lvh：Large Viewportのheightを基準にした百分率単位
    • lvi：Large Viewportのインライン方向を基準にした百分率単位
    • lvb：Large Viewportのブロック方向を基準にした百分率単位
    • lvmin：Large Viewportのwidthとheightの小さい方を基準にした百分率単位
    • lvmax：Large Viewportのwidthとheightの大きい方を基準にした百分率単位
  • Dynamic Viewport：動的に変化するコンテンツ（アドレスバーなど）が格納状態／展開状態に合わせたビューポート。これにより、UAインターフェイス要素が表示されているかどうかにかかわらず、コンテンツがビューポートに正確に収まるようにサイズは自動的に調整される
    • dvw：Dynamic viewportのwidthを基準にした百分率単位
    • dvh：Dynamic viewportのheightを基準にした百分率単位
    • dvi：Dynamic viewportのインライン方向を基準にした百分率単位
    • dvb：Dynamic viewportのブロック方向を基準にした百分率単位
    • dvmin：Dynamic viewportのwidthとheightの小さい方を基準にした百分率単位
    • dvmax：Dynamic viewportのwidthとheightの大きい方を基準にした百分率単位

ダイナミックビューポート単位では、仮想キーボードの存在が考慮されていないことに注意する。Chrome 108からはmetaタグの設定でこの動作を変更できる。

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

【参考】
https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewport-sizes.html
https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewports.html

コンテナ単位（qw, qh）

CSSのコンテナ単位は、クエリコンテナのサイズを基準にした長さを指定する。

  • qw(query width)：コンテナ幅の1%。例えば、5qwはコンテナ幅の5%
  • qh(query height)：コンテナ高さの1%。例えば、5qhはコンテナ高さの5%
  • qmin(query minimum)：クエリ幅qwまたはクエリ高さqhの小さい方の値
  • qmax(query maximum)：クエリ幅qwまたはクエリ高さqhの大きい方の値
.section-title {
  font-size: clamp(1.25rem, 3qw, 2rem);
  margin-bottom: clamp(0.5rem, 1.5qw, 1rem);
}

【参考】
https://coliss.com/articles/build-websites/operation/css/css-container-query-units.html

inserted by FC2 system