【HTML,CSS】グリッド型のレイアウトを解説

グリッド型レイアウトは、Webデザインにおいて柔軟性と構造化を両立するツールです。この記事では、グリッド型レイアウトの基本概念、特徴、適した用途、メリット・デメリット、そして実践的なコード例を通じて、効果的なグリッドデザインの作成方法を紹介します。

はじめに
グリッド型とは？
グリッド型のレイアウト作成
まとめ

はじめに

この記事のコードをコピペして出力してみよう。

VSCodeのインストールがまだの方はこちら

グリッド型とは？

グリッド型レイアウトは、Webデザインにおいて広く使用される構造的なアプローチです。

特徴

ページを水平線と垂直線で分割し、格子状の構造を作る
要素を整列させ、秩序立てた配置を可能にする
柔軟性があり、様々なデバイスに対応できる

適している用途

ポートフォリオサイト: 作品を整然と表示できる
ECサイト: 商品を均等に配置できる
ニュースサイト: 記事を整理して表示できる
写真ギャラリー: 画像を整然と並べられる

メリット

情報の整理: コンテンツを整然と配置し、ユーザーにとって見やすい構造を提供する
更新性: 新しい要素の追加や変更が容易
レスポンシブ対応: デバイスに応じて最適な表示が可能
統一感: サイト全体の一貫性を保ちやすい
デザインの効率化: 制作時間を短縮できる

デメリット

創造性の制限: 厳格なグリッドに縛られ、自由なデザインが制限される可能性がある
インパクトの欠如: 均等な配置により、特定のコンテンツを強調しにくい
コンテンツの優先度: 情報の重要度に差をつけにくい
技術的な複雑さ: 適切なグリッドシステムの実装には一定の技術力が必要

グリッド型レイアウトは、整然としたデザインを求めるサイトや情報量の多いサイトに適しています。ただし、特定のコンテンツを強調したい場合や、より自由なデザインを求める場合には、他のレイアウト手法との組み合わせを検討する必要があります。

グリッド型のレイアウト作成

以下のページを作成します。

コード例

index.html
※クリックするとコードが表示されます。

index.html

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>グリッドレイアウト</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>グリッドレイアウト</h1>
      </header>
      <div class="grid">
        <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 class="grid-item">グリッドアイテム 5</div>
        <div class="grid-item">グリッドアイテム 6</div>
      </div>
      <footer>
        <p>フッターコンテンツ</p>
      </footer>
    </div>
  </body>
</html>

styles.css
※クリックするとコードが表示されます。

styles.css

CSS

