CSS Grid Layoutで4カラムのレイアウトを一瞬で作る方法

4カラムのレイアウトは基本的なレイアウトであり、あらゆる場面で必要になります。そして、CSS Grid Layoutは今最も新しいデザイン方法であり、今マスターすべき技術の一つです。今回は、CSS Grid Layoutを使い、4カラムのレイアウトを一瞬で作る方法を紹介します。

見出し

1 はじめに
2 Grid Layoutの登場で過去の技術はどうなるか？
3 4カラムのレイアウト(CSS Grid Layout)
4 最後に
- 4.1 関連記事

はじめに

CSSの進化には興味深い物があります。昔はテーブルデザインという今見ると古臭いデザインがあり、モダンなデザインにしたいという時代の要望に答えるかのようにfloatを使ったテクニカルなデザインに移行していきました。そして、iPhoneなどの登場によりレスポンシブデザインが流行り始めると、Bootstrapが登場し、グリッドシステムというデザイン方法が主流となりました。最近では、CSS3の登場により、CSS Flexbox Layoutが登場し、一次元レイアウトを簡単に扱えることから、デザイナーは誰もが使うようになりました。そして、ついにCSS Grid Layoutの登場した事により、2次元レイアウトさえも簡単に扱う事ができるようになりました。

Grid Layoutの登場で過去の技術はどうなるか？

Gird Layoutの登場により、過去のデザイン技術がどうなるかは、誰もが気にしているところです。未来の事は誰にも分かりませんが、私の主観を述べることにします。

floatによる全体デザイン -> 消滅する。もちろんプロパティとしては普通に使う。
Bootstrapのグリッドシステム -> グリッドシステムはGird Layoutで代替可能のため、グリッドのために使う理由は無い。どちらかと言えばCSSデザイン用のフレームワークの一つとして使われる。
Flexbox Layout -> 1次元レイアウト（行または列で制御するレイアウト）の場合に採用される。また、Grid Layoutと組み合わせて使うこともあるので、普通に使われ続ける。

まあ、そんな感じでしょう。今デザインを学ぶなら、Flexbox LayoutとGrid Layoutの両方学ぶ必要があることは間違いありません。

4カラムのレイアウト(CSS Grid Layout)

ということで、一瞬で4カラムのレイアウトを作ってしまいましょう。

作業フォルダとファイルの準備

$ mkdir 4column
$ cd 4column
$ mkdir css
$ touch css/grid.css
$ touch index.html

index.htmlの作成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/grid.css">
  <title>4 Column layout</title>
</head>

<body class="grid">
  <header class="header">Header Area</header>
  <main class="main">
    Main Area
    <h2>4 Column Layout with CSS Grid Layout</h2>
    <p>Gird Layout is awesome!</p>
  </main>
  <aside class="sidebar">Sidebar Area</aside>
  <footer class="footer">Footer Area</footer>
</body>

</html>

grid.cssの作成

.grid {
    display: grid;
    grid: 100px auto 100px / repeat(12, 1fr);
    grid-template-areas:
        "H H H H H H H H H H H H"
        "M M M M M M M M S S S S"
        "F F F F F F F F F F F F";
    grid-gap: 5px;
    min-height: 100vh;
    margin: 0;
}

.header {
    grid-area: H;
    background-color: #DC9191;
}

.main {
    grid-area: M;
    background-color: #DCC491;
}

.sidebar {
    grid-area: S;
    background-color: #74B074;
}

.footer {
    grid-area: F;
    background-color: #677394;
}

動作確認

それでは、見てみましょう。普通にブラウザで開いても良いのですが、変更するたびにブラウザをリフレッシュするのはアナログ過ぎるので、live-serverで起動しましょう。これを使うと、HTMLやCSSを変更した時にブラウザが自動的にリフレッシュされて表示されます。

$ npm install -g live-server
$ live-server

「http://localhost:8080」を開くと

4カラムのレイアウトが表示されました。

これをChromeのデベロッパーツールで見てみると

Grid Layoutにより縦3分割、横12分割されていることが分かります。まさに一瞬でレイアウトができましたね。

最後に

いかがでしたか？今回は触り程度の内容でしたが、CSS Grid Layoutは今後主流となるデザイン方法ですので、できるだけ早く学んでおくと良いでしょう。では。

この記事を書いた人
最新の記事

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。