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

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

  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. サーバーIPがブラックリストに載ってメール送信エラーになるのを解除する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. リリース、ローンチ、サービスイン 違い、意味は?

    リリース、ローンチ、サービスイン 違い、意味は?

  10. AirMac Time Capsuleのハードディスクを交換する方法

    AirMac Time Capsuleのハードディスクを交換する方法

Recommned / お薦め

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

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

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

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

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

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

  7. ネガティブSEOのバックリンクを否認する方法からエクセル調整まで