グリッド レイアウト

カスケード スタイル シート レベル 3 (CSS3) のグリッド レイアウト ("グリッド") は、Internet Explorer 10 と、JavaScript を使った Windows ストア アプリで導入された新しい機能です。Flexbox と同様に、グリッドを使うと、フロートやスクリプトによる位置決めよりも流動的なレイアウトを行えます。Web ページまたは Web アプリケーションの主な領域空間を分割し、サイズ、位置、レイヤーに基づいて HTML コントロールの構成要素間の関係を定義できます。これにより、ブラウザー ウィンドウ内の利用可能な領域を考慮できない固定レイアウトを作成する必要がなくなります。

CSS3 グリッド レイアウトは、現時点ではまだ開発段階です。現在のプレリリースにおける CSS3 グリッド レイアウトの実装の一部は、CSS グリッド レイアウト モジュール (現在は World Wide Web コンソーシアム (W3C) 草案) に基づいています。

グリッドでは複数の要素を列または行で整列させることができますが、コンテンツ構造を持たないため、HTML テーブルでは実現できないシナリオも可能になります。グリッドとメディア クエリを併用することで、デバイスのフォーム ファクター、方向、利用可能な領域などの変更に、レイアウトをシームレスに適応させることができます。

グリッド要素

グリッド レイアウトの基本的な構成要素はグリッド要素です。これを宣言するには、要素の display プロパティを -ms-grid (ブロック レベルのグリッド要素の場合) または -ms-inline-grid (インライン レベルのグリッド要素の場合) に設定します。(グリッド レイアウトの草案は暫定版であるため、この値を始め、このセクションのプロパティを Internet Explorer 10 と、Windows 8 の JavaScript を使った Windows ストア アプリで使うときは、いずれも Microsoft 固有のベンダー プレフィックス "-ms-" を付ける必要があります。)たとえば、次のコード例では、"myGrid" という ID の要素内でグリッドを作成しています。


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


トラック (列と行)

グリッド要素を作成したら、次のプロパティを使って列と行にサイズを適用します。

プロパティ説明

-ms-grid-columns

グリッド内の各グリッド列の幅を指定します。それぞれの列はスペースで区切ります。

-ms-grid-rows

グリッド内の各グリッド行の高さを指定します。それぞれの行はスペースで区切ります。

 

列と行 (総称してトラックと呼びます) のサイズは、次のいずれかを使って設定できます。

  • 標準の長さの単位、あるいはオブジェクトの幅に対する割合 (列の場合) またはオブジェクトの高さに対する割合 (行の場合)
  • auto キーワード (格納される項目に基づいてサイズが変更される列の幅または行の高さに合わせる場合)
  • min-content キーワード (子要素の最小の幅や高さに合わせる場合)
  • max-content キーワード (子要素の最大の幅や高さに合わせる場合)
  • minmax(a, b) キーワード (利用可能な領域として ab の間の幅または高さに合わせる場合)
  • 補助単位 (fr) (次の例で示されているように、割合の値に基づいて利用可能な領域が列または行に分配される場合)
補助単位の例として、"myGrid" ID セレクターを拡張した次の例について考えてみましょう。

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


このグリッドの 4 つの列は、それぞれ次のように表示されます。

  • 列 1 (auto キーワード): 列の幅が内容に合わせて調整されます。
  • 列 2 ("100px"): 列の幅が 100 ピクセルに設定されます。
  • 列 3 ("1fr"): 残りの領域を補助単位で分割した 1 つ分の領域が割り当てられます。
  • 列 4 ("2fr"): 残りの領域を補助単位で分割した 2 つ分の領域が割り当てられます。

このグリッドの補助単位の合計は 3 であるため、列 3 には、残りの領域を 3 等分した 1 つ分 — 1/3 — が割り当てられます。列 4 には、残りの領域の 2/3 が割り当てられます。

同様に、このグリッドの 3 つの行は、それぞれ次のように表示されます。

  • 行 1 ("50px"): 行の高さが 50 ピクセルに設定されます。
  • 行 2 ("5em"): 行の高さが 5 ems に設定されます。
  • 行 3 (auto キーワード): 行の高さが内容に合わせて調整されます。

グリッド トラックを繰り返し配置する

同じ列または行をいくつも配置する場合や同じパターンで繰り返し配置する場合は、繰り返し構文を適用してコンパクトな形式で定義できます。次の 2 つのコマンドは同じ意味になります。このトラックは、1 つの行と、10 ピクセルの余白を挟んで 250 ピクセルの列を繰り返し配置するパターンで構成されます。


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


