IEでも大丈夫!CSS Gridを使用する時の注意点と実装方法

CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。

そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。
2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。

CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。

サイトのキャプチャ

CSS Grid Application Layout in Production


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

最初は、CSS Gridで普通に実装

ここで実装するのはヘッダ・コンテンツ・サイドバーで構成された、よく見かける2カラムのレイアウトです。

  • App Bar: ヘッダで、ページの全幅を占め、高さは45pxです。
  • Menu: サイドバーで、幅は200px、高さはコンテンツと同じです。
  • Content: コンテンツで、残りの領域を占め、スクロールが可能です。
古典的な2カラムのレイアウト

よく見かける2カラムのレイアウト

CSS Gridでこのレイアウトを実装するのは、簡単です。
HTMLは、非常にシンプルです。

CSS Gridを使用して、スタイルを定義します。

CSS Gridをサポートするモダンブラウザでは、下記のようにレイアウトが表示されます。

CSS Gridのサンプル

CSS Gridのサンプル: Safariで表示

この時点では、まだIEには対応していません。
一応、IEでの表示を見てみましょう。

CSS Gridのサンプル

CSS Gridのサンプル: IE11で表示

CSS Gridの各プロパティを解説

実装に使用したCSS Gridの各プロパティについて解説します。すでに理解している方は、「CSS GridをIE11に対応させる方法」に進んでください。

レイアウトをする最初に、ラッパーである.app要素をグリッド コンテナにするために「display: grid;」を指定します。これにより.app要素のすべての子要素はグリッド アイテムになります

レイアウトを定義する準備が整いました。
グリッドの構成を2つの列と2つの行にします。

グリッドの定義

グリッドの列と行を定義

「grid-template-colums: 200px 1fr;」では、2つの列が必要であると定義しています。1つ目の列は幅200pxです。2つ目の「1fr」は残りのスペースを意味しており、グリッド コンテナ内の利用可能なスペースを占めます。

「grid-template-rows: 45px 1fr;」も同様に、2つの行を定義しています。1つ目の行は高さ45pxで、2つ目の行は垂直方向の残りのスペースを占めます。

CSS Gridでは、列と行はグリッド トラックと呼ばれます。トラックを囲む線はグリッド ラインと呼ばれ、自動的に番号が割り当てられます。

グリッド トラックとグリッドライン

グリッド トラックとグリッドライン

グリッド トラックは列と行を定義するために使用され、グリッド ラインはグリッド内にグリッド アイテムを配置するために使用されます。

デフォルトでは、1つのグリッド セルに対して、1つのグリッド アイテムが配置されます。もしApp Barのように2つのグリッド セルを占めるようにするには、grid-column(またはgrid-row)グリッド アイテムを明示的に指定します。

水平方向に2つのグリッド セルを使用するため、grid-columnで下記のように指定します。

この指定は、App Barがグリッド ラインの1から始まり、グリッド ラインの3まで占めるように指示しています。実際のコードを見てみましょう。

最後の値が「3」の代わりに、「-1」を指定しています。この「-1」はグリッド ラインの最後を意味する値です。

CSS Gridの用語やプロパティについては、下記を参照してください。

注意点として、明示的にApp Barを最初の行に配置しているわけではありません。また、MenuとContentを明示的に配置しているわけでもありません。CSS Gridはこれらのアイテムを自動的に配置します。

CSS GridをIE11に対応させる方法

CSS Gridを使用してレイアウトを実装することがいかに簡単かを見てきました。CSS Gridはモダン ブラウザにサポートされていますが、IE11に対応するためにはいくつかの作業が必要になります。

まず第一に、IE11に対応させるには-ms-のベンダープレフィックスが必要です。AutoPrefixerを使用すると、自動で付与させることができます。

残念なことに、IE10実装では、CSS Gridの自動配置がサポートされていません(IE11でも使用されています)。

IE10の実装には自動配置の機能はありません。つまり、CSS Gridの自動配置機能を使用するのではなく、手作業ですべてを配置する必要があります。
参考: Rachel Andrews

