コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > 効率的なレイアウト設計のためのCSSサブグリッド：CSS subgridの基本的な使い方

効率的なレイアウト設計のためのCSSサブグリッド：CSS subgridの基本的な使い方

CSS

Unlocking The Power Of CSS Subgrid For Efficient Layout Design

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Webデベロッパーにとって、ピクセルパーフェクトなレイアウトを実現することは常に難しい課題でした。本記事では、CSSサブグリッドを使用してレイアウト開発作業を簡素化する方法を紹介します。

ネストされたグリッドの配置、グリッドのレスポンシブ性の維持、そして簡潔なコードの記述など、コードの柔軟性と構造のバランスを取ることは依然として困難です。ここにCSSサブグリッドが登場します。これはレイアウトデザインを一変させるものです。従来のグリッドシステムで遭遇する問題を解決するだけでなく、高い精度と優雅さでそれを成し遂げるツールを想像してください。私がWebデベロッパーが直面するレイアウトの一般的な課題を検証し、それらすべてを克服する鍵であるCSSサブグリッドを明らかにしていきます。

レイアウトの問題点を特定する

Webサイトのレイアウトデザインに取り組む際、開発者は多くの課題に直面します。従来のグリッドシステムはこれらの問題の一部を解決する基盤を築きますが、それ自体も一連の難題をもたらします。以下では、開発者やデザイナーに共通するこれらのレイアウトの痛みの中から、従来のグリッドシステムの使用に起因するものを掘り下げていきます。

  • ネストされたグリッドの難題: ネストされたグリッドとは、別のグリッド(親要素)の中にあるグリッドシステム(子/子要素)のことです。従来のグリッドシステムを使用してこのようなシナリオでのレイアウト問題を解決しようとすると、子要素は親要素のレイアウトスタイルを継承せず、独立して動作するため、開発者は2つの別々のグリッドを管理する必要がありました。

  • レスポンシブ性の硬直化: 従来のグリッドシステムを使ってネストされたグリッドの問題を解決すると、レスポンシブ性の問題が生じます。つまり、子要素が他のデバイスの画面に正しく表示されなくなります。Webが登場した当初はコンピューターからしかアクセスできませんでしたが、その後、様々なデバイス(スマートフォン、タブレット、ラップトップなど)が市場に出回るようになりました。今日、レスポンシブ性は非常に重要です。従来のグリッドシステムをネストされたグリッドに適用すると、異なる画面で表示した際に子要素がグリッドの境界線を越えてあふれてしまう可能性があります。

  • メンテナンスの悩み: プロジェクトが進化するにつれ、レイアウトの要件も変わります。従来のグリッドはこれらの進化に適応することが難しく、機能はするもののまとまりのないコードになってしまいます。

  • コードの重複: 従来のグリッドシステムを使ってきちんとしたレイアウトデザインを生成しようとすると、コードの重複が生じがちです。この状況はコードの読みやすさとメンテナンス性を損ない、1つの要素を変更すると他の関連する要素にも影響が及びます。

上記の問題点への解決策を考えていましたか? それならもう探す必要はありません。CSSグリッドがその答えです。

CSSサブグリッドを理解する

CSSグリッドはCSS Grid Layout Module Level 2の一部として導入されました。これはグリッドレイアウトシステムの機能を拡張する機能で、ネストされたグリッドコンテナが親要素のグリッド定義を継承できるようになり、より一貫性のあるグリッドシステムを生み出します。

グリッドは、CSSのfloatやpositionプロパティを使わずに、列や行に基づくレイアウト問題に対する開発者が求めていたソリューションを提供します。

以下は、CSSグリッドが解決する主な問題です。

  • グリッド定義の継承: CSSグリッドにより、グリッドコンテナ内の子要素が、親要素と同様のグリッドレイアウトに参加できるようになりました。つまり、子要素は親の行および列のトラックを継承し、全体のグリッド構造に合わせて配置されます。

  • レスポンシブデザインの強化: CSSグリッドはレスポンシブ性を大幅に向上させ、子要素が様々なデバイスや画面で同じグリッドレイアウトに適応できるようになりました。

  • メンテナンスのストリーム化: Webデベロッパープロジェクトは変化しやすく、そのほとんどの変更がレイアウト要件に影響を与えます。そのような場合、グリッドの相互接続性により、親グリッドに加えた調整が子要素に反映されるため、コードの順序が維持され、レイアウト関連の問題のリスクが低減します。

  • コード効率の改善: CSSグリッドにより、ネストされた要素でグリッドに関連するコードを指定する必要がなくなるため、より効率的で読みやすいコードが可能になります。結果として、グリッド構造が親コンテナから継承されるので、きれいで読みやすいコードが実現します。

CSSサブグリッドの段階的な実装

