前回のブログでは grid layout の分割の考え方と、簡単な書き方について説明しました。
これだけ覚えておけば基本的にはgrid layoutを利用して柔軟なページデザインを作成することができるのですが、配置ルールに関する他のプロパティや、プロパティに指定する値の単位などを理解すると、より複雑な要求に対応できたり、より少ない記述量で実装できたりします。
今回は特に使えると私が思うものについて、実際のデザイン要求から逆引きする形でいくつか説明していきたいと思います。
なお、前回のサンプルコードをそのまま引き継ぎ一部変更する形でご紹介していくので、前回のブログもご参照ください。
HTML5が正式にW3Cによって勧告(2014年10月28日)されてから早3年が経ちブラウザの対応も進んだことにより、今やわざわざHTML5と言わなくてもHTMLと言えばHTML5と言えるほどに浸透しています。
一方で開発者である私たちが無意識的にHTML5を記述しているかというと、まだその段階には至っていないように感じています。まだ技術情報をインターネットで検索しても「これはHTML5からの新機能です」といったエクスキューズは目立ちます。
であればまだ、HTML5でこんなことができるようになった、という切り口から技術情報を発信してみるのも悪くないと思うのです。今さらHTML5？と思われるかもしれませんがお付き合いいただければ幸いです。
広義の意味でHTML5をとらえると様々な技術要素がありますが、今回はページデザインから逆引きでリーチできるCSS3の機能であるgrid layoutについて書いていきたいと思います。
