CodeGym /コース /Frontend SELF JA /Gridコンテナの作成

Gridコンテナの作成

Frontend SELF JA

レベル 27 , レッスン 1

使用可能

2.1 プロパティ display: grid

CSS Grid Layoutは、行と列を使用して複雑なウェブページのレイアウトを作成できる強力なレイアウトシステムだよ。CSS Gridを使う際の基本的なステップは、Gridコンテナを作成することなんだ。ここでは、display: gridプロパティを使ってGridコンテナを作成し、その基本的な側面を管理する方法を見ていこう。

Gridコンテナ作成の基本概念

プロパティ display: grid

display: gridプロパティは要素をGridコンテナとして指定するんだ。これがCSS Gridのすべての機能を使用するための基本的なステップになるよ。

例:

CSS

    
      .grid-container {
        display: grid;
      }

Gridコンテナの基本要素

display: gridプロパティを使用してGridコンテナを定義すると、このコンテナのすべての子要素は自動的にgrid要素になるよ。これにより、コンテナ内での配置や整列を管理できるんだ。

例:

CSS

    
      .grid-container {
        display: grid;
        border: 2px solid #000;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 1px solid #fff;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Gridコンテナの例</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">アイテム 1</div>
            <div class="grid-item">アイテム 2</div>
            <div class="grid-item">アイテム 3</div>
          </div>
        </body>
      </html>

コードの説明:

.grid-container: display: gridプロパティを使用して要素をGridコンテナとして指定するよ。コンテナを視覚的に際立たせるためにボーダーも追加しているんだ。
.grid-item: Gridコンテナ内の要素の基本スタイルを定義しているよ。背景色、テキストの色、パディング、ボーダー、そしてテキストのセンタリングなんかが含まれているんだ。

2.2 ネストしたGridコンテナ

CSS Gridの利点の一つにネストしたGridコンテナを作成する機能があるんだよ。これを使うと、あるgrid要素がその子要素のためのgridコンテナになるような複雑なレイアウトを作成できるんだ。

例:

CSS

    
      .grid-container {
        display: grid;
        gap: 10px;
        border: 2px solid #000;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 1px solid #fff;
        text-align: center;
      }

      .nested-grid-container {
        display: grid;
        gap: 5px;
        background-color: #2980b9;
        padding: 10px;
      }

      .nested-grid-item {
        background-color: #1abc9c;
        padding: 10px;
        border: 1px solid #fff;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>ネストしたGridコンテナ</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">アイテム 1</div>
            <div class="grid-item">
              <div class="nested-grid-container">
                <div class="nested-grid-item">ネストしたアイテム 1</div>
                <div class="nested-grid-item">ネストしたアイテム 2</div>
              </div>
            </div>
            <div class="grid-item">アイテム 3</div>
          </div>
        </body>
      </html>

コードの説明:

.nested-grid-container: display: gridプロパティを使ってネストしたGridコンテナを定義しているよ。要素間の隙間(gap: 5px)や内側のパディング(padding: 10px)も追加しているんだ。
.nested-grid-item: ネストしたGridコンテナ内の要素の基本スタイルを定義しているよ。背景色、パディング、そしてボーダーなんかが含まれているんだ。

2.3 Gridコンテナの動作の管理

display: gridプロパティを使うと、Gridコンテナの動作を管理するための追加のプロパティも使えるようになるよ。例えば、grid-auto-flowプロパティは要素の自動配置を管理するんだ。

例:

CSS

    
      .grid-container {
        display: grid;
        grid-auto-flow: row;
        gap: 10px;
        border: 2px solid #000;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 1px solid #fff;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>auto-flowを持つGridコンテナ</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <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 class="grid-item">アイテム 5</div>
          </div>
        </body>
      </html>

2.4 Gridコンテナ内でのFlexboxの使用

場合によっては、grid要素内でFlexboxを使用することで、より複雑なレイアウトを作成できるんだ。これにより、両方の技術の利点を組み合わせることができるよ。

CSS

    
      .grid-container {
        display: grid;
        gap: 10px;
        border: 2px solid #000;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        border: 1px solid #fff;
        text-align: center;
      }

      .flex-container {
        display: flex;
        gap: 10px;
      }

      .flex-item {
        background-color: #1abc9c;
        padding: 10px;
        flex: 1;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Gridコンテナ内のFlexbox</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item flex-container">
              <div class="flex-item">Flexアイテム 1</div>
              <div class="flex-item">Flexアイテム 2</div>
            </div>
            <div class="grid-item">アイテム 2</div>
            <div class="grid-item">アイテム 3</div>
          </div>
        </body>
      </html>

コードの説明:

.flex-container: display: flexを使ってgrid要素をflexコンテナとして指定するよ。
.flex-item: flexコンテナ内の要素の基本スタイルを定義しているよ。背景色、パディング、そして柔軟性(flex: 1)なんかが含まれているんだ。

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION