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. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  2. 合成する時のトーン調整レタッチ
  3. マーケティングオートメーションの「Mautic」導入について
  4. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  5. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  6. facebookのいいねボタンに5種類の感情ボタンが出現!
  7. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  8. Pythonで作成したボットの実行結果をLINEに通知させる備忘…

コメント

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

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

おすすめ記事

ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ

投稿コメントずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる…

多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思ったけど結構時間を使った。ただ、面白い。 – フォトレタッチ

投稿コメント多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思った…

秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待。 – フォトレタッチ

投稿コメント秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待…

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

四国 日の出。 – フォトレタッチ

投稿コメント四国 日の出。rezakk399 Instagram…

人気記事

  1. OVERHIT(オーバーヒット) 7/12開始、水属性「VS リエージスタイン」のまとめ。
  2. iPhone7 iPhone7 Plusにイヤホンジャック接続の自分撮りセルカ棒は使えるのか!?
  3. ランタナ – from Instagram
  4. 黒騎士と白の魔王 新獄級ロキの攻略ポイント
  5. Building. – from Instagram

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP