レスポンシブ対応のインテリア系マガジンレイアウト

複雑なレイアウトをどう扱うか

インテリアスタイルを紹介する雑誌風のWebページを作るとき、一番の難題はグリッドの複雑さをレスポンシブで維持することでした。デスクトップでは4カラムの非対称グリッドを使いつつ、モバイルでは読みやすいシングルカラムに変換する必要があります。

CSS SubgridとGrid Templateの活用

親グリッドのトラックを子要素にも引き継がせるSubgridを使うことで、ネストされたカードコンポーネントがページ全体のグリッドラインに揃う構造を実現しました。これがないと、カード内のテキストと画像がそれぞれ別のリズムで並ぶ問題が起きます。CSS Grid Template Areasによる名前付きレイアウトは可読性が高く、チームでコードを読む場面でも混乱が少ないです。

ブレークポイントの考え方

デバイス幅ではなくコンテンツが崩れる時点でブレークポイントを設定しました。結果として設定したブレークポイントは3つで、一般的な5〜6個より少なく済んでいます。

インテリアスタイルのビジュアルを損なわないことを最優先にしたため、画像のアスペクト比固定にはaspect-ratioプロパティを全面採用しました。padding-topハックに頼らずに済む点で、コードの見通しがよくなりました。制作期間は約3週間で、最終的なHTMLとCSSの合計行数は1,200行程度に収まっています。