CSS

CSSグリッドレイアウトについて。flexboxより使いやすいが、問題はいつものアイツだな。

今回はCSSグリッドレイアウトについてです。以前からflexboxと並んで気になっていたこのグリッドレイアウト。2018/4現在のサポートブラウザは、モダンブラウザとIE11,edgeとなりましたね。ただ、IEとedgeについては完全対応ではないので少し手間が必要です。
でも、一応揃ったので勉強がてら組み込んでみます。これが今後基本的なベースとなれば本当楽なんですけどね。

CSSグリッドレイアウト概要

CSSグリッドレイアウトでは、要素を縦・横の2つの線を使って作成していきます。エクセルをイメージすると分かりやすいですね。
各グリッドラインは、水平に分割する「行」(row)と垂直に分割する「列」(column)に分割されます。

行と列に区切られたエリアをグリッドセルと呼ばれます。

2本の行や列で区切られた水平・垂直のエリアをグリッドトラック呼びます。

4つのグリッドラインで区切られたエリアをグリッドエリアと呼ぶ。

各グリッドトラックの空白スペースをグリッドギャップと呼ぶ。

グリッドの定義

親要素(#container)にdisplay:gridを指定します。
縦(列)を区切るには、grid-template-columsプロパティを利用する。
grid-template-colums:200px 1fr 200px;
「fr」というのは利用可能な残り分です。指定を1fr 1fr 1fr とすれば均等3分割された幅となりますし、2fr 1fr 1frとすれば、幅は全体の2:1:1の割合となります。

次に横(行)を区切ります。横の線は、grid-template-rowsプロパティです。
grid-template-rows:100px 1fr 100px;

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
}

アイテムを配置

先程定義したgridにアイテムを配置していきます。
配置には、grid-columnとgrid-rowで座標を指定する感じですね。縦と横は、それぞれ左上が基準で1となります。

.headCnt{
	grid-row:1/2;
	grid-column:1/4;
}
.leftCnt{
	grid-row:2/3;
	grid-column:1/2;
}
.midCnt{
	grid-row:2/3;
	grid-column:2/3;
}
.rightCnt{
	grid-row:2/3;
	grid-column:3/4;
}
.footCnt{
	grid-row:3/4;
	grid-column:1/4;
}

ただこれでは、後々管理が大変になることもあります。そこで視覚的に分かりやすくするために、親要素にgrid-template-areasを指定し各アイテムに名前を定義します。またスマホ対応のレスポンシブにするときにも便利になります。

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt"
}
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}

こうすると、レスポンシブさせるときにgrid-template-areasを変更するだけで対応できます。
あと、それぞの位置を変更するのも容易です。例えば、leftCntをmidcntの下に移動させたい場合は、名前を入れ替えるだけです。カンタンですね。

@media screen and (max-width:767px){
#container{
grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt"
}
}

画面プレビュー

ここまででプレビューしてみます。(見やすくするためにheight=”100vh”を追加しています)
キレイにグリッドが表示されましたね。レスポンシブ対応しているので、画面幅を狭くしていけば767px以下で縦1列に並ぶことも確認できます。


それでは、ここまでで作成したHTMLとCSSを掲載。CSSについては、後述するIE11対策も追記しております。

Html

headCnt
leftCnt
midCnt
rightCnt
footCnt

CSS

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt";
height:100vh; /* 画面一杯にする */
}
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}
@media screen and (max-width:767px){
#container{
grid-template-colums:1fr;
grid-template-rows:60px 60px auto 60px 60px;
grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt";
}
/* IE11対応の為 */
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}
}

ブラウザのサポート状況

さて、ここまで簡単に実装でき、CSSもHTMLも軽量化できましたが、ここでブラウザのサポート状況についてです。
モダンブラウザでは実装されていますが問題は、IEのサポート状況にあります。主にIE11でのサポートが不完全という事。さすがに実用させるにはこの問題をクリアしないといけません。
まず、このままではIE11では表示できていないので、恒例のベンダープレフィックス(-ms-)を付けるという事
ただこの作業は、面倒です。そこで、AutoPrefixerというツールを使用すると自動で付与させることができます。
AutoPrefixer導入については、小難しいのでググってください。ワタシが書くより遥かに良い記事がたくさんあります。

