最近、徐々に注目を浴びているCSSのグリッドレイアウトモジュール「display:grid;」について調べてみました。結論から述べると、とても素晴らしい技術で、Bootstrapとかいらなくなるかもしれないなと感じました。CSSグリッド対応ブラウザまずいちばん気になるのが対応ブラウザ。対応していないブラウザがあると、それだけでそもそも導入できなくなる。現在)、対応状況は以下のようになります。Android等IE11が完全対応していないのが気になります。(マジかよIE)でも、対応していないブラウザは時間の問題で解決されるので一旦放置します。現状は完全導入はちょっと注意が必要になりますね。そもそもCSSグリッドレイアウトモジュールってどんなの?簡単に伝えると2次元にグリッドレイアウトを簡単に作ることができる、グリッドレイアウトの新しい仕様になります。tableとか、flexboxとかと何が違うん?って思うかもしれますが、全然違います!tableは、書いたソース順に1次元で表示していきますよね。20左上からソース記載順に表示。(最近は、テーブルを殆ど書かなくなりましたが)flexboxは、行ごとに均等にしたり、コンテンツを整列させるのによく使います。gridは、ソースの書き順に関係なく、グリッドで表示したいところに配置できます。図で書くと、面倒くさいので省きます。実際のソースで説明しますね。CSS「display:grid;」使用方法Gridレイアウトは自由度が高く、書き方は人それぞれで作れるので、今回はBootstrap風の使い方で説明しますね。12分割まず、以下のようにHTMLを定義します。<div>26</div><div>27</div><div>28</div><div>29</div><div>30</div></div>そして、CSSを以下のように書きます。以下、わかりやすいようにdivに破線とパッディングを設定しています。CodePen.こんな書き方だけで、Bootstrapの12分割をすることができます。12分割、1カラム3列に変更(Bootstrapの場合、col-3)上記のCSSに以下を追加します。分かりやすくするため、今回は、divにまとめて掛けています。CodePen.これだけで、col-3みたいな効果になります。Bootstrap風にcol定義CSSに以下を追加します。span;}HTMLを以下のように書き換えます。class="col-12">9</div></div>これだけで、使い慣れたBootstrap風な感じになります。CodePen.メディアクエリでスマホサイズのときは、1カラムを定義してしまえば、レスポンシブも簡単です。Bootstrapの12分割ではできない「display:grid;」の魅力ここが一番の魅力で、Bootstrapでは出来ない書き方をご紹介します。HTMLを以下のように定義します。class="c9">9</div></div>CSSを以下のように定義します。上記のような定義で以下のようになります。CodePen.2次元で定義可能なため、9に関しては、6よりも前に配置されています。これ以外にも縦幅のサイズをpx固定などもできるので、自由度は大分高くなります。colの入れ子にして作ったりとソース長くなるのがとてもシンプルになったりで、物凄く良い技術だと思いました。IE11が一部対応されていなかったり、それ以前のバージョンは完全に未対応だったりするので、どこまでのブラウザバージョンまで対応させるかで導入するかは検討したほうが良さそうです。新しいブラウザだけでいいよ!という制作だった場合は、積極的に導入しても良いかもしれませんね。今回、ヘッダー下に作ったサブヘッダーのみをスクロールで固定する方法を簡単にご紹介します。先に以下、サンプルになります。最新技術、PWAとは?通常のHTMLとネイティブアプリの違いについてスマホサイトは当たり前、そんなの世の中で、どうスマホ対応すれば他の企業と差別化できるか。考えたとき、今ホットな施策「PWA対応」はいいかもしれない。