Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
162
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

CSS Gridのgap(grid-gap)が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート

More than 1 year has passed since last update.

gapプロパティ(旧名grid-gap)を用いると、CSS Gridにおける列と行の間隔を設定できます。

▼ MDNの「grid-gap」のデモより。

gap-demo.gif

便利なプロパティですが、IE 11には対応しておらず、CSS Gridにおける苦労点の一つでした。

しかし、6/2にリリースされたAutoprefixer v8.6を用いると、IE 11向けにもgapを用いたレイアウトを実現できます

どのように変換されるか?

gapを使ったCSSコードがどのように変換されるかを確認してみましょう。次のようなコードを例に紹介します。

grid-templateプロパティの書き方は見慣れないかもしれませんが、グリッドのエリア名、列幅、行幅をまとめて指定する手法です。grid-template-areasで定義したエリア名に加えて、行幅がそれぞれ50px1fr50px、列幅が200px1frであることを示します。

.container {
  display: grid;
  gap: 10px;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

これをAutoprefixer 8.6で変換すると、次のようなコードになります。gapに指定した10pxが、-ms-grid-rows-ms-grid-columnsに適切に設定されています。列の間と行の間に10pxを設定することで、gapを実現しているわけです。

.container {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 10px 1fr;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: header;
}

aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: aside;
}
/* 中略 */

grid-template-areaで設定したエリア名が適切に変換されているのは、「AutoprefixerがパワーアップしてCSS GridのIE 11対応がバリ楽になってた - Qiita」によるものです。

このCSSを用いてブラウザで確認してみると、モダンブラウザはもちろん、IE 11でも意図通り列、行間に10pxが設定されているのがわかります。

▼ モダンブラウザ(Chrome)のキャプチャー

▼ IE 11のキャプチャー

gap対応を行うならgrid-templateプロパティを使う

親要素ではデモのようにgrid-templateプロパティを使うことで、IE 11のgap対応が行われます。grid-template-rowsプロパティ、grid-template-columnsプロパティを使うとIE 11向けのgap対応が行われないので注意してください

row-gapcolumn-gapも対応

行のgapのためのrow-gap(旧名grid-row-gap)プロパティ、列の
gapのためのcolumn-gap(旧名grid-column-gap)プロパティにも対応可能です。

例えば次のCSSコードの変換を考えてみます。

.container {
  row-gap: 10px;
  column-gap: 20px;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

変換すると、次のようになります。

.container {
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 20px 1fr;
  grid-template:
    "header header" 50px
    "aside  main"   1fr
    "footer footer" 50px /
     200px  1fr;
}

gap対応のための環境設定

webpack向け、Gulp向けにgap対応のための設定方法を紹介します。面倒であれば、コピペで使える設定ファイルを準備しましたのでそちらを使用してください。

webpackの場合

記事「webpack入門 – PostCSS(Autoprefixer)を取り込む方法 - ICS MEDIA」を参考に、Autoprefier用の設定をします。

autoprefixerの引数でgrid: trueを指定することを忘れないようにしてください。

webpack.config.js
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false,
              importLoaders: 1
            },
          },
          // PostCSSのための設定
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                // Autoprefixerを有効化
                // ベンダープレフィックスを自動付与する
                require("autoprefixer")({grid: true})
              ]
            }
          }
        ]
      }
    ]
  }
};

Gulpの場合

gulp-postcss(GulpでPostCSSを使うためのプラグイン)、autoprefixerなど、必要なモジュールをインストールします。

npm init -y
npm i -D gulp gulp-postcss autoprefixer

gulpfile.jsのタスクにPostCSSの設定を加えます。また、autoprefixerの引数でgrid: trueを指定することを忘れないようにしてください。

gulpfile.js
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");

gulp.task("default", function () {
  return gulp.src("src/style.css")
    .pipe(postcss([
      autoprefixer({
        grid: true,
        cascade: false
      })
    ]))
    .pipe(gulp.dest("dist"));
});

Autoprefixerがあればgapも自由に使える

grid-template-rowsで行の間、grid-template-columnsで列の間に隙間を入れてgapを表現するというのは私も考えていた手法でしたが、その自動変換となると敷居が高く、実現できずにいました。IE 11向けにgrid-template-areas*-spanの自動記述ができるようになり、加えてgapのIE 11向け対応まで行うということであれば、これほど楽なことはありません。

IE 11の未対応プロパティゆえにCSS Grid導入を見送っていた開発者にとっては、朗報のAutoprefixerのアップデートと言えるでしょう。

関連資料

162
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで
moneyforward
「お金を前へ。人生をもっと前へ。」をMissionとして、個人向け、法人向け様々なFintechサービスを開発、提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
162
Help us understand the problem. What is going on with this article?