ワタシで紹介するのは、ブラウザで変換できるこのサイト(https://autoprefixer.github.io/)です。
こちらにアクセスし、CSSをペーストするだけで、ベンダープレフィックス付きのCSSが生成されます。以下がコピペで生成されたIE11対応のコードです。

#container{
display:-ms-grid;
display:grid;
grid-template-colums:200px 1fr 200px;
-ms-grid-rows:100px 1fr 100px;
    grid-template-rows:100px 1fr 100px;
    grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt";
height:100vh; /* 画面一杯にする */
}
.headCnt{
	-ms-grid-row:1;
	-ms-grid-column:1;
	-ms-grid-column-span:3;
	grid-area:headCnt;
}
.leftCnt{
	-ms-grid-row:2;
	-ms-grid-column:1;
	grid-area:leftCnt;
}
.midCnt{
	-ms-grid-row:2;
	-ms-grid-column:2;
	grid-area:midCnt;
}
.rightCnt{
	-ms-grid-row:2;
	-ms-grid-column:3;
	grid-area:rightCnt;
}
.footCnt{
	-ms-grid-row:3;
	-ms-grid-column:1;
	-ms-grid-column-span:3;
	grid-area:footCnt;
}
@media screen and (max-width:767px){
#container{
grid-template-colums:1fr;
-ms-grid-rows:60px 60px auto 60px 60px;
    grid-template-rows:60px 60px auto 60px 60px;
    grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt";
}
/* IE11対応の為 */
.headCnt{
	-ms-grid-row:1;
	-ms-grid-column:1;
	grid-area:headCnt;
}
.leftCnt{
	-ms-grid-row:2;
	-ms-grid-column:1;
	grid-area:leftCnt;
}
.midCnt{
	-ms-grid-row:3;
	-ms-grid-column:1;
	grid-area:midCnt;
}
.rightCnt{
	-ms-grid-row:4;
	-ms-grid-column:1;
	grid-area:rightCnt;
}
.footCnt{
	-ms-grid-row:5;
	-ms-grid-column:1;
	grid-area:footCnt;
}
}

IEのベンダープレフィックスは、プロパティ名が違うこともあり、これを手動で付けることは容易ではないのでこういうツールやサービスを活用して楽をしましょう。
これで、モダンブラウザ+IE11+edgeで表示することが可能となりますね。

最後に

サポートブラウザは現在モダンブラウザ+IE11+edge。IE10以下は真っ白になります。ここをサポートするサービスではまだまだ実用化は難しいです。でも将来このグリッドシステムが基本となる気もしますね。いまのうちに触って勉強しておくことが良いと思います。
ちなみにワタシはこれで、企業用の管理画面とか作りましたね。この場合、使用ブラウザは指定でき、アクセスも社内のみになるのでメンテも容易だったからです。不特定多数のサイトでは厳しいかな。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  2. マーケティングオートメーションの「Mautic」導入について
  3. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  4. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  5. 川沿いの景色 – α6400 – sig…
  6. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  7. ヤフオクの商品説明を綺麗に!売上アップのポイント
  8. Photoshop CC 導入。バナー作成時に楽する複数アートボ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

投稿コメントSNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラする…

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版いたしました。初めての方でもレタッチが楽しめるよう解説した一冊です。電子書籍では試し読みもできます。プロフィールのリンク先を掲載してますので良かったらご覧ください。 – フォトレタッチ

投稿コメント雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版…

夕焼けシルエット。 – フォトレタッチ

投稿コメント夕焼けシルエット。rezakk399 Instagram…

人気記事

  1. GoProMaxからのキャプチャをPhotoshopでレタッチ。 – from Instagram
  2. 城ドラ キャラ能力バランス調整 2016.6.27
  3. Sunset. – from Instagram
  4. LINEでクロネコヤマトの再配達依頼や荷物追跡ができるの!?
  5. エヴァ貞本氏がキャラデザの大型新作「Black rose suspects」シナリオにハマる!

インスタグラム

This error message is only visible to WordPress admins
Error: There is no connected account for the user 8694609815.

カテゴリー記事一覧

PAGE TOP