IT + X

ITと何かのコラボレーションは時代を変えるかも

CSSグリッドを試してみる

ウェブ開発 HTML CSS

ウェブページでレイアウトするときは、いままではdivでボックス作ってスタイルシートのfloatで並べるというのが一般的な方法でした。 （ちなみに、ウェブ黎明期はtableで全てレイアウトしていました。） しかし、最近はCSSグリッドなるものがあるというので使ってみたら、とても便利だったのでブログ記事にしました。

例として、以下のようなレイアウトをCSSグリッドで作ってみましょう。

f:id:anthony-g:20190308230422p:plain

HTMLは以下のようになります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Grid Test</title>

<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<link rel="stylesheet" href="style.css">
</head>

<body>
  <header>トップページ</header>
  <section>
    <div id="box1">ボックス１</div>
    <div id="box2">ボックス2</div>
    <div id="box3">ボックス3</div>
    <div id="box4">ボックス4</div>
  </section>
</body>
</html>

divボックスにそれぞれbox1,box2,box3とIDをつけておきます。

次に,CSSファイルは以下のようになります。

style.css

@charset "UTF-8";

/* 基本設定 */

* {
    margin: 0;
}

/* ページ全体の設定 */
body {
    display: grid;
    grid-template-columns: 20px 200px 20px;
    column-gap: 10px;
    grid-template-rows: 
        [head] 50px
        [r1] 200px;
    grid-row-gap: 20px;
    row-gap: 20px;
    font-family: sans-serif;
}

header {
    grid-row: head;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    width: 100px;
    border: solid 1px black;
}

section {
    grid-row: r1;
    grid-column: 2;
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows:
       [sr1] 100px
       [sr2] 100px;
    row-gap: 10px;
    column-gap: 5px;
}

div {
    border: solid 1px black;
}

div#box1 {
    grid-row: sr1;
}

div#box2 {
    grid-row: sr1;
}
div#box3 {
    grid-row: sr2;
}
div#box4 {
    grid-row: sr2;
}

まず、bodyのところでdisplay: gridとしてCSSグリッドを使う指定をします。 次に、行方向のグリッドのレイアウトを以下のように定義します。

grid-template-columns: 20px 200px 20px;

これは以下のように両側に20pxの余白をつけて中央にコンテンツを200pxの幅で配置するレイアウトになります。

f:id:anthony-g:20190309113349p:plain

カラムの区切りは左から1,2,3...と番号がふられますので、これでコンテンツを表示する位置を指定します。 このページはsection部分が表示されるコンテンツですので、sectionのgrid-columnを2に指定します。

次に、列方向のレイアウトの指定を行います。 こちらも行と同じように以下のように設定します。

grid-template-rows: 
    [head] 50px
    [r1] 200px;
f:id:anthony-g:20190309114946p:plain

[head]とか[r1]というのが追加されていますが、これは列を番号ではなく名前で指定できるようにするための設定です。 headerで以下のように設定します。

header {
   grid-row: head;
...

表示コンテンツを含むsectionは、以下のように設定します。

section {
   grid-row: r1;
   ...

これで、大枠のレイアウトが完了です。 4つのdivはさらにsectionの中でグリッドを設定してレイアウトしています。

このようにグリッドを使えば、方眼紙の上でデザインするようにレイアウトすることができます。 floatを使うより直感的なので慣れればこちらのほうがデザインしやすいのはないでしょうか。

参考にした本

CSSグリッドで作る HTML5&CSS3 レッスンブック

CSSグリッドで作る HTML5&CSS3 レッスンブック