2018.08.15 [水] CSS Grid Layoutの時代がやってくる。［その3］
ずいぶん時間が経ってしまいましたが、3月の記事「CSS Grid Layoutの時代がやってくる。［その2］」の続きで、Internet Explorer11での対応を調べてみました。
さて、前回CSS Grid Layoutで組んだ、ウェブDeBLOGを模ったレイアウトをInternet Explorer11で確認してみましょう。
HTMLとCSS
htmlは大まかな構造として、header, main, footerを準備します。
<body>ヘッダー
</body> コンテンツ
CSS Gridで、グリッドの横の格子と縦の格子を設定し、各要素に割り当てます。
navの部分はflex-boxで横並びにしてあります。
body{
width: 100%;
box-sizing: border-box;
background-color: #1861AE;
display: grid;
grid-template-rows: 80px 150px 80px;
grid-template-columns: 1fr 120px ;
grid-gap: 1em;
}
header{
grid-column: 1/3;
background-color:#d186de;
}
main{
grid-column: 1/2;
background-color:#bae3f9;
}
aside{
grid-column: 2/3;
background-color:#00CCFF;
}
footer{
grid-column: 1/3;
background-color:#f5d951;
}
nav ul{
list-style-type: none;
margin: 0;
padding: .5em 0 0 0;
display: flex;
justify-content: flex-end;
}
nav ul li{
margin: 0 1em 0 0;
padding: 0;
font-size: .7em;
line-height: 1.5;
}
Chrome, Firefox, Safari, Edgeなどのモダンブラウザでは下記のように表示されていると思います。
ところが、Internet Explorer11では、下記のように表示されます。
