知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説

CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。
CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。

Relative length units based on font -Going beyond pixels and (r)ems in CSS
by Brecht De Ruyte

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• CSSの単位: capとは
• CSSの単位: chとは
• CSSの単位: emとは
• CSSの単位: exとは
• CSSの単位: icとは
• CSSの単位: lhとは
• CSSの単位: remとrlhとは
• CSSの単位: rex, rch, ricとは

はじめに

現在、CSSでは利用可能な単位が数多くあります。その中でサイズやフォントによく使用されている単位は依然としてピクセル（px）とr(em)が多いようです。

そろそろCSSで使用する単位について見直す時期がきました。

この記事ではMDNで簡単に見つけられるCSSで利用可能な単位をリスト化するだけでなく、それらの単位がどのようなシーンで役立つのか、例を挙げて解説しようと思います。

第1弾は、フォントに基づく相対的なサイズの単位から始めます。MDNにあるリストに基づいていますが、今後追加される予定の単位も解説しています。単なるMDNのコピペではありません。また、使用したことがない単位もリストにはありました。CSSの<length>の素晴らしい世界を私と一緒に旅してみましょう。

それぞれの単位について、最初に基本知識を解説し、次に単位の使用方法に関するアイデアを解説しています。どのようにその単位を使うかはもちろんたくさんのアイデアがあると思いますので、他の人がインスピレーションを得られるように共有していただけると嬉しく思います。また、この記事のデモは、目を楽しませることは最小限に抑え、実用性を優先しました。

CSSの単位: capとは

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

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

下記のデモでは、cap単位でアイコンを各テキストと同じ高さに揃えています。さらに、マージンにも使用できます。

See the Pen
Cap Unit in CSS by coliss (@coliss)
on CodePen.

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

CSSの単位: chとは

CSSのch単位とは、レンダリングに使用されるフォントの0（ゼロ、U+0030）の高さを表します。絶対単位ですが、現在の要素のフォントサイズに比例して拡大縮小されます。

ch単位は主に、すべての文字が同じ幅をもつ等幅フォントで要素のサイズを調整するために使用されていました。これは、文字0の測定がすべての等幅フォントで一貫しているからです。しかし、等幅フォントで使用しなくても、ch単位を使用してレスポンシブの素晴らしいビヘイビアを作成することができます。ただし、注意すべき点は複数の書き込みモードで機能することです。Webページのインライン軸が垂直である場合、ゼロの高さに基づいて計算されます。

ワンライナーのレスポンシブグリッドはどうでしょうか？
この記事によるとテキストの1行の理想的な幅は50-60文字で、私が読んだ他の論文では平均45-75文字でした。

このアイデアをさっそくグリッドに取り入れてみます。たとえば、1行に45文字収まる場合のみに、アイテムが隣り合うグリッドが必要だとします。これはCSS Gridをch単位で実装できます。

実際の動作は、デモページをご覧ください。

See the Pen
Using ch unit for responsive behaviour by coliss (@coliss)
on CodePen.

私は最近Davy De Pauwに、grid-template-columnsにclamp()関数を組み合わせる方法を教えてもらいました。CSS Gridとch単位を組み合わせることがいかにパワフルであるかが分かります。ただし、ブラウザによってはグリッドの計算に苦労することがあるので注意してください。

See the Pen
Grid using min and clamp by coliss (@coliss)
on CodePen.

ch単位は、文字の量に基づいた幅が必要なときに最適な単位です。

CSSの単位: emとは

CSSのemとは、使用されている要素のfont-sizeの計算値と同じです。非常に汎用性の高い単位で、親要素のfont-sizeに対する要素のマージン、パディング、フォントサイズなどを設定するために使用されています。この単位は非常に多用途で、理解するのは簡単です。しかし、使いこなせるようになるのは難しいかもしれません。

em単位を使いこなしている人をたくさん知っていますが（彼らを賞賛します）、親に基づく相対サイズを使いこなすのは難しいことだと私は常々感じています。ブラウザ内で直接デザインしていて、ピクセルパーフェクトなデザイナーが肩越しに見ていない限りは、、、と冗談はさておき、私自身も勉強が必要ですが、コツをつかむのに重要な単位だと信じています。

em単位の使用例を示すために、メディアクエリでの使用が興味深いかもしれないと考えました。

3つのdiv要素があり、それぞれが3つの子要素を含んでいます。3つのdiv要素には、異なる単位（px, em, rem）に基づいたクラスを与えます。

基本的なスタイルはおいといて、アイテムは特定の幅で3カラムレイアウトに切り替わります。重要なのは、デフォルトのfont-sizeを1rem（デフォルトでは16px）から変更しないことです。

そして、メディアクエリは下記の通りです。

このCSSで、(r)em値はどちらも640px（16x40 = 640）で、ブラウザの基本フォントサイズでは当然ですが、これら3つすべてが同時にトリガーされます。

では、ブラウザのデフォルトのフォントサイズを変更してみます。Chromeの場合「設定」「デザイン」「フォントをカスタマイズ」でデフォルトのフォントサイズを30に変更します。
注: ブラウザのズームでは機能しません。それは動作が異なります。

スクリーンのサイズを640pxにすると、下記のように表示されます。

続いて、1200px（この環境では40em）にすると、下記のように表示されます。

ここで、質問です。
メディアクエリにr(em)値を使用することは、アクセシビリティとユーザーの好みにとって良いことなのでしょうか？

答えは、状況によって異なります。というのは、簡単に意見が分かれてしまうからです。下記のデモページで実際に試してみてください。また、その際はデフォルトのフォントサイズを変更してみることを忘れないでください。

See the Pen
Responsive behaviour, using px, em or rem by coliss (@coliss)
on CodePen.

CSSの単位: exとは

CSSのex単位とは、レンダリングに使用されるフォントのx-heightを表します。x-heightとはxなどの小文字の高さで、通常はフォントの中でもっとも背の高い文字の約半分の高さです。

タイポグラフィの領域に入ってしまいましたが、CSSでの実用的な使用例があるのでご容赦ください。たとえば、こんな素晴らしい使用例があります。

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

前述のcapのデモを思い出してください。アイコンをテキストに揃えるときに、x-heightの倍数に設定すると、見た目にも美しく配置されます。

See the Pen
ex cap em by coliss (@coliss)
on CodePen.

あるいは、フォントのx-heightだけで視覚的なボーダーを作成するエフェクトはどうでしょうか。

See the Pen
Using ex value for borders by coliss (@coliss)
on CodePen.

ex単位は毎日使用するものではないかもしれませんが、こういう単位があるといざという時に便利です。また、タイポグラフィ好きなら、完璧な縦のリズムを生み出すことで、この単位から得るものが多いと確信しています。

CSSの単位: icとは

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

私はこの単位を評価するデモを作成できなかったので、sitepointで見つけたデモを紹介します。段落の幅を30icに設定されています。

See the Pen
Using ic units by coliss (@coliss)
on CodePen.

CSSの単位: lhとは

CSSのlh単位とは、line-heightプロパティが使用されている要素の計算値（行の高さ）と同じになります。

この単位は、タイポグラフィで素晴らしいレイアウト効果を実現するのに役立ちます。

私はMDNのデモにインスピレーションを得て、自分なりの解釈を加えて、この単位のパワーを示すために改良してみました。

See the Pen
lh unit by coliss (@coliss)
on CodePen.

lh単位を使ったもう1つの素晴らしいアイデアは、line-heightに基づいてボックスのパディングをサイズ調整することです。--padding変数を変更して、その効果を試してみてください。

See the Pen
lh unit as padding by coliss (@coliss)
on CodePen.

CSSの単位: remとrlhとは

CSSのrem単位とはroot emの略で、ルート要素のフォントサイズに対する要素のフォントサイズを測定します。通常html要素で表されるルート要素は、ほとんどのブラウザでデフォルトの16pxです。したがって、リセットCSSなどで変更されない限り、1remは16pxに相当します。

デベロッパーの人には、メディアクエリの値にremを使用することを誓っている人もいます。

rem単位には慣れるのにすこし時間がかかるかもしれませんが、デフォルトのフォントサイズを変更するユーザーにとってはより良い指標となります。メディアクエリにおけるpx vs r(em)の比較という記事を見かけると思いますが、意見がすこし多すぎて、この記事に追加することはできませんでした。

ルートを基準にした単位といえば、rlhもあります。rlh単位とは、ルートの行の高さに基づいたものです。

CSSの単位: rex, rch, ricとは

現在、ex, ch, icのルート要素はほとんどのブラウザでされるようになりましたが、この記事の執筆時点ではFirefoxではまだ時間が必要です。Can I Useでrchのサポート状況を確認できます。

フォントの相対的な<length>単位については、以上です。あなたの次のプロジェクトで、たとえページ上のちょっとして要素であっても、これらの単位をぜひ試してみてください。小さなステップを積み重ねることで、将来的にそれらを良い習慣にすることができます。この記事を書いている間、私は非常に楽しめました。