質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

css グリッドレイアウト(display: grid;)をIE10/IE11でも対応させるためにはどうすればよいでしょうか?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 7,894

score 119

前提・実現したいこと

cssグリッドレイアウト構造を利用して下記画像のデザインを作成したいです。
●対応したいブラウザ chorome,firefox,safari,Edge,IE11

イメージ説明
cssグリッドレイアウトを下記の記事を参考に設置してみました。
CSS Grid Layout を極める!(場面別編)

can I useの情報によればchorome,firefox,safari最新版はベンダープレフィックスをつけなくても表示成功しました。

Edge,IE11にも対応させるために下記のサイトを参考にベンダープレフィックスを付与しました。
EDGE対応参考記事
EDGE対応参考記事その2

ここで問題が発生!
EDGEでは表示が成功しましたが、IE11では効きませんでした。IE11対応するためには何が足りてないでしょうか、ご教示お願いします。
下記にソース掲載します。

<body>
  <ul class="grid_area">
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No1]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No2]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No3]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No4]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No5]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No6]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No7]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No8]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No9]"></li>
  </ul>
</body>
*{
  padding:0;
  margin:0;
}

ul.grid_area {
  width: 1000px;
  margin:0 auto;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-columns: repeat(6, 1fr);
  grid-gap: 10px;
  /*grid-auto-rows: minmax(100px, auto);*/
  list-style: none;
}
ul.grid_area li{
  background: #ccc;
}
ul.grid_area li img{
  max-width: 100%;display: block;
}


/*IE10*/
@media all and (-ms-high-contrast:none) {
  ul.grid_area li {
        margin: 5px;
  }
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
       *::-ms-backdrop, ul.grid_area li {
    margin: 5px;
  }
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
  margin: 5px;
}

ul.grid_area li:nth-child(1) {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(2) { 
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(3) {
  grid-column: 3/5;
  -ms-grid-column: 3;
  -ms-grid-row-span:2;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-column-span:2;
}
ul.grid_area li:nth-child(4) {
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(5) {
  grid-column: 6;
  -ms-grid-column: 6;
  grid-row: 1;
  -ms-grid-row: 1;

}
ul.grid_area li:nth-child(6) {
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span:2;
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(7) {
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(8) {
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(9) {
  grid-column: 5/7;
  -ms-grid-column: 5;
  -ms-grid-row-span:2;
  grid-row: 2 / 4;
  -ms-grid-row: 2;
  -ms-grid-column-span:2;
}

発生している問題

IE11ではこのように表示させる
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

ul.wrapper要素に-ms-grid-columns,-ms-grid-rowsを追記しました。
しかしこのベンダープレフィックスのタグにはrepeatが使えないようですね。
更新後のcssを記述します。

*{
  padding:0;
  margin:0;
}

ul.grid_area {
  width: 1000px;
  margin:0 auto;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-auto-rows: minmax(100px, auto);*/
  -ms-grid-rows: 1fr 1fr 1fr;
  list-style: none;
}
ul.grid_area li{
  background: #ccc;
}
ul.grid_area li img{
  display: block;
  max-width: 100%;
}


/*IE10*/
@media all and (-ms-high-contrast:none) {
  ul.grid_area{
    margin-top: -5px;
    margin-bottom: -5px;
  }
  ul.grid_area li {
    margin: 5px;
  }
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
       *::-ms-backdrop, 
    ul.grid_area{
    margin-top: -5px;
    margin-bottom: -5px;
    }
    ul.grid_area li {
        margin: 5px;
      }
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area {
    margin-top: -5px;
    margin-bottom: -5px;
}

_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
  margin: 5px;
}

ul.grid_area li:nth-child(1) {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(2) { 
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(3) {
  grid-column: 3/5;
  -ms-grid-column: 3;
  -ms-grid-column-span:2;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(4) {
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(5) {
  grid-column: 6;
  -ms-grid-column: 6;
  grid-row: 1;
  -ms-grid-row: 1;

}
ul.grid_area li:nth-child(6) {
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span:2;
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(7) {
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(8) {
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(9) {
  grid-column: 5/7;
  -ms-grid-column: 5;
  -ms-grid-column-span:2;
  grid-row: 2 / 4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}

もしバグがありましたらなんなりと申してください、よろしくお願いします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

ho_riさんのご指摘通り、 ul.wrapper の -ms-grid-columns の記述方法に誤りがあります。
今回の場合、 -ms-grid-columns で繰り返しを表現するには、カラムのサイズを丸括弧で囲み、後ろに大括弧で繰り返す回数を入力します。

This property also supports a repeating syntax. If there are a large number of columns that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns in a more compact form. The repeated values are enclosed by parentheses, and are followed by an integer within brackets (for instance, [4]) that indicates how many times to repeat the values in parentheses. See Examples for a demonstration

今回の場合は不要ですが、-ms-grid-rows も同じく、後ろに大括弧で繰り返す回数を入力できます。
詳しくは公式リファレンスをご確認ください。

-ms-grid-columns property (Internet Explorer)

-ms-grid-rows property (Internet Explorer)

訂正したCSSを記載しておきます。12行目 -ms-grid-columns の部分のみ変更しております。

*{
  padding:0;
  margin:0;
}

ul.grid_area {
  width: 1000px;
  margin:0 auto;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-columns: (1fr)[6];
  grid-gap: 10px;
  /*grid-auto-rows: minmax(100px, auto);*/
  list-style: none;
}
ul.grid_area li{
  background: #ccc;
}
ul.grid_area li img{
  max-width: 100%;display: block;
}


/*IE10*/
@media all and (-ms-high-contrast:none) {
  ul.grid_area li {
        margin: 5px;
  }
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
       *::-ms-backdrop, ul.grid_area li {
    margin: 5px;
  }
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
  margin: 5px;
}

ul.grid_area li:nth-child(1) {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(2) { 
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(3) {
  grid-column: 3/5;
  -ms-grid-column: 3;
  -ms-grid-row-span:2;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-column-span:2;
}
ul.grid_area li:nth-child(4) {
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(5) {
  grid-column: 6;
  -ms-grid-column: 6;
  grid-row: 1;
  -ms-grid-row: 1;

}
ul.grid_area li:nth-child(6) {
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span:2;
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(7) {
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(8) {
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(9) {
  grid-column: 5/7;
  -ms-grid-column: 5;
  -ms-grid-row-span:2;
  grid-row: 2 / 4;
  -ms-grid-row: 2;
  -ms-grid-column-span:2;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/16 18:27

    痒いところに手が届くご回答ありがとうございます。
    これでスッキリとしました。
    syuuphxさんベストアンサーとさせていただきます。

    ※私がcssを修正した箇所があるので、syuuphxさんからご指摘いただいた箇所と合わせたcssソースを上部に記述します。

    キャンセル

0

syuuphxさんの情報と私が修正した箇所を合わせたcssを下記に記述します。

*{
  padding:0;
  margin:0;
}

ul.grid_area {
  width: 1000px;
  margin:0 auto;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-columns: (1fr)[6];
  grid-gap: 10px;
  /*grid-auto-rows: minmax(100px, auto);*/
  -ms-grid-rows: (1fr)[3];
  list-style: none;
}
ul.grid_area li{
  background: #ccc;
}
ul.grid_area li img{
  display: block;
  max-width: 100%;
}


/*IE10*/
@media all and (-ms-high-contrast:none) {
  ul.grid_area{
    margin-top: -5px;
    margin-bottom: -5px;
  }
  ul.grid_area li {
    margin: 5px;
  }
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
       *::-ms-backdrop, 
    ul.grid_area{
    margin-top: -5px;
    margin-bottom: -5px;
    }
    ul.grid_area li {
        margin: 5px;
      }
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area {
    margin-top: -5px;
    margin-bottom: -5px;
}

_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
  margin: 5px;
}

ul.grid_area li:nth-child(1) {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(2) { 
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(3) {
  grid-column: 3/5;
  -ms-grid-column: 3;
  -ms-grid-column-span:2;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(4) {
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(5) {
  grid-column: 6;
  -ms-grid-column: 6;
  grid-row: 1;
  -ms-grid-row: 1;

}
ul.grid_area li:nth-child(6) {
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span:2;
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(7) {
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(8) {
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(9) {
  grid-column: 5/7;
  -ms-grid-column: 5;
  -ms-grid-column-span:2;
  grid-row: 2 / 4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • CSS3に関する質問
  • css グリッドレイアウト(display: grid;)をIE10/IE11でも対応させるためにはどうすればよいでしょうか?