CSSの新しい単位lhとrlhを便利に使おう

:::note info
この記事は[NTTテクノクロス Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ntt-tx)シリーズ2の17日目の記事です。
:::

# はじめに
こんにちは。NTTテクノクロスの鈴木雅貴です。当社製品やソリューション、受注案件を中心とした成果物をはじめとして、イベントやらコミュニケーションといった社内のあれこれを、デザインの力でよくしていくというチームのリーダをしています。個人としてはWeb標準技術まわりのスキルで生きており、[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　Ver2.5対応版](https://book.mynavi.jp/ec/products/detail/id=132028)のいち著者だったりします。

シリーズ1の14日目ではダークモード実現のための新機能を紹介しました。

今日は、2023年11月のFirefox 120で主要ブラウザの実装が出揃った、CSSの新しい長さの単位である`lh`と`rlh`を、使い方例とともに紹介します。

# `lh`と`rlh`とは

CSSの長さの単位です。[MDNの`lh`と`rlh`の解説はこちら 相対的な長さのところにあります](https://developer.mozilla.org/ja/docs/Web/CSS/length)

`lh`は、`line-height`と同じ長さを表します。

```css
p {
    font-size: 16px;
    line-height: 1.5;
}
```

このような定義がされていた場合、この`p`での`1lh`は`16px * 1.5 = 24px`となります。

`rlh`はルート要素の`lh`ですね。

ちなみに、`line-height`などがどの長さにあたるのかについては「[理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その1）Inline Layout─Frontrend Conference | HTML5Experts.jp](https://html5experts.jp/takazudo/13464/)」を読むことをおすすめします。

# `lh`と`rlh`の使いどころ

## テキスト横の画像の高さを`line-height`と合わせる

例としてよく挙げられるのは、テキストと並んだ画像の高さをテキスト行の高さに合わせたい場合ですね。こんなやつ。

```html
<ul>
    <li><img src="https://placeholder.pics/svg/30" alt="" />選択肢1</li>
    <li><img src="https://placeholder.pics/svg/30" alt="" />選択肢2</li>
    <li><img src="https://placeholder.pics/svg/30" alt="" />選択肢3</li>
</ul>
```
![lh1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/fa420578-fa3e-ab36-935a-8418298cfa6c.png)


高さ30pxのアイコンをそのまま並べると不格好。決め打ちで調整してもよいんですが、`line-height`を変更したときにやり直すのは面倒、`calc()`使えば変更時も対応できるけど、そこまでするか、という…

そんなときに`lh`を使うのです。

```css
img {
    height: 1lh;
}
```

![lh2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/64e21752-eff2-a9d5-6e93-749fc9eadcab.png)

これで画像の高さが`line-height`と同じになりました。あとはアイコンを縦中央に持ってきて、`gap`もつけてあげて…

```css
li {
    display: flex;
    align-items: center;
    gap: 0.25em;
}
```

![lh3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/a318c821-6e4b-cd86-8609-95908d294d95.png)

いい感じになりました！

このように、`line-height`ベースでサイズを調整すると、すこし楽になるかもです。

## いわゆるバーティカルリズムに活用する

バーティカルリズムとは、縦方向の要素の間隔を一定の基準で揃えて、美しく読みやすいレイアウトを実現するデザイン手法です。今回は、この基準を`line-height`にしてみましょう。

こんなレイアウトの画面があったとします。

![vertical1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/96e70e9e-2d16-fcbc-8a2f-386748d01358.png)

```css
body {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    padding: 1rem;
}

header,
main,
aside,
footer {
    padding: 1rem;
    background-color: rgba(50, 50, 50, 0.1);
}

header,
footer {
    grid-column: span 2;
}

main,
aside {
    grid-column: span 1;
}
```

では、`gap`と各グリッドアイテムの`padding`を`line-height`にそろえてみましょう。こういうときに`rlh`を使うと楽です。

```css
body {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: repeat(3, auto);
    gap: 1rlh; /* rlhにする */
    padding: 1rlh; /* rlhにする */
}

header,
main,
aside,
footer {
    padding: 1rlh; /* rlhにする */
    background-color: rgba(50, 50, 50, 0.1);
}

header,
footer {
    grid-column: span 2;
}

main,
aside {
    grid-column: span 1;
}
```

こんな感じに揃います！楽ですね！

![vertical2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/00e293f7-3e55-b798-7d7d-19a7b610a864.png)

せっかくなので、タイトルの高さとマージンも`1rlh`に揃えてしまいましょう。

```css
h1 {
    line-height: 1rlh;
    margin-bottom: 1rlh;
}
```

きれいに揃いました！タイトルの高さは`1rlh`よりちょっと高くてはみ出ていますが、リズムは保たれているので違和感はありません。

![vertical3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16939/c9c6b257-5af1-eab2-4bea-ca4550fcc370.png)

`rlh`を使うと、このようにバーティカルリズムを簡単に実現することができます。

# 注意点

2023年12月時点で主要ブラウザ全てに実装されていますので、心配せず使うことができます。

シンプルな単位ですので、利用時の注意点も特にありません。無理に使う必要はないですが、行高さに合わせたいなというときには思い出せると幸せになれるかもです。

# 終わりに

Firefox 120での実装によって安心して使えるようになった`rh`と`rlh`を紹介しました。他にも色々な単位が続々と追加されていますので、たまに[MDNのlength](https://developer.mozilla.org/ja/docs/Web/CSS/length)を覗いてみると、新たな便利単位が見つかるかもしれません。

[NTTテクノクロスアドベントカレンダー](https://qiita.com/advent-calendar/2023/ntt-tx)シリーズ2の明日18日目は @k-cts によるSBOM作ってみた記事です。お楽しみに！