Movatterモバイル変換

[0]ホーム
URL:

コリス

CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説

サイト構築 -CSS

Post on:2017年4月14日

sponsorsr

CSS Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Gridを始めるのを難しく感じさせるかもしれません。

CSS Gridの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。

サイトのキャプチャ

CSS Grid Layout Terminology, Explained

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSS Gridの仕様

CSS Gridの仕様では、グリッドは次のように定義されています。

グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア（グリッドコンテナのコンテンツ）に配置することができます。

今まで使わなかった用語がたくさんありますね。
これらの用語を理解することで、CSS Gridの実装が簡単に思えるようになります。

「グリッドコンテナ」と「グリッドアイテム」とは

グリッドを使用するには、まずは「グリッドコンテナ(grid container)」から始めます。これは名前が示すとおり、グリッドの要素を内包する要素です。
displayプロパティで値に設定すると、「グリッドコンテナ」が作成されます。

CSS
1
2
3
4
5
.grid-container{
    display:grid;/* ブロックレベルのグリッドコンテナを作成 */
    display:inline-grid;/* インラインレベルのグリッドコンテナを作成 */
    display:subgrid;/* グリッドコンテナでもあるグリッドアイテムで使用 */
}

「グリッドコンテナ」のプロパティの値は、flexboxやtableに似ています。
flexboxだと、display: flex; display; inline-flex;。
tableだと、display: table; display: inline-table;。

グリッドコンテナのキャプチャ

ブルーのラインで囲った要素が「グリッドコンテナ」

「グリッドコンテナ」は、子要素である「グリッドアイテム(grid item)」の新しいグリッドフォーマットのコンテキストを確立します。
また「グリッドアイテム」には特別なルールがあるので、注意が必要です。

  • floatおよびclearプロパティは「グリッドアイテム」には適用されません。
  • vertical-alignプロパティは「グリッドアイテム」には適用されません。
  • ::first-lineと::first-letterの擬似要素は「グリッドコンテナ」には適用されません。

他の事例は、下記をご覧ください。

「グリッドライン」とは

「グリッドライン(grid line)」とは、グリッドを分割する水平線と垂直線です。水平と垂直の各「グリッドライン」は参照できる番号を持っており、グリッドコンテナの最も外側の境界から始まります。

グリッドラインのキャプチャ

「グリッドライン」の水平・垂直線と参照番号

「グリッドライン」の参照番号は、「グリッドアイテム」をコンテナ内に配置するときに使用されます。「グリッドアイテム」を指定した「グリッドライン」に配置するか、「グリッドライン」を別の「グリッドライン」にまたがるように配置することもできます。

CSS
1
2
3
4
5
6
7
8
9
10
.grid-container{
    display:grid;
    grid-template-columns:100px100px100px;
    grid-template-rows:100px100px100px;
}
.grid-item{
    grid-column:2;
    grid-row-start:1;
    grid-row-end:3;
}

グリッドアイテムの配置

「グリッドアイテム」を水平の2、垂直のスタートは1でエンドは3で、配置

「グリッドライン」は、制作者が指定した名前で参照することもできます。下記のコードでは、同じ結果を得られますが、名前付きの「グリッドライン」を使用しています。

CSS
1
2
3
4
5
6
7
8
9
10
.grid-container{
    display:grid;
    grid-template-columns:100px[grid-item-start]100px[grid-item-end]100px;
    grid-template-rows:[grid-item-start]100px100px[grid-item-end]100px;
}
.grid-item{
    grid-column:grid-item-start/grid-item-end;
    grid-row-start:grid-item-start;
    grid-row-end:grid-item-end;
}

「グリッドカラム」「グリッドロウ」「グリッドトラック」とは

「グリッドカラム(grid column)」とは、隣接する2つの垂直の「グリッドライン」間のスペースです。「グリッドカラム」のサイズは、grid-template-columnsプロパティによって決まります。

「グリッドロウ(grid row)」とは、隣接する2つの水平の「グリッドライン」間のスペースです。サイズはgrid-template-rowsプロパティによって決まります。

CSS
1
2
3
4
5
.grid-container{
    display:grid;
    grid-template-columns:65px1fr65px;
    grid-template-rows:100px100px100px;
}

グリッドカラムとグリッドロウの指定

「グリッドカラム」と「グリッドロウ」の指定

「fr」はfraction（割合）の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。このケースでは、全体から65px+65pxをマイナスした分になります。詳しくは下記をご覧ください。

「グリッドトラック(grid track)」とは、「グリッドカラム」または「グリッドロウ」を示す一般的な用語です。

「グリッドセル」とは

「グリッドセル(grid cell)」とは、「グリッドカラム」と「グリッドロウ」の間の交差点です。これは、正確に4つの「グリッドライン」で囲まれたスペースであり、グリッド内で使用可能な最小のスペースになります。

グリッドセル

「グリッドライン」で囲まれたピンクのスペースが「グリッドセル」

「グリッドエリア」とは

「グリッドエリア(grid area)」とは、「グリッドコンテナ」内の4つの「グリッドライン」で囲まれたスペースの任意のエリアです。
エリアは少なくとも1つ以上の隣接した「グリッドセル」から構成されなければなりません。これは、すべての「グリッドセル」も「グリッドエリア」であることを意味します。

グリッドエリア

グリッドエリア

grid-areaプロパティを使用して要素を「グリッドエリア」にし、そのエリアをgrid-template-areasプロパティを使用して、グリッドでスペースにそのエリアを割り当てることができます

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.outlined{
    grid-area:outlined;
    border:2pxsolidpurple;
}
 
.grid-container{
    display:grid;
    grid-template-areas:"outlined outlined ."
                        "outlined outlined ."
                        ". . .";
    grid-template-columns:100px100px100px;
    grid-template-rows:100px100px100px;
}

「グリッド」とは

「グリッド(grid)」とは、これらすべてが合わさったものです。定義をもう一度見てみましょう。

グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア（グリッドコンテナのコンテンツ）に配置することができます。

最初に見た時とは違い、用語も理解できるようになったと思います。

サイトのキャプチャ

CSS Grid Layout Terminology, Explained

sponsors

Related Posts

関連記事が見つかりませんでした。

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp