タイ研修いってきました
2020.11.24

【今までの苦労はなんだったのか】CSSの常識を覆す『Grid Layout』

  • このエントリーをはてなブックマークに追加
イキツケ制作所

初めまして!9月からインターン生としてLEGITにお世話になっておりますてっちゃんです!

今までキャラ的に「ちゃん」付けのあだ名をつけられてこなかったのですが、LEGITに来て初めて「てっちゃん」というあだ名を頂きました。案外気に入っています(笑)

 

今回はGrid Layoutが革新的かつ非常に便利で、超超超オススメなので従来のFrex Boxと比較しながらご紹介したいと思います。

Grid Layoutとは?

CSS Gridレイアウトとは、CSSでレイアウトを組む時に使われる主要な方法の一つです。Frex Boxの後に出てきたもので、後発というだけあってFrex Boxと比べてもより自由にレイアウトを組むことができます。

Grid Layoutの用語

まずは、この後の解説を理解しやすくなるようにGrid Layout特有の用語を説明します。

コンテナ

Grid全体を囲む要素です。

display: grid;を指定することで、その要素はGrid Layoutのコンテナになります。

アイテム

コンテナの子要素です。

コンテナの直接の子要素は基本的に全てのアイテムになります。

ライン

グリッドを分ける垂直および水平の線のことです。

ラインには、上あるいは左から1から順に生の番号が振られています。

セル

アイテムを配置できる最小の単位です。

エリア

一つあるいは複数のセルが結合してできるセルの集まりです。

エリアには名前をつけることができ、アイテムを配置できます。

Grid Layoutの使い方

 Grid Layoutでレイアウトを組む方法は下記の二つがあります。

◇ラインを使った方法

◇エリアを使った方法

これらの方法をレイアウトの基本である聖杯レイアウトを例として挙げ、それぞれのレイアウトの組み方をご紹介します。

 

HTML

 

ラインを使った方法

下記の3つのステップで記述を行います。

  1. コンテナを作成する。作成するには要素に対してdisplay: gridもしくはdisplay: inline-girdを指定する。その時、コンテナ直下の要素がアイテムとなる。
  2. コンテナにgrid-template-rowsgrid-template-columnsを指定してグリッドのサイズを決める。
  3. アイテムにgrid-rowgrid-columnを指定しの配置を決定する。

 

grid-template-rows

グリッドの行の高さを指定するプロパティ

grid-template-columns

グリッドの列の幅を指定するプロパティ

grid-row

縦方向のアイテムの位置を指定するプロパティ。スラッシュ区切りで指定する。

grid-column

横方向のアイテムの位置を指定するプロパティ。スラッシュ区切りで指定する。

 

エリアを使った方法

下記の3つのステップで記述を行います。

  1. 1.はラインを使った方法と同様。
  2. コンテナにgrid-templateを指定し、視覚的に配置する。グリッドのサイズもgrid-template内で決めることができる。
  3. アイテムにgrid-areaを指定し、どこに割り当てるかを決める。

 

grid-template

grid-columnsおよびrowsareasを定義するための短縮プロパティ

grid-area

グリッドアイテムの場所を指定するプロパティ

Grid Layoutのメリットデメリット

メリット

  • HTMLの不要なdivが消える
  • HTMLをレイアウトをあまり意識せずに記述することができる
  • CSSのGridの中にある子要素がシンプルになる
  • レスポンシブ対応が容易
  • 視覚的にわかりやすい

デメリット

  • 基本的なブラウザに対応しているが、プロパティによってはInternet Explorerには対応していない
  • 比較的学習コストが高い

Internet Explorerとは?

米国マイクロソフト社が発表したブラウザーソフト。インターネット上のウェブページを閲覧することができる。IE。

【引用元】https://www.weblio.jp/content/content/インターネットエクスプローラー

さいごに

Grid Layoutの使い方をご紹介してきましたが、非常に便利でCSSの常識を覆すほどの革新的なCSSの新しい機能です。今までの苦労はなんだったのかと思ってしまうほど簡単にレイアウトを組めてしまうので、ぜひ使用してみてください!

詳しいブラウザ対応については下記リンクでチェックしてください!

https://caniuse.com/#home

イキツケ制作所
この記事を書いた人

てつコーダー

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金