Sジブンノート

Every Layoutを読みました

先日、『Every Layout - モジュラーなレスポンシブデザインを実現するCSS設計論』を読みました。 CSS設計に関する深い洞察が詰まった一冊で、多くの学びを得られました。本記事では、その中で特に印象に残ったポイントを紹介します。

CSS設計の基本方針: ブラウザに計算させる

CSSを書く際に、"height: 100px;" や "width: 100px;" のような絶対値を使うと、表示するデバイスやビューポートによって崩れる可能性があります。 これを防ぐには、相対的な値を活用するのが有効です。

例えば、以下のような単位や手法を使うことで、レスポンシブなデザインを実現できます。

  • 相対単位: em、ch、vw、cqw など
  • パーセンテージ："width: 100%"
  • 関数："calc() で動的な値を計算
  • コンテナクエリ：親要素に応じたスタイリングを可能にする

相対的な指定にすることで、ブラウザが親要素やビューポートのサイズを元にスタイルを計算してくれるため、デザインの柔軟性が向上します。 特にコンテナクエリは、より精密なレスポンシブデザインを可能にするため、積極的に使いたい機能です。

参考リンク：length - CSS: カスケーディングスタイルシート | MDN

そのため、CSSを書く際にpxを見かけたら「もっと相対的にできないか？」を考えるのが私の習慣になっています。 メディアクエリを極力使わずに対応できることを目指してみるのも面白いアプローチだと思います。

レイアウトの責任はどこに置くべきか？

リスト表示のUIを作成する際、リストアイテム間のスペースをどこで制御するべきか迷うことがあります。私は以下のアプローチが有効だと考えています。

  • リスト全体で制御

flexのgapや、以下のようなCSSルールでリスト要素間のスペースを管理します。

.list > * + * {
margin-top: 1rem;
}

このように、子要素ではなく親要素にスペース管理を委ねると、個別要素の再利用性が高まります。 特に、要素が自分の外側のスタイル（marginなど）を持つと、再利用時に制約が生じやすいため注意が必要です。

また、スペースの管理には以下を使い分けるのが重要です。

  • padding: 要素の内側のスペースに使用
  • margin: 要素間のスペースを管理する際に使用

この考え方を元に、flexやgridを使いこなせば、効率的なレイアウト設計が可能です。 また、最近ではサブグリッドも利用できるようになり、複雑なカードレイアウトでも縦横の整列が容易になっています。

まとめ

『Every Layout』はCSS設計の新しい視点を与えてくれる良書でした。 特に、 「ブラウザに計算させる」という考え方や、「レイアウトの責任を親要素に持たせる」 というアプローチは、日々の実装にすぐに役立つ内容です。

CSSにおける「責任の分離」を意識することで、再利用性が高く、メンテナンス性の良いコードを目指せます。ぜひ興味のある方は一読してみてください!