Grid-templateの使い方：レスポンシブ対応レイアウト構築法

今回は、Grid-templateと言われるCSSプロパティを使って超簡単にサイト全体をレスポンシブ対応レイアウトにする新しい方法を紹介します。

レスポンシブ対応レイアウトはflexboxによる聖杯レイアウトを使って構築するのが一般的とされてきましたが、今回紹介する方法はflexboxの様にCSSの記述が多く無く、ほんの数行で全く同じ事が可能になる革新的なレイアウト構築法です。

「Grid」は、もっと便利にもっと効率的にコーディングを行うための新技術です。コーダーさんやWEB制作会社の方、プログラミング勉強中の方は是非参考にしてみて下さい。

聖杯レイアウト
Grid-templateの作成（Step1）
grid-templateの調整（Step2）
grid-templateの微調整（Step3）
grid-templateのレスポンシブ対応（Step4）

聖杯レイアウト

聖杯レイアウトとは、下記の様な上下左右の黄金バランスを持ったWEBコーディングでよく行われるレイアウト法です。
このレイアウトを「Grid-template」でより簡単に作成していきます。

上記のレイアウトの記述はflexboxを使って記述しています。詳しくは下記の記事を参照して下さい。

Grid-templateの作成（Step1）

上記のflexboxでの記述だとdiv要素とCSSクラスを多用して、HTML、CSS共にごちゃごちゃした感じになってしまいます。

そこで今回紹介する「Grid-template」プロパティを使う事で超シンプルな記述で聖杯レイアウトが作成する事が出来ます。

まずはdiv要素は全て削除して、ヘッダーは「header」、メインコンテンツは「main」、サイドバーは「nav」「aside」、フッターは「footer」で囲い直します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>グリッド見本</title>
    <link rel="icon" href="">
    <meta name="description" content="">
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>
      <header class="header">ヘッダー</header>
      <nav class="left">左サイドバー</nav>
      <main class="main">メインコンテンツ</main>
      <aside class="right">右サイドバー</aside>
      <footer class="footer">フッター</footer>
  </body>
</html>

次に、bodyに対して「display: grid;」のプロパティを指定します。

body {
   display: grid;
   grid-template:
    "header header header"
    "left center right "
    "footer footer footer";
}

同じくbodyに対して「grid-template:」のプロパティを指定して、「“XXXXX”」内に任意の文字列を並べます。この時に視覚的にレイアウトを構築していきます。

grid-template:
    "header header header"
    "left center right "
    "footer footer footer";

次に、body内の子要素に対して「grid-area:」を指定します。そこに先ほどの「grid-template:」で視覚的に並べた任意の文字列がどの要素のものなのかを指定します。

header {
  grid-area: header;
  background-color: brown;
}

まとめると下記の様に記述します。

HTML/CSS

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>グリッド見本</title>
    <link rel="icon" href="">
    <meta name="description" content="">
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>
      <header class="header">ヘッダー</header>
      <nav class="left">左サイドバー</nav>
      <main class="main">メインコンテンツ</main>
      <aside class="right">右サイドバー</aside>
      <footer class="footer">フッター</footer>
  </body>
</html>

CSS

body {
  width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "header header header"
    "left center right " auto
    "footer footer footer";
}
 
header {
  grid-area: header;
  background-color: brown;
}
 
nav {
  grid-area: left;
  background-color: blue;
}
 
main {
  grid-area: center;
  background-color: chartreuse;
}
 
aside {
  grid-area: right;
  background-color: gold;
}
 
footer {
  grid-area: footer;
  background-color: #777;
}

ここまで出来ると下記の様なレイアウトが完成します。

grid-templateの調整（Step2）

次のステップでは、Step1で作成したgrid-templateの幅や高さを調整します。
grid-templateの調整は、grid-templateの記述内のみで可能なので超簡単にレイアウト調整が可能です。

先ほどの「grid-template」の記述の「”XXXX”」の右側に高さの指定を書いていきます。「”XXXX”」の下側に幅の指定を書いていきます。

これだけで完了です。

grid-template:
    "header header header" 80px   /*縦幅*/
    "left center right" 1fr      /*縦幅*/
    "footer footer footer" 50px /*縦幅*/
    /100px 1fr 150px ;  /*横幅*/

上記の記述の場合、「header」の高さが80px。「left center right」の高さは幅いっぱい。「footer」の高さが50pxです。
横幅は、「left」が100px。「center」が幅いっぱい。「right」が150pxになっています。

まとめると下記の様に記述します。

CSS

HTMLは先程と同じ。

CSS

body {
  width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "header header header" 80px
    "left center right" 1fr
    "footer footer footer" 50px/
    100px 1fr 150px ;
}
 
header {
  grid-area: header;
  background-color: brown;
}
 
nav {
  grid-area: left;
  background-color: blue;
}
 
main {
  grid-area: center;
  background-color: chartreuse;
}
 
aside {
  grid-area: right;
  background-color: gold;
}
 
footer {
  grid-area: footer;
  background-color: #777;
}

ここまで出来ると下記の様なレイアウトが完成します。

ここまで出来れば基本のレイアウトの構築は完成で良いと思います。
あとは、微調整をしたり、各々の親要素の中に細かな子要素を追加していってサイト全体を完成させるだけです。

grid-templateの微調整（Step3）

次は、細かな微調整の技を紹介します。

ヘッダーやサイドバーの外側や、要素と要素の間を開けたい場合は下記の様に「……」で繋いだ透明なコンテンツを作成します。そこに対してStep2同様に幅と高さの指定をするとそれが反映されます。

grid-template:
    "... ...... ...... ...... ...... ...... ..." 10px
    "... header header header header header ..." 80px
    "... ...... ...... ...... ...... ...... ..." 10px
    "... left ...... center ...... right ...   " 1fr
    "... ...... ...... ...... ...... ...... ..." 10px
    "... footer footer footer footer footer ..." 50px
    "... ...... ...... ...... ...... ...... ..." 10px
    /auto 100px 10px 1fr 10px 150px auto ;

見た目はこんな感じになります。

実践で使える技なので覚えておきましょう。

grid-templateのレスポンシブ対応（Step4）

そして最後に、当記事の最終的な目的である「簡単にレスポンシブ化」に関しては、下記の記述だけでOKです。

@media screen and (max-width: 1000px){
  body{
    grid-template: 
    "header" 150px
    "center" 1fr
    "left  "
    "right "
    "footer" 100px
    ;
  }
}

「grid-template:」の視覚的配置をスマホ用に一列に変更してるだけです。
実際の動きは下記のGIFです。