ここまでCSSグリッドについて多くのことを知ることができましたが、ここではその知識をさらに深めるために、Webプロジェクト(ブログカード)でCSSグリッドを実装する手順を段階的に説明していきます。

ステップ1: HTMLを設定する

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Subgrid</title>
 </head>
 <body>
   <div class="parent-grid">
     <div class="child-grid">
       <img src="./1000_F_627731195_osJSHAWmrNeBWi7RSm8rbXNbBVSVFE3k.jpg" />
       <p>人々</p>
       <h1>ナイジェリアの人々</h1>
       <p>
         ナイジェリアの人々の心に触れてみましょう。多様で強靭、そして深い絆で結ばれています。彼らの物語は、国の力強さと精神力を映し出しています。
        </p>
      </div>
      <div class="child-grid">
        <img src="./austin-ramsey-9X3DmoEM64k-unsplash.jpg" />
        <p>テクノロジー</p>
        <h1>イーロン・マスクとテスラという獣</h1>
        <p>
          テスラとともにイノベーションの最前線を体験しましょう。持続可能なエネルギー、電気自動車の未来、そして画期的な技術の力を発見してください。
        </p>
      </div>
      <div class="child-grid">
        <img src="./nupo-deyon-daniel-67ruAEYmp4c-unsplash (4).jpg" />
        <p>場所</p>
        <h1>ラゴス!アフリカの驚異</h1>
        <p>
          活気に満ちたラゴスの都市景観を発見しましょう。伝統と現代性が融合するこの文化の中心地に飛び込み、ユニークな体験をしてみてください。
        </p>
      </div>
    </div>
  </body>
</html>

私たちのHTMLマークアップはかなりシンプルです。親コンテナとなる main div タグ(<div class="parent-grid">)が1つあり、その中に class名 child-grid の div タグ(<div class="child-grid">)が子要素として入っています。各子要素には画像タグ(<img/>)、ヘッダータグ(<h1></h1>)、2つの段落タグ(<p></p>)が含まれています。

上の動画は、ブログカードデザインからグリッドやグリッドプロパティを省略した場合の影響を示しています。画像やテキストが全体のページレイアウトを無視して無秩序な垂直の順序で表示されていることに注目してください。

ステップ2: ブログカードに一般的なスタイルを適用する

HTMLマークアップを作成できたので、次はそれにいくつかの一般的なスタイルを適用していきます。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(
    to right,
    rgba(33, 165, 132, 0.7),
    rgba(13, 152, 194, 0.7)
  );
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

ページ全体のmarginとpaddingをゼロに設定し、box-sizingプロパティをborder-boxにしました。この措置により、ブログカードが必要以上のスペースを取らないようにしています。また、ブログカードに注目を集めるため、背景色を設定していることにも注目してください。

上の動画では、ブログカード全体の周りに余分なスペースがないこと、そして注目を集めるための色とりどりの背景色が表示されています。

ステップ3: グリッドコンテナを設定する

一般的なスタイリングが完了したので、次はグリッドコンテナを設定します。

.parent-grid {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  justify-content: space-around;
  width: 85%;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
}

グリッドコンテナを設定するために、親要素のdisplayプロパティをgridに設定しました。さらに、grid-template-columns (各子要素が取れるスペースを示す)、width (親要素の全体の幅を設定)、margin (親要素を画面の中央に配置するのに役立つ)のプロパティを設定しています。また、justify-contentプロパティも確認してください。これは子要素の周りのスペースをどのように扱うかを定義するのに役立ちます。

上の画像から、各ブログカード要素がグリッドレイアウトで表示され、各グリッド列の周りに適切なスペースが確保されていることがわかります。

ステップ4: ブログカードをよりよく見せる

グリッドコンテナの設定は完了しましたが、CSSグリッドの力を見る前に、ブログカードをよりよく見せる必要があります。

.child-grid img {
  width: 100%;
  height: 250px;
}

.child-grid p {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  font-size: 18px;
  font-weight: lighter;
  width: 90%;
}

.child-grid h1 {
  margin-left: 10px;
  font-weight: 600;
  font-size: 25px;
  width: 90%;
}

.child-grid p:nth-child(2) {
  border-radius: 25px;
  width: 35%;
  text-align: center;
  padding: 4px 0;
}

まず、子要素の画像が大きすぎないように、その幅と高さを指定しています。次に、適切なスタイルを設定してヘッダーと段落タグを微調整しています。

上の画像では、各ブログカード要素の見栄えが改善されていることがわかります。各ブログカード要素と前のものとの間の余白にも注目してください。

ステップ5: サブグリッドの子要素を確立する

ブログカードの微調整が完了したので、今度はCSSグリッドの力を見てみましょう。

.child-grid {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

子要素に対して、displayプロパティをgridに設定し、grid-template-columnsとgrid-template-rowsをsubgridに設定しています。

上の画像では、ブログカード全体がぎゅっと詰まって見えています。これは、grid-template-rowプロパティをsubgridに設定したためです。

グリッドプロパティによって、子要素が親コンテナのグリッド プロパティを継承することを覚えていますか。デフォルトでは、親コンテナには1行しか割り当てられていないため、すべての子要素がこの1行に収まろうとしています。これを修正するには、grid-rowプロパティを指定する必要があります。

.child-grid {
  background: white;
  color: black;
  grid-row: 1/5; 
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

grid-row プロパティ (grid-row-start と grid-row-end の短縮形) を 1/5 に設定しています。これは、グリッドが 1 行目から始まり、5 行目まで広がることを示します。また、各子要素の見た目を良くするため、背景色を白、フォント色を黒に設定しています。

上の画像では、グリッドを適用したブログカードの変化が表れています。カード コンポーネントの配置が改善され、全体的なレイアウトがとてもすっきりとした印象を与えていることがわかります。

ステップ 6: サブグリッドの変化を体感する

CSSグリッドを適用してブログカードの見た目がかなり良くなったことがおわかりいただけたと思います。しかし、変化をより明確に感じていただくため、サブグリッド適用前と適用後のブログカードの画像を示します。

サブグリッド適用前:

上の画像はグリッドを適用していないブログカードです。カード内の配置のずれに注目してください。これがグリッド機能を追加する必要があった理由です。

サブグリッド適用後:

20240116_200805

上の画像は、グリッド適用による変化の大きさを示しています。ブログカード内のすべての要素が適切に構造化されています。グリッドの適用により、以前の配置のずれの問題が解決されています。

サブグリッドによるレスポンシブ性の向上

従来のグリッドシステムで生じるさまざまなレイアウトの課題を解決するだけでなく、CSSグリッドは子要素が親要素のグリッド構造を継承できるようにすることでレスポンシブ性を大幅に向上させます。グリッドに内在するレスポンシブ機能について詳しく見ていきましょう。

  • デバイス間での一貫したグリッド構造: 従来のグリッドシステムを使用する場合、さまざまなデバイスや画面サイズで一貫したグリッド構造を維持することは大変な作業になります。しかし、グリッドを使えばこの問題は簡単に解決できます。子要素が親コンテナのグリッドトラックにシームレスに配置されるためです。

  • さまざまな画面サイズへの適応: ユーザーがさまざまな画面サイズのデバイスからウェブサイトにアクセスするため、最適な表示のためにレイアウトを調整する必要があります。CSSグリッドにより、子要素が同じグリッドレイアウトに適応できるようになり、画面サイズに関係なく一貫した構造を維持できます。

  • ネストされたグリッドにおけるレスポンシブ課題の解消: 従来のグリッドシステムでは、ネストされたグリッドがレスポンシブ性の課題を引き起こすことがありました。サブグリッドを使えば、親グリッドのレスポンシブ性が入れ子のグリッドにも継承されるため、子要素が小さな画面で正しく表示されないという問題が解消されます。

  • メディアクエリの複雑さの低減: 従来のグリッドレスポンシブデザインでは、さまざまなデバイスに合わせて異なるレイアウトを処理するため、複雑なメディアクエリが必要になることがありました。しかし、グリッドを使えばグリッド構造が継承されるため、複雑なメディアクエリをあまり必要としなくなります。

サブグリッドの実例

ここまで、CSSグリッドは強力なツールであり、従来のCSSグリッドの適切な拡張版であり、さまざまなレイアウトの問題を効果的に解決することがわかりました。次に、グリッドが大きな成功を収めている実際のシナリオを見ていきましょう。

  • カードレイアウト: グリッドが大きな成功を収めているシナリオの1つがカードレイアウトです。各カードがメインコンテナのグリッド構造を継承できるため、すべてのカードに統一されたデザインを与えることができます。

  • Eコマースサイトの商品一覧: Eコマースプラットフォームでは、各商品アイテムが親のグリッド構造を継承するため、視覚的に一貫性があり、レスポンシブな表示が可能になることからグリッドを商品一覧に採用しています。

  • データテーブル: グリッドを使えば、各行と列が親のグリッド構造を継承するため、より柔軟で読みやすいデータテーブルのレイアウトを作成できます。

  • 画像ギャラリー: 開発者は、グリッドを使うことで、各画像が画面サイズに関係なく一貫した配置を維持できるため、画像ギャラリーのデザインを向上させています。

サブグリッドの未来を見据えて

今後のCSSグリッドが持つ可能性、つまりパフォーマンスの向上、機能の拡張、ブラウザ間の幅広い互換性などを期待するなか、グリッドの真の美しさは、さまざまなレイアウトの課題を巧みに解決することにあると分かります。カードレイアウトデザインやレスポンシブ画像ギャラリーに適用されたとしても、確かなことは、グリッドを使えば要素の配置の問題に確実に対処できるということです。

©コハム