6LINE最近では、CSSグリッドレイアウトで作られるWebサイトがどんどんと増えてきていますね。便利なルールですが、その最大の難点は古いブラウザがサポートしていないこと。「もはやIE対応自体が不要だ」という考えには賛同したいところですが、やはりどうしてもIE対応せざるを得ないケースもあるでしょう。そんな時のために、IEでグリッドレイアウトを利用する方法を知っておきましょう。※当記事はCSS標準のグリッドレイアウト手法を理解している方向けのコンテンツです。CSSグリッドがよくわからないという方は先にグリッドレイアウトの基本的な作り方とグリッドレイアウトのプロパティをご覧ください。-ms-grid-column-alignAutoprefixerを使ってIE用のコードを書き出すIE独自のグリッドレイアウト・プロパティIEでグリッドレイアウトを使用するにはIE独自のプロパティで実装する必要があります。align-self標準のCSSグリッドと比べると限定的にしかグリッドレイアウトを組めず、本来の便利な機能を十分に活かすことはできませんが、シンプルにレイアウトを組むくらいなら使えるでしょう。グリッドを使うのか、それともフレックスやフロートで対応するのか、それはケースに応じて採用を判断するしかありませんね。ちなみに、グリッドレイアウトをサポートしているIEのバージョンは、IE10とIE11です。IE9以下はグリッドレイアウト自体に対応していないので、独自プロパティも使えません。IE独自のプロパティの実装方法と注意点グリッドレイアウトのIE対応をする時は、単に独自プロパティを書き足せばよいわけではなく、その「値」の指定方法にも注意が必要です。各プロパティの使用方法と注意点を確認しましょう。-ms-gridグリッドレイアウトを宣言するdisplayプロパティの値ですが、これは特に注意する点はありません。grid;の置き換えと考えて大丈夫です。grid-template-columnsにあたるプロパティです。上記の値については、どうやら部分的に使えることもあるようですが、IE以外のブラウザとの挙動に差異が生じる可能性があるなど問題も発生しやすそうです。混乱の原因になりそうなので利用しないというスタンスも有りでしょう。いう形式で記述できます。幅を3回繰り返すのであれば、(auto)[3]と書きます。auto)と同じ指定です。grid-row-startが代替となります。標準のプロパティでは、負のライン番号を使って指定することもできますが、IE用のプロパティではそれができません。IEのグリッドレイアウトでは、ライン番号による配置ではなく、トラック番号による配置がなされるようです。スタート位置の指定を行いましょう。-ms-grid-column-spanはグリッドアイテムの終点を指定するプロパティなので、「始点のトラックから何トラック分を使うのか」という意味になります。2;のような記述と同じ指定方法になります。grid-column-endを使って終点の位置を直接指定することができるのですが、IEではそのように指定できません。-ms-grid-columnで解説した通り、ライン番号ではなくトラック番号によって処理されるためです。グリッドアイテムの配置エリアがグリッドセル1マス分のみの場合は、終点の指定は省略できます。これはCSS標準のプロパティも同様ですね。-ms-grid-column-align-ms-grid-column-alignがjustify-self、-ms-grid-row-alignがalign-selfに該当します。justify-itemsはIEでは利用できません。justify-itemsはグリッドコンテナに対して適用する一括指定のためのプロパティですね。IE対応をする場合、グリッドコンテナではなくグリッドアイテムに対して位置揃えの指定をするということです。CSSプラグインを利用することが多いのですが、利用するにはnpm等で開発環境を準備しなくてはなりません。開発環境を準備するのに「敷居が高い」と感じている方もいるのではないでしょうか。Onlineツールを利用すれば、開発環境がなくてもIE対応が行なえます。画面左側のテキストエリアに元となるコードを入力すると、ベンダープレフィクスを書き足したコードを右側のテキストエリアに出力してくれます。Autoprefixerはその名前の通り、CSSのスタンダードなプロパティを書くだけで、各ブラウザの独自仕様であるベンダープレフィックス付きのプロパティを自動で書き足してくれるツールです。過去のバージョンのブラウザでは、ベンダープレフィクスがないと新しいCSSのルールを解釈してくれないことがあるため、ベンダープレフィクス付きのプロパティもセットで書くことがあります。プロパティをセットするのに逐一ベンダープレフィクス付きのものも書くと記述の負担が増えてしまうため、その手間を省こうと言うのがAutoprefixerです。その一環としてIE独自のグリッドレイアウトのコードを書き出してくれるというわけです。設定やグリッドエリアによる指定、グリッドアイテムの自動配置も行ってくれます。この拡張機能を使い方は、AutoprefixerのCSSグリッド・サポート機能を使って便利にIEに対応する方法の記事をご覧ください。中小企業や個人事業主などのWebマーケティングのサポートからWeb制作まで行う。「その場しのぎのテクニックに頼らない正攻法のマーケティングを実践する」をモットーとし、中長期的に安定して集客できる仕組み作りを得意とする。