2018年1月にエビスコムより発売された「HTML5&CSS3ステップアップブック」をさっそく読んでみました。
この本ではCSSグリッドレイアウト（CSS Grid）、フレキシブルボックス（Flexbox）でwebページを制作していくやり方を学ぶことができます。
前作の姉妹書「HTML5&CSS3デザインブック」ではフロート（float）を使ってレイアウトしていましたが、「HTML5&CSS3ステップアップブック」は全てのサンプルをグリッドレイアウトを使ってレイアウトしています。
サンプルのなかには「HTML5&CSS3 デザインブック」内でfloatで作ったページをCSSグリッドで作り変えているものもあり、CSSグリッドでのレイアウトがいかに手軽で、これによりデザインのアイデアや幅もさらに広がるのではないでしょうか。
グリッドレイアウトに衝撃を受ける
私は大が付くほどのエビスコムファンで、近年発売されたエビスコム著の本はすべて購入して読んできましたが、久々におもしろい本だと感じました。
グリッドレイアウトは「HTML5&CSS3デザイン 現場の新標準ガイド」、フレキシブルボックスについては「6ステップでマスターする 「最新標準」HTML+CSSデザイン」である程度は理解していたつもりでしたが、この本を読んでグリッドレイアウトにはこのような使い方もあるのかと衝撃を受けるくらいの驚きもありましたし、フレキシブルボックスについてもより理解が深まりました。
それくらいこのグリッドレイアウトには可能性を感じます。これを使いこなせるようになれば、さらにサイトのデザインを練るのが楽しくなるでしょうし、webデザインについてももっと勉強したくなります。（Photoshop、Illustratorは未経験）
グリッドレイアウトに魅力を感じる分、こやつの存在が……
グリッドレイアウトにはそれだけの魅力がある分、残念だと感じてしまうのがIEの存在です。
多くのブラウザはグリッドレイアウトに対応していますが、IE11は未対応となっており、IEで確認してみるとグリッドレイアウトがまったく反映されていません。
グリッドレイアウトの古い規格には対応しているようですが、IEのために対応を考えたりしなければいけないというのは非常に面倒です。
もちろん「HTML5&CSS3ステップアップブック」でも未対応なブラウザへの対策方法が載っており、グリッドレイアウトと同じレイアウトを再現する方法、1段組みでレイアウトを整える方法を紹介しています。
グリッドレイアウトと同じデザインを再現しようとすると、古い規格だと制限もあってイライラしそうなので、IEだけ別に体裁を整えた形にやるのが良いかなぁと今のところ思っています。
グリッドレイアウトで未来が広がる
グリッドレイアウトにどっぷりと浸かってみて、レイアウトの新たな未来を感じることができましたし、もっといろんな使い方もあるはずでしょうから、まだまだHTML/CSSも奥が深いんだなぁと改めて実感しました。
「HTML5&CSS3ステップアップブック」はweb制作のステップアップにピッタリな、間違いなくオススメの本です！
とりあえずは私がつくったWordPressのテーマをグリッドレイアウトで書きなおしてみようかなぁと考えているところです。（IEにうまく対応することができればですが……）
