ぬまのそこ

namazuのゆるいエンジニアブログ

CSSGridとかいう強い奴

はじめに

この記事は、私の所属する研究室のアドベントカレンダー16日目の記事です。

adventar.org

光の速度で執筆を終えないといけない事情があるため内容が薄いですが悪しからず。。。。。。。 昨日に続いて今日も飲み会に行ってきます。 

ではさっそく。

CSSGrid?

CSSGridとはCSS新しいレイアウトモジュールです。 レイアウトモジュールとはおおざっぱに言ってしまえば。

.hoge {
  display: flat;
}

flatにあたる部分で指定する物です。ここにflexとかblockとかinlineとかtableとか色々と書くと様々なレイアウトが適用できます。

最近ではflexが非常に強力であるため多く用いられてますね。 これでいつもgridをみんな書いていることが多いはずです。

qiita.com

上のサイトはflexboxでいろいろなレイアウトをするサンプル。 ほんとflexbox有能感。 私は最近このflexboxなしでは段組が出来なくなってしまいました。 ゆとりなので昔のflat使うやり方は忘れた。

ちょっと前なんですが、このdisplayの所に指定する物として、gridというのが追加されました。 これにより多数の新規プロパティが使えるようになり、gridについて明瞭にCSSで記述することが可能になります。

flexboxは回り込みの制御なのでgridを直感的に組むのが難しかった気がします。 しかしgridはgridを組むためのものなので、特に詳しくなくてもgridなんだなーってわかる記述が書けます。

現時点ブラウザ対応(2017/12/16)

gyazo.com

主要ブラウザは対応しています。  とりあえずそのまま使っても開発では検証できるので、ちょろっと作って手元でやってみることができそうですね。

聖杯レイアウトをCSSGridで

聖杯レイアウト?

たまに知らない人がいるんですが、聖杯レイアウトとはこんな感じのレイアウトのことです。 よく見る奴ですね。 gyazo.com

CSSGridで聖杯レイアウトつくる

HTMLはまぁこんな感じ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聖杯レイアウトサンプル</title>
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./grid-layout.css">
</head>
<body>
    <header class="header">Header Area</header>
    <main class="content">Main Content Area</main>
    <aside class="menu">MenuArea</aside>
    <aside class="left-menu">LeftMenuArea</aside>
    <footer class="footer">Footer Area</footer>
</body>
</html>

common.cssは背景色を付けたりしているだけ。 grid-layout.cssが段組をしているCSSです。

.wrap {
    min-height: 100vh;

    display: grid;

    /* 見た目通りにgridを書く */ 
    /* 縦横3列のグリッドをgrid-areaで名付けた名前で埋めていく */
    grid-template-areas: "header header  header"
                         "menu   content left"
                         "footer footer  footer";

    /* 縦列の幅を設定 frは利用可能な幅の中で占める割合. */
    /* 今回の場合, 1fr =  100vw - (160px * 2) */
    grid-template-columns: 160px 1fr 160px;

    /* 横列の幅を設定 */
    grid-auto-rows: 100px 1fr 30px;
}

/* レスポンシブ対応させる グリッドの組み方を変えるだけでOK */
@media screen and (max-width: 600px) {
    .wrap {
        /* 上から横一列縦5行で並べる */
        grid-template-areas: "header"
                             "menu"
                             "content"
                             "left"
                             "footer";
        /* 列幅 */
        grid-template-columns: 100vw;

        /* 高さ */
        grid-template-rows: 100px
                            50px
                            1fr
                            50px
                            30px;
    }
}
/* グリッド内の各要素にgrid-areaで名前を付ける */
.header { grid-area: header; }
.content { grid-area: content; }
.menu { grid-area: menu; }
.left-menu {  grid-area: left; }
.footer { grid-area: footer;}

結果

f:id:kituneko-510:20171216135950g:plain

良い感じにできてますね。 

Flexbox or CSSGrid?

Flexboxで今回と同じレイアウトを組む

やりやすいように微妙にHTMLを変えます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聖杯レイアウトサンプル</title>
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./grid-layout.css">
</head>
<body class="wrap">
    <header class="header">Header Area</header>
    <div class="content-wrap"> <!- 横並びのdisplay flexを指定するためこのdivが増える ->
        <main class="content">Main Content Area</main>
        <aside class="menu">MenuArea</aside>
        <aside class="left-menu">LeftMenuArea</aside>
    </div>
    <footer class="footer">Footer Area</footer>
</body>
</html>

3行を組んで2行目をflex入れ子で横に並べる感じで作ります。

CSSはこんな感じです。

/* 縦3列のflex */
/* header -> content -> footer */
.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100px;
}

.footer {
    height: 30px;
}

/* 横3列をflex入れ子で作る */
/* menu -> content -> left-menu */
.content-wrap {
    display: flex;
    flex: 1;
}

.content {
    flex: 1;
}

.menu {
    width: 160px;
}

.left-menu {
    width: 160px;
}

/* レスポンシブ対応, 横並びを縦に変える & 高さ設定 */
@media screen and (max-width: 600px) {
    .content-wrap {
        flex-direction: column;
    }
    .menu {
        height: 50px;
        width: 100%;
    }
    .left-menu {
        height: 50px;
        width: 100%;
    }
}

gridとして作るのを考えるとなかなか分かりにくいですね。 gridモジュールが一括してすべて設定できるのを考えると、flexはいろいろなところに設定が分散してしまって面倒感があります。

さいご

ちょろっとCSSGridを触ってみましたが、Gridレイアウトを作るのには最高って感じでした。 

Flexで無理にGridを作っていた感じがなくなり、綺麗に書けるようになった気がします。

がっつり使ったわけではないので、細かく何が出来ないのかとかは分かりませんが、今後積極的に使って行きたいなと感じました。 古いブラウザ対応もプリコンパイラとかでできるのかな?

もっと詳しくやりたかったんだけど今日は時間が無いのでこれでおしまい!!!

研究室のアドベントカレンダー、明日は3年のtachanが書いてくれるそうです。 mrubyをやってみるんだそうです。 なんか強そうな感じがしますね。 ご期待下さい。

参考サイト様

coliss.com

hashrock.github.io