:root {
  --primary-color: #2ecc71;
  --secondary-color: #ecf0f1;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--secondary-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header,
footer {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

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

.grid-item {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

h1 {
  margin: 0;
}

index.htmlの解説

HTML

<!DOCTYPE html>
<html lang="ja">

<!DOCTYPE html>: HTML5文書であることを宣言
<html lang="ja">: HTMLのルート要素、日本語文書であることを指定

HTML

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>グリッドレイアウト</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<meta charset="UTF-8" />: 文字エンコーディングをUTF-8に設定
<meta name="viewport" ...>: レスポンシブデザインのためのビューポート設定
<title>: ページタイトルの設定
<link>: 外部CSSファイルの読み込み

HTML

<body>
  <div class="container">

<body>: 表示されるコンテンツの開始
<div class="container">: 全体を包むコンテナ

HTML

    <header>
      <h1>グリッドレイアウト</h1>
    </header>

<header>: ページのヘッダー部分
<h1>: ページの主要タイトル

HTML

    <div class="grid">
      <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 class="grid-item">グリッドアイテム 5</div>
      <div class="grid-item">グリッドアイテム 6</div>
    </div>

<div class="grid">: グリッドコンテナ
<div class="grid-item">: グリッドアイテム（6つ）

HTML

    <footer>
      <p>フッターコンテンツ</p>
    </footer>
  </div>
</body>
</html>

<footer>: ページのフッター部分
閉じタグ: </div>, </body>, </html>で各要素を適切に閉じる

このHTMLはグリッドレイアウトの基本的な構造を提供していますが、実際のレイアウトはCSSで制御する必要があります。グリッドの列数や行数、アイテムの配置などはCSSで詳細に設定することができます。

styles.cssの解説

CSS

:root {
  /* プライマリーカラー（主要な色）を定義 */
  --primary-color: #2ecc71; /* 緑色 */
  
  /* セカンダリーカラー（背景色）を定義 */
  --secondary-color: #ecf0f1; /* 薄いグレー */
}

カスタムプロパティを使用してカラーテーマを定義
--primary-color: 主要な色（緑系）
--secondary-color: 背景色（薄いグレー）

CSS

body {
  /* フォントファミリーを日本語フォントに設定 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  
  /* デフォルトのマージンを0にリセット */
  margin: 0;
  
  /* デフォルトのパディングを0にリセット */
  padding: 0;
  
  /* 背景色をセカンダリーカラーに設定 */
  background-color: var(--secondary-color);
}

日本語フォントを優先的に使用
マージンとパディングをリセット
背景色をセカンダリーカラーに設定

CSS

.container {
  /* 最大幅を1200pxに設定し、それ以上は広がらないようにする */
  max-width: 1200px;
  
  /* 中央揃えのためのマージン設定 */
  margin: 0 auto;
  
  /* 内側の余白を20pxに設定 */
  padding: 20px;
}

max-width: 1200px;: コンテンツの最大幅を設定
margin: 0 auto;: 中央揃え

CSS

header,
footer {
  /* 背景色をプライマリーカラーに設定 */
  background-color: var(--primary-color);
  
  /* テキストの色を白に設定 */
  color: white;
  
  /* 内側の余白を20pxに設定 */
  padding: 20px;
  
  /* 下部にマージンを20px設定して、次の要素との隙間を作る */
  margin-bottom: 20px;
  
  /* コーナーを丸くするための設定 */
  border-radius: 5px;
}

background-color: var(--primary-color);: カスタムプロパティを使用
border-radius: 5px;: 角を丸く

CSS

.grid {
  /* グリッドレイアウトを有効化する */
  display: grid;
  
  /* 列数と幅を指定して3列のグリッドを作成する */
  grid-template-columns: repeat(3, 1fr); 
  
  /* グリッドアイテム間のスペースを20pxに設定する */
  gap: 20px;
}

display: grid;: グリッドレイアウトを有効化
grid-template-columns: repeat(3, 1fr);: 3列のグリッドを作成
gap: 20px;: グリッドアイテム間のスペースを設定

CSS

.grid-item {
  /* 各グリッドアイテムの背景色を白に設定 */
  background-color: white;
  
  /* 内側の余白を20pxに設定 */
  padding: 20px;
  
  /* コーナーを丸くするための設定 */
  border-radius: 5px;
}

各グリッドアイテムの背景色、パディング、角丸を設定

CSS

h1 {
   /* h1要素の上部マージンを削除して、隙間ができないようにする */
   margin: 0; 
}

h1要素のマージンを削除

このCSSは基本的なグリッドレイアウトを提供していますが、より複雑なレイアウトやレスポンシブデザインを実現するには、メディアクエリやより詳細なグリッド設定が必要になる場合があります。

まとめ

グリッド型レイアウトは、要素を格子状に配置するデザイン手法です。
主な特徴は高い柔軟性と構造化されたレイアウトの提供です。
複雑なレイアウト、レスポンシブデザイン、ダッシュボードなどに特に適しています。
メリットにはレイアウトの一貫性、効率的な空間利用、レスポンシブ対応の容易さがあります。
デメットとしては、学習曲線の高さと古いブラウザとの互換性が挙げられます。
実装にはCSS Gridを使用し、grid-template-columnsやgrid-template-rowsなどのプロパティを活用します。