概要だけでも知っておこう、新しいレイアウトスタイルGridを使ったCSSの指定方法。


皆さんはホームページを作る際に、レスポンシブ対応のレイアウトににどういったスタイル指定を使っていますか。
TABLEタグを使ったりfloat指定を使ったり、flexboxを使ってる人もいるでしょう。
昔はTABLEぐらいしかレイアウトする方法がなかったのでTABLEを使っていましたが、スタイルシートが標準的に使われるようになるとfloat指定でレイアウトすることが多くなり、今ではflexboxを使っている人も多いと思います。
レスポンシブ対応が必要になってからは、個人的にはflexbox多用してますが便利ですよね。
flexboxも使われてからそれなりに時間が経ってきていますが、いまだにfloatしか使えないという人もいます。
若い子は、初めてHTMLに触れたときからflexboxとかが普通に存在しているので、使うのに抵抗がない。
でも昔からこういった仕事している人は、なかなか新しい技術を使えていない印象があります。

さて、これに加えて最近は新たにgridというスタイルが出てきました
ツイートでも流れてきてたので、これはなんやと簡単に調べてみました。

調べて思ったことは、個人的にはまだ使わないかぁなという感じ、なのでとりあえずは概略として紹介します。
この記事読んでもgrid指定は使えるようにならないけれど、
いざという時に使えるように、判断材料としては知識を持っておきましょう

Gridによるレイアウト構築をザックリ解説

grid指定は大きく2つの段階に分けてレイアウトを構築していきます。

その1:グリッド枠(区分け)を決める

gridのスタイルの指定は結構独特で、テーブルに似ている感じがします。
まず、gridという名前の通り、あらかじめ縦横にグリッドで区分けを行います。
grid
このgridの区分けを基準としてこの後レイアウトしていくことになります。
個人的には、このグリッドで区分けを決めてしまうというところが柔軟性を損なう要素なんじゃないかと思っているので使う気にならなかったんです。
また、テーブルスタイルと同じような縛りを感じました。

具体的には、このようなコードを書きます。

CSS
.grid_container {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px 100px;
    grid-template-columns: 200px 200px 200px 200px 200px;
}

display: grid;でgrid形式のスタイルにして、
grid-template-rowsgrid-template-columnsでは縦横にグリッドのエリアを決定します。
上記だと、grid-template-rows(行)について、100pxで5つのグリッドを作るということです。
grid-template-columnsはそれに対して列の指定ですね。
これで、5行5列のグリッドを定義したことになります。
まだ、グリッドを指定しているだけで、これでレイアウトができるわけじゃありません
これから要素を配置していくのですが、その要素に対してガイドラインを引いている感じですね。
イメージとしてはこっちの方がわかりやすいかな。
grid5

その2:要素を配置する

先ほど決めたグリットの中でどの領域に要素を配置していくかというのを決めていきます。
この第2フェーズが具体的なレイアウト指示になります。
先ほど5行5列でガイドを作ったので、それに沿ってレイアウト配置を決めてみましょう。
例えばこんな形でレイアウトすると考えます。
grid3
ヘッダー、フッター、サイドメニューみたいな感じですね。
この図を見ると、要素はそれぞれの色の5つ必要そうですね。
なので、HTMLは先ほどの.grid_containerというclass要素の中にこのように書きます。

HTML
<div class="grid_container">
	<div class="grid_item item1"></div>
	<div class="grid_item item2"></div>
	<div class="grid_item item3"></div>
	<div class="grid_item item4"></div>
	<div class="grid_item item5"></div>
</div>

HTML要素は配置できたので、配置した要素をグリッドに合わせてレイアウトしていきます。
その前に、先ほど定義したgridについて、次のような番号を考えます。
これらの番号を使ってレイアウトします。
grid4
先ほど色分けした図で一番上の黄色いヘッダー部分とぶれーの部分を例に考えてみます。
grid11
先ほどのHTMLの1番目のdivについて、

CSS
.grid_container .grid_item.item1{
    grid-row: 1 / 2;
    grid-column: 1 / 6;
}

として指定します。
上記のコードの意味は、
行は1~2のエリア、列は1~6のエリア。
ということで、これは黄色のエリアを表しています。

また、グレーのエリアでは

CSS
.grid_container .grid_item.item4{
    grid-row: 3 / 5;
    grid-column: 3 / 6;
}

行は3~5のエリア、列は3~6のエリア。
といった感じです。

一番シンプルな指定方法を書いたけれど、エリアの指定方法には他にもたくさん便利なものがあります。
具体的なのはCSSのリファレンスサイトとかを参考にしてみてください。
まずは、gridを使ったレイアウトをどのように行うのかを知っておくのが大切だと思います。

その3:レスポンシブの対応

レスポンシブでは、メディアクエリでそれぞれエリアの配置を変えればいいね。
grid12

ざっくりですが、こんな感じ。
この流れさえわかっていれば、いざと言う時に使うべきかどうかって言う判断はできるよね。
具体的なソースは覚えていなくても、概要だけ知っていれば必要になったときに具体的なコードを調べてすぐに使えます。
ソースコードを使わないで勉強してもあまり覚えられないので、とりあえずは何ができるかだけちゃんと把握しておきましょう。

グリットのデメリット

gridの指定方法はまだ完全に標準化はされていない新しいスタイルの指定方法です。
なのですべてのブラウザで同じように表現されるわけではなく、MSのブラウザではベンダープレフィックスが必要です。
また、MS製ブラウザに関しては、プレフィックスを付けてうまく使えたとしても、仕様上は一昔前の仕様で動くそうです。

個人的にはまだまだGridを使ったスタイルの指定は使わないかなぁという感じ。
flexboxやfloatで困った事はないし、Gridに関しては今は使わない理由はまだまだ標準化されてないというところなんですが、今回の概要を見てもわかるように、初めに枠を決めてその枠に従ってエリアを割り当てていくっていう仕様が、レイアウトの制約が強そうなイメージがあります。
逆に言うと、スタンダードなテンプレ的な構造のレイアウトを作るには向いているかもしれません。
flexboxやfloatは高さの操作に不便な点があったので、gridではそのあたりもきっちりと決めれるのでデザインのずれは少なくなりそうですね。

とはいっても、使ったことがない自分が言うことじゃないと思うし、使ってみるとむちゃくちゃ便利かもしれない。
頭いい人が新しい仕様として時代に合わせて作ってるんだから、やっぱり今までにないメリットがあるんでしょう。
これから時間が経つとレイアウトの標準になってくるかもしれない。
ある程度標準化されてきたら、自分のサイトとかで試してみるといいですね。

さて、全然関係ないですかようやくこの統計の本2冊を読み終えました。

 
2回目とは言え、まだまだ理解不足が多くて全然わかってないところも多いんですが、
いよいよ3回目に突入。
3回目ともなると、やっぱり2回目よりは読みやすくなってる。
それなりに理解してきてるんだと自分では思います。
まだまだ使える知識には高---い壁がありますが・・・
以前からガチガチの理論の本ではなく、統計に関する読み物系の本はいろいろ読んだりをしてるんだけど、最近それらの本を見返してみると圧倒的に昔より読みやすくなってます。
数式とか、言葉の意味がそれとなくわかるので、書かれてることが以前以上に入ってくる。
この本で基礎を勉強できてるおかげだと思って、まだまだ理解不足なところをどんどんしっかりとした知識として定着させていければと思います。
とりあえず、知っているというのと使えるというのには大きな壁があるので、仕事としては使えなければ意味がないのでまだまだ頑張らないといけないです。