これは馬鹿げています。grid-columnとgrid-rowを使用して、グリッド上のすべてを明示的に配置することに後戻りしなければなりません。グリッド上に配置するアイテムが2つしかないため、今回のケースでうまくいきます。しかし例えば、アイテムをグリッドに動的に埋め込むなどの場合、IE対応はできません。

AutoPrefixerを使用すると、grid-columnプロパティはIEで-ms-grid-column-startプロパティに変換されます。ただし、その値は開始値のみがサポートされます。
IEでは以下のサンプルコードのように、-ms-grid-column-spanプロパティにグリッド アイテムと数を明示的に定義する必要があります。

CSS Gridのコード

IE用に、開始値と終了値は手動で定義

IE11で直面するもう一つの問題は、<main>要素がグリッドの子としてサポートされていないということです。解決方法は、HTML5のセマンティクスを保持し、IE11のグリッドにメインコンテナを配置できるように、「role="main"」を伴った<div>要素をフォールバックにします。

これら2点に対応したコードを見てみましょう。

まずは、モダンブラウザでの表示。

CSS Gridのサンプル

IE11対応、CSS Gridのサンプル: Safariで表示

IE11では下記のように表示されます。
CSS Gridで記述した実装は、期待通りに表示されています。

CSS Gridのサンプル

IE11対応、CSS Gridのサンプル: IE11で表示

HTMLの構造をもう一度確認してみましょう。純粋なセマンティックのマークアップです。不要なラッパーdivはありません。

IE11と互換性のある完全に機能するレイアウトが実現しました。しかし、これはやや簡単でした。さらに一歩進めてみましょう。

レスポンシブ対応のサイドバー

タブレットのユーザーに対して幅広いコンテンツのエリアを提供するため、画面が992pxより狭くなった時にサイドバーを64pxに縮小します。

画面の幅に応じてサイドバーを64pxまたは200pxにするにはどうすればよいでしょうか?

答えは簡単です。
自動的にサイドバーの幅(コンテンツの幅)が変更されるように定義します。

では、実装してみましょう。
ビューポートの幅に応じて、サイドバーの幅が変更されるようにCSSを変更します。

レスポンシブ対応のサイドバーが実装できました。ビューポートの幅を変更すると、サイドバーの幅が変化します。実装に、絶対配置やcalc()関数は必要ありません。

CSS Gridのサンプル

レスポンシブ対応のサイドバー
※実際のデモは、次と一緒にしています。

コンテンツの追加

最後に、コンテンツを追加してみましょう。
ユーザーに情報を表示するための通知エリアをヘッダの上に配置します。

絶対配置でこれを実装するのは悪夢でしたが、CSS Gridを使用すると美しく簡単に実装できます。実装の手順は、

  • ヘッダ行の上に別のautoでサイズ指定した行を追加。
  • 行を追加したので、grid-rowの値を1つ増やす。
  • 追加した行に、通知エリアを配置。

CSS Gridで実装するコードは、下記のようになります。

まずは、モダンブラウザでの表示。

CSS Gridのサンプル

レスポンシブ対応のサイドバーと通知エリアを加えたデモ: Safariで表示

IE11では下記のように表示されます。

CSS Gridのサンプル

レスポンシブ対応のサイドバーと通知エリアを加えたデモ: IE11で表示

わずか6行のHTMLと49行のCSSで実装できました。

まとめ

CSS Gridは素晴らしく、プロジェクトに採用するための準備は整っています。

IE11を理由に、CSS Gridを基本的なレイアウトに採用するのを待つ必要はありません。このチュートリアルで学んだように、フォールバックとしてflexboxやfloatを使用する必要もありません。
CSS GridをIE11に対応させるにはどうすればよいのか、更に詳しく学びたい時は下記が参考になります。

CSS Gridは、HTMLをよりセマンティックにするのに役立ち、CSSの複雑さを大幅に軽減します。実際にCSS Gridはすでに一定の期間使用されており、すべての主要なブラウザでサポートされています。

2018年に合った実装方法を採用しましょう!

sponsors

top of page

©2018 coliss