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. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  2. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  3. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  4. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  5. マーケティングオートメーションの「Mautic」導入について
  6. テーブルの見出しを固定できるjsがとても便利。
  7. table装飾時に持っておきたいベーステンプレートとなるCSS
  8. Googleマイマップでハマった「ズームアウトするとすべてのピン…

コメント

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

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

CAPTCHA


おすすめ記事

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. 城ドラ ジャイアントベビー コスト3でチビドラ・エルフ・雪ん子に強し!
  2. 黒騎士と白の魔王 新獄級ロキの攻略ポイント
  3. 外出自粛中にFF7Rをクリアー。その世界観をphotoshopで。 – from Instagram
  4. [事前予約]ファンタジーウォータクティクス 最大でクリスタル500個がもらえるチャンス!
  5. 放置少女 序盤攻略!最初に知っておくべき5つのポイント。シリアルコードやリセマラについても

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます
エラー: ユーザー 8694609815 のアカウントに接続できません。

カテゴリー記事一覧

PAGE TOP