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;

アイテムを配置

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

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

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

画面プレビュー

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


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

Html

CSS

ブラウザのサポート状況

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

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

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

最後に

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

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. Photoshopで対象物の色を変更する簡単な方法。
  2. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  3. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  4. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  5. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  6. マーケティングオートメーションの「Mautic」導入について
  7. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  8. テーブルの見出しを固定できるjsがとても便利。

コメント

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

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

おすすめ記事

マツエクのアイリストさんからの依頼で、目肌のレタッチ。眉毛も綺麗に整えてます。 – from Instagram

投稿コメントマツエクのアイリストさんからの依頼で、目肌のレタッチ。眉毛も綺麗に整えてます。…

散歩途中に見つけた異世界。そんなにレタッチしてないで、雰囲気出てる。自然って面白い。 – from Instagram

投稿コメント散歩途中に見つけた異世界。そんなにレタッチしてないで、雰囲気出てる。自然って面白い。…

美肌にするレタッチ。肌の質感を残しつつ自然に仕上げる。これマスターするとレタッチの幅が広がる。 – from Instagram

投稿コメント美肌にするレタッチ。肌の質感を残しつつ自然に仕上げる。これマスターするとレタッチの幅…

フィギュアのアイアンマンを配置してポスター風にレタッチ挑戦。 – from Instagram

投稿コメントフィギュアのアイアンマンを配置してポスター風にレタッチ挑戦。#ironman #gr…

テーブルの見出しを固定できるjsがとても便利。

テーブルによる表の表示はよく利用します。ただ近年はスマホの対応があるのでこの表示領域はかなり絞られま…

人気記事

  1. OVERHIT(オーバーヒット) 9/1から始まる新イベ!震天の神域「火の龍 イグニス」新装備「グリモア」が手に入る!?
  2. ホウチ帝国 最終ステージ55「邪古洞窟」闘士で攻略!
  3. ホウチ帝国 効率的な通常クエスト攻略について
  4. DQMJ3 初めての突然変異モンスターの見つけ方
  5. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載する方法。

インスタグラム

カテゴリー記事一覧

PAGE TOP