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

Post on:2018年4月6日

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

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

App Bar: ヘッダで、ページの全幅を占め、高さは45pxです。
Menu: サイドバーで、幅は200px、高さはコンテンツと同じです。
Content: コンテンツで、残りの領域を占め、スクロールが可能です。

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

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

<div class="app">
  <header></header>
  <aside></aside>
  <main></main>
</div>

</div>

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

html, body {
  height: 100%;
  margin: 0;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: 45px 1fr;
  grid-template-columns: 200px 1fr;
}

header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
  /* グリッド ラインの1から始まり、最後まで占める */
  grid-column: 1/-1;
}

aside {
  background-color: #213e48;
}

html, body {

height: 100%;

margin: 0;

}

.app {

height: 100%;

display: grid;

grid-template-rows: 45px 1fr;

grid-template-columns: 200px 1fr;

}

header {

box-shadow: 0 2px 5px rgba(0, 0, 0, .16);

/* グリッドラインの1から始まり、最後まで占める */

grid-column: 1/-1;

}

aside {

background-color: #213e48;

}

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

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

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

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

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

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

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

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

.app {
  height: 100%;
  display: grid;
  grid-template-rows: 45px 1fr;
  grid-template-columns: 200px 1fr;
}

.app {

height: 100%;

display: grid;

grid-template-rows: 45px 1fr;

grid-template-columns: 200px 1fr;

}

グリッドの列と行を定義

「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で下記のように指定します。

/* グリッド ラインの1から始まり、3まで占める */
grid-column: 1/3;

1 2	/* グリッドラインの1から始まり、3まで占める */ grid-column: 1/3;

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

/* グリッド ラインの1から始まり、最後まで占める */
grid-column: 1/-1;

1 2	/* グリッドラインの1から始まり、最後まで占める */ grid-column: 1/-1;

最後の値が「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プロパティにグリッドアイテムと数を明示的に定義する必要があります。

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

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

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

<div class="app">
  <header></header>
  <aside></aside>
  <div role="main"></div>
</div>

</div>

@use autoprefixer {
  remove: false;
  grid: true;
  browsers: "> 1%, firefox 32";
};

html, body {
  height: 100%;
  margin: 0;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: 45px 1fr;
  grid-template-columns: 200px 1fr;
}

header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
  /* グリッド ラインの1から始まり、最後まで占める */
  grid-column: 1/-1;
  -ms-grid-column-span: 2;
  grid-row: 1;
}

aside {
  background-color: #213e48;
  grid-row: 2;
  grid-column: 1;
}

[role=main] {
  grid-row: 2;
  grid-column: 2;
}

@use autoprefixer {

remove: false;

grid: true;

browsers: "> 1%, firefox 32";

};

html, body {

height: 100%;

margin: 0;

}

.app {

height: 100%;

display: grid;

grid-template-rows: 45px 1fr;

grid-template-columns: 200px 1fr;

}

header {

box-shadow: 0 2px 5px rgba(0, 0, 0, .16);

/* グリッドラインの1から始まり、最後まで占める */

grid-column: 1/-1;

-ms-grid-column-span: 2;

grid-row: 1;

}

aside {

background-color: #213e48;

grid-row: 2;

grid-column: 1;

}

[role=main] {

grid-row: 2;

grid-column: 2;

}

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

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

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

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

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

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

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

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

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

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

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

.app {
  height: 100%;
  display: grid;
  grid-template-rows: 45px 1fr;
  /* 最初の列の幅を200pxからautoに自動変更 */
  grid-template-columns: auto 1fr;
}
aside {
  background-color: #213e48;
  grid-row: 2;
  grid-column: 1;
  /* グリッド コンテナではなく、グリッドの子に幅を定義 */
  width: 200px;
}
@media (max-width: 992px) {
  aside {
    width: 64px;
  }
}

.app {

height: 100%;

display: grid;

grid-template-rows: 45px 1fr;

/* 最初の列の幅を200pxからautoに自動変更 */

grid-template-columns: auto 1fr;

}

aside {

background-color: #213e48;

grid-row: 2;

grid-column: 1;

/* グリッドコンテナではなく、グリッドの子に幅を定義 */

width: 200px;

}

@media (max-width: 992px) {

aside {

width: 64px;

}

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

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

コンテンツの追加

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

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

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

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

<div class="app">
  <div class="global-notification">通知エリア</div>
  <header></header>
  <aside></aside>
  <div role="main"></div>
</div>

<div class="global-notification">通知エリア</div>

</div>

@use autoprefixer {
  remove: false;
  grid: true;
  browsers: "> 1%, firefox 32";
};

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 45px 1fr;
  grid-template-columns: auto 1fr;
}

header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
  /* グリッド ラインの1から始まり、最後まで占める */
  grid-column: 1/-1;
  -ms-grid-column-span: 2;
  grid-row: 2;
}

aside {
  background-color: #213e48;
  grid-row: 3;
  grid-column: 1;

  width: 200px;
}
@media (max-width: 992px) {
  aside {
    width: 64px;
  }
}

[role=main] {
  grid-row: 3;
  grid-column: 2;
  padding: 24px;
  overflow: auto;
}

.global-notification {
  grid-column: 1/-1;
  -ms-grid-column-span: 2;
  grid-row: 1;
  color: white;
  background-color: #00749e;
  padding: 16px;
}

@use autoprefixer {

remove: false;

grid: true;

browsers: "> 1%, firefox 32";

};

html, body {

height: 100%;

margin: 0;

font-family: sans-serif;

}

.app {

height: 100%;

display: grid;

grid-template-rows: auto 45px 1fr;

grid-template-columns: auto 1fr;

}

header {

box-shadow: 0 2px 5px rgba(0, 0, 0, .16);

/* グリッドラインの1から始まり、最後まで占める */

grid-column: 1/-1;

-ms-grid-column-span: 2;

grid-row: 2;

}

aside {

background-color: #213e48;

grid-row: 3;

grid-column: 1;

width: 200px;

}

@media (max-width: 992px) {

aside {

width: 64px;

}

[role=main] {

grid-row: 3;

grid-column: 2;

padding: 24px;

overflow: auto;

}

.global-notification {

grid-column: 1/-1;

-ms-grid-column-span: 2;

grid-row: 1;

color: white;

background-color: #00749e;

padding: 16px;

}

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

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

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

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

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

まとめ

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

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