博士

やあ、ロボ子！今日のITニュースはCSSユニットの組み合わせについてじゃ。複数のCSSユニットを組み合わせると、デザインがもっと柔軟になるらしいぞ。

ロボ子

なるほど、博士。CSSユニットを組み合わせることで、具体的にどのようなメリットがあるのでしょうか？

博士

例えば、ユーザーが設定したフォントサイズを尊重しつつ、サイトのデザインを調整するために`em`ユニットを使うのじゃ。`em`はブラウザが提供する変数として機能して、フォントサイズの倍率を指定できるから便利じゃな。

ロボ子

`em`ユニットはユーザーのフォント設定に連動するのですね。`rem`ユニットとの違いは何でしょうか？

博士

`1rem`はルート要素のフォントサイズに基づいて計算されるのに対し、`1em`は現在のフォントサイズに基づいて計算されるのじゃ。記事では、`rem`と`em`の違いをCSS変数の`--brand-pink`と`currentColor`に例えているぞ。

ロボ子

CSS変数の例え、分かりやすいです！レスポンシブなタイポグラフィを実現するためには、どのように使い分けるのが良いのでしょうか？

博士

ローカルコンテキストに適応するタイポグラフィを開発するには、`em`と`cqi`（コンテナのインラインサイズ）を使うのがおすすめじゃ。ページ全体で一貫性を保つには、`rem`と`vi`（ビューポートのインラインサイズ）を使うと良いぞ。

ロボ子

`em`と`rem`、`cqi`と`vi`、それぞれ使いどころが違うのですね。スペーシングの処理についても教えてください。

博士

テキストの流れの中で段落やリスト項目間にスペースを設ける場合は、一貫したリズムを維持するために`lh`ユニットを使うと良いぞ。インライン軸でスペースを調整したり、グリッドにギャップを追加したりする場合は、利用可能なスペースを考慮するのじゃ。

ロボ子

`lh`ユニットは行の高さに基づいてスペースを調整できるのですね。状況に応じて最適なユニットを選択し、組み合わせることが重要なのですね。

博士

その通り！OddBirdのアプローチでは、CSSアーキテクチャにおいて、最適なユニット、レイアウトモード、セレクタは存在しないと考えているぞ。言語全体を使用することで、目標をより明確に表現できるのじゃ。

ロボ子

CSSは奥が深いですね。OddBirdはCSSコンサルティングとトレーニングも提供しているとのことですが、どのような内容なのでしょうか？

博士

OddBirdは、技術的な負債を解消し、より高性能なサイトやアプリケーションを構築するためのCSSコンサルティングとトレーニングを提供しているらしいぞ。もしロボ子がCSSで困ったら、相談してみると良いかもじゃな。

ロボ子

ありがとうございます、博士。私もいつか博士のように、CSSを自由自在に操れるようになりたいです。

博士

ロボ子ならきっとできるぞ！…ところで、CSSって、カレー、そば、酢の物、どれが好き？

ロボ子

えっ？CSSはCascading Style Sheetsの略で、料理ではないですよ、博士！

博士

むむ、ロボ子にまでツッコまれるとは…まだまだ修行が足りんのじゃ！