今回はCSSのgrid-template-areasを用いて、デスクトップPC, タブレット, スマートフォンでそれぞれ異なるレイアウトにする方法について紹介する。
atatat.hatenablog.com
今回見基本的なコードは下記記事のものを用いて、最低限レイアウトを構成する必要なコードだけに絞った。
coliss.com
今回はheader, navigation, main, sidebar, ads, footerの領域がそれぞれデバイスの表示幅によって配置が変化する。
htmlはcontainer内にそれぞれの領域を定義しておく。
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="main">main</div>
<div class="sidebar">sidebar</div>
<div class="ads">ads</div>
<div class="footer">footer</div>
</div>
</body>
CSSに関してbodyは前回と同じ。今回は新しきgrid-template-areasプロパティを使用するが、それぞれの領域をgrid-area: header;のように定義する。
.header {
grid-area: header;
border: 2px dashed green;
}
.navigation {
grid-area: nav;
border: 2px dashed green;
}
.ads {
grid-area: ads;
border: 2px dashed green;
}
.sidebar {
grid-area: sidebar;
border: 2px dashed green;
}
.main {
grid-area: main;
border: 2px dashed green;
}
.footer {
grid-area: footer;
border: 2px dashed green;
}
スマホ用のレイアウトはパンケーキレイアウトで上からheader, navigation, main, sidebar, ads, footerとする。サイズはmainだけを1frで指定し残りはautoとするにはgrid-template-rows: auto auto 1fr auto auto auto;とする。
また順序を指定するには grid-template-areas:を用いて以下のようにレイアウト構造を指定する。
.container {
display: grid;
height: 100vh;
background:lightgray;
gap: 12px;
grid-template-rows: auto auto 1fr auto auto auto;
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"ads"
"footer";
}
次にタブレット用のレイアウトはheaderとnavigationは1行にして、sidebarとmainを1:2, adsとfooterを1:2とするレイアウトにする。
またsidebarとmainの行高さを1frとする。この場合は4行のレイアウトになるのでgrid-template-rows: auto auto 1fr auto;とする。
またsidebarとmainを1:2の幅にするにはgrid-template-areasで "sidebar main main"と表記する。headerやnavigationのように1行すべてを使う場合は
"header header header"とする。タブレット用としてはメディアクエリを使用しタブレット用のCSSを適用しているが、min-widthに関して実際には720pxなどだがCodePenで表示できるように480pxとしている。
@media (min-width: 480px) {
.container {
grid-template-areas:
"header header header"
"nav nav nav "
"sidebar main main"
"ads footer footer";
grid-template-rows: auto auto 1fr auto;
}
}
同様にPC用のレイアウトはheaderとfooterを1行、sidebarとnavigation, adsを1:2:1, sidebarとmainとadsを1:2:1とする。CSSは以下のようになる。
@media (min-width: 1020px) {
.container {
grid-template-areas:
"header header header header"
"sidebar nav nav ads"
"sidebar main main ads"
"footer footer footer footer";
grid-template-rows: auto auto 1fr auto;
}
}
CodePenを実行すると例えば1xでスマホ、0.5xでタブレット、0.25xでデスクトップPCに切り替わる。（コード表示した場合で表示デバイスの幅によって切り替わらない可能性がある。）
See the Pen
grid-areas by ATATAT (@atatat)
on CodePen.
