CSS Grid Layoutの時代がやってくる。［その3］

ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。

<< 冨田伴成さん［株式会社イークリエイト］（業界研究2018）

2018年夏季閉館日のおしらせ >>

2018.08.15 [水] CSS Grid Layoutの時代がやってくる。［その3］

最終更新:2022.02.11Webサイト制作Tips Web技術

ずいぶん時間が経ってしまいましたが、3月の記事「CSS Grid Layoutの時代がやってくる。［その2］」の続きで、Internet Explorer11での対応を調べてみました。

さて、前回CSS Grid Layoutで組んだ、ウェブDeBLOGを模ったレイアウトをInternet Explorer11で確認してみましょう。

HTMLとCSS

htmlは大まかな構造として、header, main, footerを準備します。

<body>
   
      ヘッダー
      
          
            メニュー①
            メニュー②
            メニュー③
            メニュー④
          
      
   
   
      コンテンツ
   
   
      サイドバー
   
   
      フッター
   
</body>

CSS Gridで、グリッドの横の格子と縦の格子を設定し、各要素に割り当てます。
navの部分はflex-boxで横並びにしてあります。

body{
  width: 100%;
  box-sizing: border-box;
  background-color: #1861AE;
  display: grid;
  grid-template-rows: 80px 150px 80px;
  grid-template-columns: 1fr 120px ;
  grid-gap: 1em;
}
header{
  grid-column: 1/3;
  background-color:#d186de;
}
main{
  grid-column: 1/2;
  background-color:#bae3f9;
}
aside{
  grid-column: 2/3;
  background-color:#00CCFF;
}
footer{
  grid-column: 1/3;
  background-color:#f5d951;
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: .5em 0 0 0;   
  display: flex;
  justify-content: flex-end;
}
nav ul li{
  margin: 0 1em 0 0;
  padding: 0;
  font-size: .7em;
  line-height: 1.5;
}

Chrome, Firefox, Safari, Edgeなどのモダンブラウザでは下記のように表示されていると思います。

ところが、Internet Explorer11では、下記のように表示されます。

Internet Explorer11の対応状況

Internet Explorer11のGrid Layout対応状況はどうなのでしょうか。
Can I use...で調べてみるとPartial support with prefix-ms-ということでベンダープレフィックスを接頭辞に追加することで利用できるようです。Microsoftのブログにも記載されていますが、grid-template-rowsではなくgrid-rows、grid-template-columns:は grid-columnsを利用します。

参照：Can I use... Support tables for HTML5, CSS3, etc

grid-gapは、Internet Explorer11では、利用できないので、grid-gapの余白を行や列に割り当てます。

body{
  width: 100%;
  box-sizing: border-box;
  background-color: #1861AE;
  display: grid;
  grid-template-rows: 80px 150px 80px;
  grid-template-columns: 1fr 120px ;
  grid-gap: 1em;

  /*ベンダープレフィックスを接頭辞に追加しIE11用対応。grid-gapの1emを追加*/
  display: -ms-grid;
  -ms-grid-rows: 80px 1em 150px 1em 80px;
  -ms-grid-columns: 1fr 1em 120px
}

grid-lineの違い

grid-gapが利用できる標準のgrid-lineとIE11用に余白1emを加えたgrid-lineは、以下のようになります。

標準では、grid-line1からgrid-line3まで指定するという書き方になりますが、IE11では、grid-line1からセルをいくつ結合するかという書き方になり、 -ms-grid-column-spanプロパティで表します。

header{
  grid-column-start: 1;
  grid-column-end: 3;
 /*ショートハンドでgrid-column: 1/3;となります。*/
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 1;
}

セルが１つの場合は、spanは書く必要がありません。
続けて、main要素、aside要素、footer要素にグリッドを設定していきます。

main{
   grid-column: 1/2;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}
aside{
   grid-column: 2/3;
  -ms-grid-column: 3;
  -ms-grid-row: 3;
}
footer{
   grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 5;
}

このように微妙にgrid-lineの使い方などが違いますが、Intenet Explorer11でもCSS Grid Layoutを利用することができます。