新宿のふわっとした文化系ウェブ制作会社です

ウェブ制作しているスタッフのゆるいメディア

  1. HOME
  2. ウェブ制作
  3. コーディング
  4. CSS
  5. CSS GridをIE11、EDGEに対応させるために注意する点

CSS GridをIE11、EDGEに対応させるために注意する点


2017/7/22ウェブ制作 CSS コーディング

IE11からCSS Gridに対応しているので、案件の定義が「IE11以上」であればCSS Gridでコーディングすることもできます。

CSSのGridでコーディングするのか? Flex Boxでコーディングするのか? 迷うところです。

実際にコーディングしてみると、下記のようなレイアウトの場合は「Flex Box」によるコーディングが最適かと思いました。
トップページや、ランディングページなどに多いレイアウトで、縦のグリッド線が多くなる場合です。

CSS Gridの恩恵を受けることができるレイアウトは下記のような場合です。
レスポンシブレイアウトにした場合、ピンク色のコンテンツが2段目になるレイアウトです。

IEにも対応させるCSS Gridの3つのポイント

CSS GridをIEに適用した時に、ちょっとハマりました。

まず、名称が違うプロパティがあり「ベンダープレフィックス付けとけばOKだろう」という訳では無かった。

ちょっと詳しくメモっておくと下記になります。

IE用のベンダープレフィックスと異なるプロパティ名

IEの場合は、CSSのプロパティにベンダープレフィックスの「-ms-」を追記させる必要があります。

また、プロパティ名が違うプロパティもあります。

例えば、グリッドの列サイズを指定するプロパティは「grid-template-columns」ですが、IEの場合は「-ms-grid-columns」となります。
「ベンダープレフィックス付けとけば大丈夫だろ」という訳ではありませんで気を付けましょう。

IE10では、ベンダープレフィックスを付けても対応していないプロパティもあります。

ちょっと古い情報ですが、ベンダープレフィックスでも対応していない情報をまとめられています。

IE10 Autoprefixer

IE10では「grid-area」が使えないのは不便ですね。(IE11では対応しています)
「grid-row」と「grid-column」で対応すればOKです。

IEでは、行を指定するgrid-rowsが必須になる

グリッドの行数やサイズを指定するプロパティ「grid-rows」は、chromeやFirefoxでは不要な場合もありますが、IEの場合は必要になります。
コンテンツの縦サイズが可変する場合の値は「auto」にします。

グリッドの解釈が異なる

chrome、FirefoxとIEとでは、グリッドの数え方が異なります。
chrome、Firefoxは「グリッド線」で指定しますが、IEは「ボックス」で指定します。

グリッドを使ったサンプル

下記のレイアウトをCSS Gridでコーディングしたサンプルです。

HTML

<div class="wrap">
<div class="main-cont">
メイン
</div>
<div class="sub-cont">
サブ
</div>
<div class="side-cont">
サイド
</div>
</div>

chorome、FireFoxなどのモダンブラウザだけに対応した場合

.wrap {
display: grid;
grid-template-columns:300px 200px;
grid-template-rows:auto auto;
}
.main-cont {
grid-column: 1 / 2;
grid-row: 1;
}
.sub-cont {
grid-column: 1 / 2;
grid-row: 2;
}
.side-cont {
grid-column: 2 / 3;
grid-row: 1 / 3;
}

IEにも対応させた場合

.wrap {
display: grid;
display: -ms-grid;
grid-template-columns:300px 200px;
grid-template-rows:auto auto;
-ms-grid-columns:300px 200px;
-ms-grid-rows:auto auto;
}
.main-cont {
grid-column: 1 / 2;
grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.sub-cont {
grid-column: 1 / 2;
grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.side-cont {
grid-column: 2 / 3;
grid-row: 1 / 3;
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
}

Gulpのautoprefixerを利用する

Gulpを利用している方ならベンダープレフィックスを自動的に付加する「autoprefixer」を使っていると思います。

gridのベンダープレフィックスは、デフォルトではfalseになっているのでtrueにします。

gulpfile.jsのautoprefixerのタスクに「grid:true」を追記します。

gulp.task('autoprefixer', function (){
gulp.src('src/style.css')
.pipe(autoprefixer({
browsers: ['last 5 versions','> 3%'],
cascade: false,
grid: true
}))
.pipe(gulp.dest('./dest/css'));
});

これでIEのベンダープレフィックスが自動的に付加されます。

CSS Gridは、レイアウトの自由度が高くなりますが、グリッド数が多い場合や、ページごとにグリッド数が変わる場合はFlexBoxの方が良い場合もあります。

同じカテゴリーで人気の記事

新しい記事

あなたがチェックした記事

Category / カテゴリー

Ranking / 人気記事

  1. テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法

    テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法

  2. サーバーIPがブラックリストに載ってメール送信エラーになるのを解除する方法

    サーバーIPがブラックリストに載ってメール送信エラーになるのを解除する方法

  3. wordpressのリビジョンと自動保存を停止、回数制限する方法

    wordpressのリビジョンと自動保存を停止、回数制限する方法

  4. CSS GridをIE11、EDGEに対応させるために注意する点

    CSS GridをIE11、EDGEに対応させるために注意する点

  5. ここぞという時に頼れる神フォント(ゴシック編)

    ここぞという時に頼れる神フォント(ゴシック編)

  6. 4つのプラグインでWordPressの表示速度を向上させる

    4つのプラグインでWordPressの表示速度を向上させる

  7. WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

    WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

  8. ここぞという時に頼れる神フォント(明朝編)

    ここぞという時に頼れる神フォント(明朝編)

  9. headタグ内で使うmetaやlink relまとめ

    headタグ内で使うmetaやlink relまとめ

  10. WordPressのマルチブログを解除する方法

    WordPressのマルチブログを解除する方法

Recommned / お薦め

  1. HTMLやCSS、JavaScript、画像を圧縮して表示速度をアップさせる

  2. headタグ内で使うmetaやlink relまとめ

  3. キーワード調査ツール7選

  4. display:flexを簡単に使うよ

  5. 吹き出し、グラデーションなど、よく使うジェネレーターまとめ

  6. Sassコンパイル、Compass、スマフォと同期プレビューまでできる「Prepros」が凄すぎた