グリッド項目

グリッドの子要素はグリッド項目と呼ばれ、次のプロパティを使って配置されます。

プロパティ説明

-ms-grid-column

グリッド項目を配置するグリッドの列を指定します。

-ms-grid-row

グリッド項目を配置するグリッドの行を指定します。

 

トラックの番号付けシステムでは、1 (既定値) から始まるインデックスが割り当てられます。前の例で宣言したグリッドで、次の 2 つの ID セレクターについて考えてみましょう。


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

ここで、これらのセレクターを次のマークアップに適用します。


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


このページを表示してみましょう。(このページを正しくレンダリングするには、Internet Explorer 10 が必要です。)

グリッド項目の例

グリッド項目を揃える

グリッド項目は、次のプロパティを使って、項目がまたがる列と行で形成されるセルの任意の端に沿って配置できます。

プロパティ説明

-ms-grid-column-align

グリッド列内でのグリッド項目の水平方向の配置を指定します。設定できる値は、centerendstartstretch です。

-ms-grid-row-align

グリッド行内でのグリッド項目の垂直方向の配置を指定します。設定できる値は、centerendstartstretch です。

 

"item2" セレクターを次のように変更します (最後の 4 行を追加しています)。


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

さらに、次のセレクターを追加します。


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

ここで、これらのセレクターを次のマークアップに適用します。


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


このページを表示してみましょう。(このページを正しくレンダリングするには、Internet Explorer 10 が必要です。)

グリッドの配置の例

グリッド項目を重ねて配置する

グリッド項目は、同じ列または行に配置するだけで重ねて配置できます。既定では、マークアップ内の順序に基づいて、後で定義された項目が先に定義された項目の上に重ねて描画されます。

これを示すために、項目 3 のセレクターを変更して、項目 2 が配置されている列 2 の行 2 に配置します。


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

項目 3 の div は項目 2 の div よりも後にあるため、項目 3 が項目 2 の上に重ねて描画されます。このページを表示してみましょう。(このページを正しくレンダリングするには、Internet Explorer 10 が必要です。)

グリッドを重ねて配置する例

この既定の動作を変更するには、z-index プロパティを使います。

プロパティ説明

z-index

グリッド セル内でのグリッド項目のレイヤー (z インデックス) を指定します。

 

z-index プロパティは通常、position プロパティが static に設定されていないオブジェクトだけに適用されますが、z-index プロパティはグリッド項目には、position プロパティが static に設定されている場合でも適用されます。

項目 3 のセレクターで、z-index プロパティに値 "-1" を割り当てて、この項目の重なり順序を下げます。


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

これにより、項目 2 が項目 3 の上に重ねて描画されます。このページを表示してみましょう。(このページを正しくレンダリングするには、Internet Explorer 10 が必要です。)

複数のセルをまたいでグリッド項目を配置する

複数の列または行をまたいでグリッド項目を配置するには、次の 2 つのプロパティを使います。

プロパティ説明

-ms-grid-column-span

グリッド項目がまたがるグリッド列の数を指定します。既定値は "1" です。

-ms-grid-row-span

グリッド項目がまたがるグリッド行の数を指定します。既定値は "1" です。

 

項目 3 のセレクターで、項目が 4 つの列 (すべての列) の幅にまたがるように、-ms-grid-column-span プロパティに値 "4" を割り当てます (さらに、-ms-grid-column プロパティの値を "1" に変更します)。


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

このページを表示してみましょう。(このページを正しくレンダリングするには、Internet Explorer 10 が必要です。)

グリッドで定義されている列または行の数よりも多くの列または行にまたがるように設定すると (たとえば、この例で、-ms-grid-column プロパティの値を "2" のままにして -ms-grid-column-span プロパティを "4" に設定すると、定義されている列数よりも 1 列多くなります)、追加の列または行が暗黙的に作成されます。定義されている数を超える列または行の幅や高さは、すべて auto に設定されます (内容に合わせて調整されます)。

API リファレンス

Grid Layout

サンプルとチュートリアル

CSS グリッド オーバーレイのサンプル
CSS グリッドを使ってアダプティブ レイアウトを作成する方法
アダプティブな Web サイトの設計

Internet Explorer Test Drive デモ

CSS3 グリッド レイアウトに関するハンズオン
グリッド システムに関するページ
Gridddle に関するページ

IEBlog 記事

アダプティブ レイアウトを実現する IE10 Platform Preview と CSS の機能に関する記事

仕様

CSS グリッド レイアウト

 

 

表示:
© 2014 Microsoft