HTML(19)CSSグリッドで作るタイル型レイアウト

初心者向けCSSグリッドで作るタイル型レイアウト

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円
(2024/12/16 23:17時点)
感想(2件)

前回はFrexboxの使い方について紹介しました。

HTML(18)Flexboxの使い方

今回はCSSのFrex box（フレックスボックス）でのレイアウトの組み方について紹介したいと思います。

今回はCSSグリッドでタイル型に並べる方法を紹介します。

タイトル: 初心者向けCSSグリッドを使ったタイル型レイアウトの完全ガイド

ウェブデザインの現場では、視覚的に美しいレイアウトが求められています。その中でも、タイル型レイアウトは情報を整理してユーザーに提供するのに最適です。本記事では、CSSグリッドを使って簡単かつ柔軟にタイル型レイアウトを作る方法を初心者向けに解説します。

1. CSSグリッドの基本

CSSグリッドは、2次元レイアウトシステムで、行と列を自由に定義できます。まずは基本的な構文を確認しましょう。

基本のHTMLとCSS

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}

上記のコードで、4列のグリッドが作成されます。repeat(4, 1fr) は各列を均等に分割する指定です。

実際の表示例

このコードをブラウザで表示すると、次のような結果が得られます。

1行に4つのアイテムが均等に並ぶ。
各アイテムの間に10pxの間隔が設定される。

CSSグリッドの基本をさらに学びたい方はこちら

2. タイル型レイアウトの作り方

タイル型レイアウトでは、異なるサイズの要素を組み合わせて動的なデザインを作ります。

例: ギャラリー風のレイアウト

<div class="gallery">
  <div class="item item--large">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item item--wide">4</div>
  <div class="item">5</div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

.item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.item--wide {
  grid-column: span 3;
}

ポイント:

grid-column: span を使うと、要素が複数の列にまたがるようになります。
同様に、grid-row: span を指定すると行をまたぐことも可能です。

ビジュアルイメージ

上記のコードを実行すると、以下のようなレイアウトが実現します：

アイテム1は大きなブロック（2列×2行）。
アイテム4は横幅が広い（3列分）。
その他のアイテムは標準サイズ。

タイル型レイアウトの実例を見る

3. レスポンシブ対応

レスポンシブデザインに対応するには、メディアクエリを使用してグリッドの列数を動的に変更します。

コード例

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

解説

auto-fit と minmax() を使用すると、アイテムが自動的に最適なサイズで調整されます。
画面幅が600px以下の場合、列数が2列に変更されます。

レスポンシブデザインの基本を知りたい方はこちら

4. よくある質問 (FAQ)

Q: CSSグリッドとフレックスボックスの違いは？

A: CSSグリッドは2次元（行と列）のレイアウトに適しており、フレックスボックスは1次元（行または列）レイアウトに最適です。

Q: すべてのブラウザで使えますか？

A: CSSグリッドは、最新のブラウザでほぼ完全にサポートされています。ただし、古いバージョンのIEなどを考慮する場合、フォールバックを用意しましょう。

5. 実際のデザインでの活用例

以下は、eコマースサイトやポートフォリオでよく使用されるタイル型レイアウトのデモです。

コード例

<div class="product-grid">
  <div class="product">Product 1</div>
  <div class="product">Product 2</div>
  <div class="product product--highlight">Product 3</div>
  <div class="product">Product 4</div>
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.product {
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.product--highlight {
  grid-column: span 2;
  grid-row: span 2;
  background: #fffae6;
  border: 2px solid #ffd700;
}

実際のデザイン例を詳しく見る