CSSでコーディング。Grid Layout(グリッドレイアウト)でレイアウト。

CSSでコーディング。Grid Layout(グリッドレイアウト)でレイアウト。

これまでCSSでレイアウトを行うにはFlexBoxを使ってコーディングを行っていました。

しかしスマートフォンのようなデバイスの登場により、画面の小さなブラウザでもレイアウトが崩れないように表示されるレイアウトが要求されるようになりました。

そこで次世代のコーディング言語として、『CSS Grid』が登場しました。

今ではスタンダードになりつつあるこのコーディング方法について、今回は解説していきます。

事前にレイアウトを考えておこう。

Grid Layout(グリッドレイアウト)でコーディングを行っていく為には、事前にどのようなレイアウトで要素を配置していくのか検討しておきましょう。

手書きでも良いので準備しておくと、スムーズにコーディングができます。

今回は例として以下のようなレイアウトを準備しました。

グリッドセルを覚えよう。

先程準備した『ヘッダー』、『ナビ』、『メイン』、『サイド』、『フッター』はそれぞれ四角で作られています。

この四角のことを『グリッドセル』と呼びます。

グリッドラインを覚えよう。

そしてグリッドセルを分割するラインのことを『グリッドライン』と呼びます。

それでは先程準備したレイアウトに『グリッドライン』を引いてみましょう。

Grid Layout(グリッドレイアウト)でレイアウトしよう

それでは早速、CSSでレイアウトをコーディングしていきましょう。

まずはHTMLが必要ですね。

そこで今回は事前に準備したレイアウトに合うように、事前にHTMLを準備しておきました。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>ぱくぱくの Grid Layout</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>ヘッダー</header>
        <nav>ナビ</nav>
        <main>メイン</main>
        <aside>サイド</aside>
        <footer>フッター</footer>
    </body>
</html>

display: grid;を指定しよう。

ここからCSSをコーディングしていくのですがまずは、これから行うコーディングが『Grid Layout(グリッドレイアウト)』であることを指定する必要があります。

CSS

body{
    display: grid;
}

このように、これからレイアウトを行う要素の親要素に『display: grid;』をします。

『親要素』にコーディングすることがルールです。

グリッドラインの幅を指定しよう。

これから縦幅と横幅をそれぞれ指定するのですが、ここでポイントがあります。

幅の指定には『grid-template-●●●●●:』プロパティを使用します。

そしてこの『●●●●●』の中には縦列と横列を表す単語が入ります。

縦列:column
 行:row

なので横幅を指定する時は縦列を表す『columns』を使用し、縦幅を指定する時は行を表す『row』を使用します。

要は列の幅なのか、行の幅なのかということです。

横幅を指定しよう。(grid-template-columns:)

まずは横幅を指定してみます。

この横幅指定については『grid-template-columns:』プロパティを使用します。

列の幅を指定する方法ですね。

今回は『比率』で指定してみます。

『ナビ』、『メイン』、『サイド』をブラウザの大きさに対して『1:7:1』で指定する方法です。

CSS

body{
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
}

このように比率で指定する場合は単位に『fr』を使用します。

そして今回はレイアウトが3列なので、左の列からそれぞれの比率の値を入れます。

『比率』で指定するメリットは、ブラウザの大きさが変わってもそれに合わせてセルの幅も変わることです。

縦幅を指定しよう。(grid-template-rows:)

では今度は縦幅を指定していきましょう。

この縦幅の指定については『grid-template-rows:』プロパティを使用します。

行の幅を指定する方法ですね。

今回は『絶対値』を使って指定します。

上の行から順に60px、400px、60pxで指定していきます。

CSS

body{
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 60px 400px 60px;
}

それぞれの要素をレイアウトしていこう。

先程はグリッドラインの幅を指定して、それぞれの四角の大きさを指定していきました。

そして次にやっとそれぞれの要素を、指定した場所に配置していきます。

グリットラインの番号を覚えよう。

それぞれのグリッドラインには、番号がついています。

少しイメージを解説しておきますね。

上の図のように列の場合は左から順に①〜④の番号があります。

そして行の場合は上から順に①〜④の番号があります。

この番号を念頭に置いて、次の解説に移っていきます。

要素をレイアウトしていこう。

それではヘッダーのレイアウトをしていきましょう。

レイアウトには『grid-●●●●●-start:』と『grid-●●●●●-end:』のプロパティを使用します。

そしてこの●●●●●には『row(行)』と『column(列)』が入ります。

ヘッダーの要素は『header』です。

この『header』は先程のグリッドラインの番号でいうと、行は①〜②に配置します。

そこでCSSでは、、、

CSS

body{
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 60px 400px 60px;
}
header {
    background-color: darkgray;
    grid-row-start: 1;
    grid-row-end: 2;
  }

そして『header』の列は、①〜④に配置します。

そうするとCSSは、、、

CSS

body{
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 60px 400px 60px;
}
header {
    background-color: darkgray;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
  }

このようにグリッドラインに合わせて、要素を当てはめていくのがGrid Layout(グリッドレイアウト)だよ。

それでは他の要素についても、同様の手順でコーディングしていきます。

そして全てのコーディングが出来ると、以下のようになります。

CSS

body{
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 60px 400px 60px;
}
header {
    background-color: darkgray;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
  }
  nav {
    background-color: lawngreen;
    grid-row-start: 2
    grid-row-end: 3
    grid-column-start: 1
    grid-column-end: 2
  }
  main {
    background-color: darkkhaki;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  aside {
    background-color: darkseagreen;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  footer {
      background-color: indianred;
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
  }

まとめ

このようにグリッドラインを引いてそこに、要素を入れていく方法がGrid Layout(グリッドレイアウト)と呼ばれています。

これまでのFlexBoxよりも柔軟にレイアウトに対応できるプロパティとして近年注目されています。

このCSS Gridをどんどん使って、慣れていきましょう。

CSSカテゴリの最新記事