CSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル

CSS Grid Layout」はCSSの新しいレイアウトモジュールで、まだEditor's Draftですが、手続き完了に近づいています。このモジュールは17個の新しいプロパティを持ち、今までとは異なる新しいコンセプトでCSSを記述します。

この新しい仕様がどのように機能し、どのように記述するか、レスポンシブ対応の3カラムレイアウトを使って紹介します。

CSS Grid Layoutの基本的な使い方は、下記ページをご覧ください。

サイトのキャプチャ

The Holy Grail Layout with CSS Grid

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

「Holy Grail Layout(聖杯レイアウト)」とは

「Holy Grail Layout(聖杯レイアウト)」とは、ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムのレイアウトです。レイアウトは次の仕様を厳守します。

  • 中央のコンテンツは可変、両側のサイドバーは固定の幅です。
  • マークアップではコンテンツは、2つのサイドバーより上に記述されます。
  • コンテンツとサイドバーはそれぞれの内容に関わらず、同じ高さです。
  • コンテンツがビューポートの高さに満たない時でも、フッタは一番下に配置されます。
  • レスポンシブ対応にする時、小さいビューポートではすべてのセクションが1つのカラムで積み重なって配置されます。

今までは、CSSハック無しでこれらの仕様をすべて実装するのは非常に困難でした。

「CSS Grid Layout」で3カラムレイアウトを実装

「CSS Grid Layout」を使用すると、非常にスマートに実装できます。
まずは、マークアップ。

そしてCSSはレスポンシブ対応も含めて、たった31行です。
見慣れないプロパティ、記述方法、単位があると思います。

ブラウザで表示すると、下記のようになります。

サンプルの動き

「Holy Grail Layout(聖杯レイアウト)」の完成サンプル

実装の解説

「CSS Grid Layout」は慣れないうちは非常に難しく感じるかもしれません。しかしこのレイアウトを実装するために私が使ったのは、17個の新しいプロパティの中のたった4つです。

  • grid-area
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

この4つのプロパティを使った「Holy Grail Layout(聖杯レイアウト)」の実装を5つのステップで紹介します。

Step 1. グリッドの定義

まずは「grid-area」プロパティを使って、グリッドの定義をしてみましょう。ヘッダ・フッタ・コンテンツ・2つのサイドバーのエリアを定義します。

次に「grid-template-areas」プロパティを使って、グリッドのレイアウトを視覚的に指定します。各エリアをスペースで区切り、リスト状に記述します。
スタイルシートの各行はグリッドの横列を表しており、定義されたそれぞれのエリアが1つの縦列で、エリアが複数のカラムにまたがる時には複数記述します。

「Holy Grail Layout(聖杯レイアウト)」は3つの縦列と3つの横列があるため、ヘッダとフッタの横列には、縦列3つ分の定義をします。

グリッドの定義を行うと、下記のように表示されます。

実装のサンプル

グリッドの定義

Step 2. カラムの幅を定義

続いて「grid-template-columns」プロパティを使って、縦列の幅を定義してみましょう。
このプロパティはスペースで区切られたアイテムの幅を明確にします。レイアウトでは3つの縦列があるので、3つの幅を指定します。

「Holy Grail Layout(聖杯レイアウト)」では2つのサイドバーは固定なので、150pxを定義します。

真ん中のコンテンツは残りのスペース全部を定義したいので、新しい単位「fr」で定義します。「fr」はfraction(割合)の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。このケースでは、全体から150px+150pxをマイナスした分になります。

カラムの幅の定義を行うと、下記のように表示されます。

実装のサンプル

Step 3. カラムの高さを定義

「grid-template-columns」で幅を定義したので、今後は「grid-template-rows」プロパティを使って、高さを定義してみましょう。幅と同様にスペースで区切って定義しますが、コードが視覚的に分かりやすいように改行しました。

ヘッダの高さは100px固定、フッタの高さは30px固定、コンテンツとサイドバーは残りのスペースです。

実装のサンプル

Step 4. フッタは常に一番下に配置

「Holy Grail Layout(聖杯レイアウト)」ではコンテンツの量が少なくてもフッタは成り行きで表示されるのではなく、常に一番下に配置されるようにします。これを実現するのは簡単で、bodyに指定した.hg要素の最小の高さを「100vh」に定義します。

bodyの最小の高さがブラウザいっぱいの高さと同じになり、コンテンツに「1fr」の指定があるので、コンテンツの量が少なくてもフッタは一番下に配置されます。

実装のサンプル

Step 5. 最後はレスポンシブ対応に

最終的に、レイアウトをレスポンシブ対応にすることを望むでしょう。小さいスクリーンではすべてのグリッドのアイテムは垂直に配置されるべきです。これを実現するためには「grid-template-areas, grid-template-columns, grid-template-row」の3つのプロパティを再定義します。

まずは小さいスクリーンで表示される順番を上から定義します。

そして、幅はスクリーンいっぱいに定義します。

最後は高さです。コンテンツ以外はすべて固定の高さを指定し、コンテンツは「1fr」を定義します。

小さいスクリーンで表示すると、下記のように表示されます。

実装のサンプル

デモページ

実際のデモは、下記ページでご確認ください。

デモのキャプチャ

デモページ
※デモを表示するには、ブラウザの設定を変更(設定は下記に)

ブラウザのサポート状況

アップデート(2017年3月9日)
本日リリースされたChome 57で、デスクトップ用のすべてのブラウザがサポートしました。
サイトのキャプチャ

CSS Grid Layoutの各ブラウザのサポート状況

参考までに、2016年のものもそのまま残しておきます。

サイトのキャプチャ

2016年4月現在「CSS Grid Layout」を正式にサポートしているブラウザはありませんが、各ブラウザにその機能は実装されています。
ベンダプレフィックスを付与したり、ブラウザの設定を変更することで「CSS Grid Layout」を利用できます。

Chrome
「試験運用版のウェブ プラットフォームの機能」をチェック
chrome://flags/#enable-experimental-web-platform-features
Firefox
「about:confit」で「layout.css.grid.enabled」をチェック
IE10
「-ms」を加える。
Opera
「試験運用版のウェブ プラットフォームの機能」をチェック
opera://flags/#enable-experimental-web-platform-features
Safari
「-webkit」を加える。
サイトのキャプチャ

The Holy Grail Layout with CSS Grid

top of page

©2017 coliss