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

投稿者の記事一覧

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

関連記事

  1. facebookのいいねボタンに5種類の感情ボタンが出現!
  2. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  3. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  4. マジックアワー α6400 – sigma 30mm f1.4
  5. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  6. Photoshopで対象物の色を変更する簡単な方法。
  7. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  8. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…

コメント

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

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

CAPTCHA


おすすめ記事

Blue Protocolについて

こんにちは!今回は、オンラインゲームの最新作「Blue Protocol」についてご紹介します。この…

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

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

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

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

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

人気記事

  1. 黒い砂漠モバイル 序盤で知っておきたい7つの便利な機能と知識
  2. ホウチ帝国 イベント攻略 「財宝発掘」について 7/20-7/26
  3. 小さな黄色の花。 – from Instagram
  4. OVERHIT(オーバーヒット) ギルド対抗戦 5日目 ランキング・変動順位更新
  5. ホウチ帝国 大型アップデート 装備セットについて

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます

エラー: フィードが見つかりません。

アカウントを接続するには、Instagram Feed の設定ページに移動してください。

カテゴリー記事一覧

PAGE TOP