CSS Grid Layoutで「聖杯レイアウト」を実現するサンプルはネットでいろいろ出てくるのですが、そのままIE11やEdgeで表示すると対応してないのかなぁ？という表示になります。どうやってIE11、Edge対応すればよいかといろいろ調べてみたところ、古い方式で書き足すみたいなことをすると対応できるようです。
実際にやってみたのが以下です。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Holy Grail Layout with CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="hg">
<header class="hg-header">The Holy Grail Layout with CSS Grid</header>
<main class="hg-main">
main
</main>
<aside class="hg-left">Menu</aside>
<aside class="hg-right">Ads</aside>
<footer class="hg-footer">Footer</footer>
</body>
</html>
ベースとなるHTMLです。一部変更して、かつ分かりやすいように文字も入れてみました。
スタイルシート
上記のHTMLの「</head>」の前に以下のものをそのままコピペして入れてください。<style>
.hg-header {
background-color: #ffdb3a;
}
.hg-footer {
background-color: rgb(100, 100, 100);
color: #fff;
}
.hg-left,
.hg-right {
background-color: rgb(230, 230, 230);
text-align: center;
}
/* **************************
Holy Grail Layout with CSS Grid
************************** */
/* Define grid areas */
.hg-header { grid-area: header; }
/* IE edge */
.hg-header {
-ms-grid-row: 1;
-ms-grid-row-span:1;
-ms-grid-column: 1;
-ms-grid-column-span:5;
}
.hg-footer { grid-area: footer; }
/* IE edge */
.hg-footer {
-ms-grid-row: 5;
-ms-grid-row-span:1;
-ms-grid-column: 1;
-ms-grid-column-span:5;
}
.hg-left { grid-area: navigation; }
/* IE edge */
.hg-left {
-ms-grid-row: 3;
-ms-grid-row-span:1;
-ms-grid-column: 1;
-ms-grid-column-span:2;
}
.hg-right { grid-area: ads; }
/* IE edge */
.hg-right {
-ms-grid-row: 3;
-ms-grid-row-span:1;
-ms-grid-column: 5;
-ms-grid-column-span:2;
}
/* IE edge */
.hg-main {
-ms-grid-row: 3;
-ms-grid-row-span:1;
-ms-grid-column: 3;
-ms-grid-column-span:2;
background-color: #ff00ff;
display: block; /* 追記 */
}
.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px
1fr
80px;
min-height: 100vh;
/* IE edge */
display: -ms-grid;
-ms-grid-columns: 150px 0px 1fr 0px 150px;
-ms-grid-rows: 100px 0px 1fr 0px 80px;
}
@media screen and (max-width: 600px) {
.hg {
grid-template-areas: "header"
"navigation"
"main"
"ads"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px
50px
1fr
50px
30px;
}
}
</style>「/* IE edge */」と書いてあるところは、追記でかいて対応したところです。
参考
・The Holy Grail Layout with CSS Grid・CSS グリッドレイアウト - CSS | MDN
スポンサーリンク
コメントを残す