HTML5が正式にW3Cによって勧告(2014年10月28日)されてから早3年が経ちブラウザの対応も進んだことにより、今やわざわざHTML5と言わなくてもHTMLと言えばHTML5と言えるほどに浸透しています。
一方で開発者である私たちが無意識的にHTML5を記述しているかというと、まだその段階には至っていないように感じています。まだ技術情報をインターネットで検索しても「これはHTML5からの新機能です」といったエクスキューズは目立ちます。
であればまだ、HTML5でこんなことができるようになった、という切り口から技術情報を発信してみるのも悪くないと思うのです。今さらHTML5？と思われるかもしれませんがお付き合いいただければ幸いです。
広義の意味でHTML5をとらえると様々な技術要素がありますが、今回はページデザインから逆引きでリーチできるCSS3の機能であるgrid layoutについて書いていきたいと思います。
１．こんな時に役立つGrid Layoout
さて、昨今のブログなどには以下のようなデザインがとても多いです。
図1. よくあるブログレイアウト
10年以上前であればtableタグを利用して書いていたかもしれません。しかし、tableタグをレイアウト配置に用いることがバッドプラクティスであるというのは今やWebエンジニアの常識です。（偉そうに書いていますが私は10年前はまだ学生です）
これは、tableタグは"表"の意味づけに使うべきであり、その用途以外で用いるべきではないという理由によるものです。また、tableタグに限らずHTMLの各タグは文書の意味づけに用いるべきだ、というのが原則です。HTML5ではこの原則にさらに従いやすくなるような要素が取り入れられており、それをセマンティック・マークアップと言います。
文書の意味づけはHTMLで行うのであればレイアウトはどう指定するかといった時に出てくるのが、HTMLを装飾する仕様としてW3Cから勧告されているCSSです。CSSにもバージョンがあり、2018年1月時点で勧告されているものはCSS2.1であり、冒頭に記述したように広義のHTML5の仕様とされているCSS3はまだ勧告されていません。
図1.のようなレイアウトを実現するCSS3の要素としてflexboxがありますが、さらに新しい機能としてgrid layoutが登場しています。grid layoutはHTMLの要素の内部を縦横のマスに分割し、そこにHTMLの要素をパズルのように配置することで任意のレイアウトを組み上げるものです。
２．Grid Layoutはこう使う
例えば図1.のレイアウトを分割する一例は以下のようになります。
図2. グリッドによる分割
画面は4行2列で①～⑧まで8つのマスに分割され、例えばタイトル部分であれば①と②のマスに配置されています。
図2.のレイアウトは以下のコードで実現が可能です。実はgrid layoutには様々な記法がありこれ以外にもたくさんの記述例がありますが、筆者が最も理解しやすいと考えるコードを書きます。(ここでは枠線やフォントなどについては省略しているので、各自記述してください)
<html>
<body>
<div class="blog-area">
<div class="title-area">タイトル</div>
<div class="main-contents">メインコンテンツ</div>
<div class="profile-area">プロフィール</div>
<div class="advertisement-area">広告</div>
<div class="contents-link">コンテンツリンク</div>
</div>
</body>
</html>まずHTMLですが、こちらはとても単純です。ページの各要素をdiv要素として並べて記述しています。
このHTML、ページの内容が5つに分けられているということがとてもわかりやすいと思いませんか？
div.blog-area {
display: grid; /* 要素内部がgrid layoutであることを示す */
grid-template-rows: 12.5vw 25vw 12.5vw 25vw; /* gridの行分割の高さをそれぞれ指定している。今回は4行。 */
grid-template-columns: 62.5vw 37.5vw; /* gridの列分割の幅をそれぞれ指定している。今回は2列。 */
}
div.title-area {
grid-column: span 2; /* 列方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}
div.main-contents,
div.advertisement-area {
grid-row: span 2; /* 行方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}CSSは3つ指定しています。まず1ブロック目のCSSによってgrid layoutを利用する要素の内部がマス目に分けられます。マスの形は必ずしも正方形でなくてもよく、行・列によって異なる大きさも指定できます。
※ここで出てくるvwという単位はviewport単位と言い、表示されているブラウザの横幅を100vwとしてサイズを計算します。今回は行の高さの指定にもvwを利用していますが、これによって画面幅に関わらずコンテンツの縦横比を維持することができます。詳しくはviewportについて調べてください。
2ブロック目・3ブロック目のCSSではそれぞれの要素が何マス分の大きさになるのかを指定しています。span n;という記述によってnマス分を示します。
grid layoutでは内部の要素はその左上のマスから順に詰められていきます。今回の例だと、まず先頭のタイトルを表す要素を左上の①のマスへ配置しようとします。この要素は2ブロック目のCSSによって列方向に2マス占有することが指定されているので、①と②のマスを占有し要素が表示されます。
次に③のマスへ2番目のメインコンテンツを表す要素を配置しようとします。この要素は3つ目のCSSによって行方向に2マス占有することが指定されているので、③と⑤のマスを占有し要素が表示されます。
先に⑤のマスが埋まってしまいましたが、④のマスが空いているため次の要素を④のマスへ配置しようとします。次の要素はプロフィールを表す要素ですが、この要素は占有する領域が指定されていないため、1マスに表示されます。
次に空いているマスは⑥のマスなので…といった具合にマスへ要素を埋めていけば図1.のレイアウトの完成です。
このgrid layoutですが、残念ながらまだ十分なブラウザ対応はできていない状況です。特にIE系ではIE11以降しか対応しておらず、それもベンダ固有のプロパティを利用する必要があります。
div.blog-area {
display: -ms-grid;
-ms-grid-rows: 12.5vw 25vw 12.5vw 25vw;
-ms-grid-columns: 62.5vw 37.5vw;
}
div.title-area {
-ms-grid-column-span: 2;
}
div.main-contents,
div.advertisement-area {
-ms-grid-row-span: 2;
}
div.main-contents,
div.profile-area {
-ms-grid-row: 2;
}
div.advertisement-area {
-ms-grid-row: 3;
}
div.contents-link {
-ms-grid-row: 4;
}
div.profile-area,
div.advertisement-area {
-ms-grid-column: 2;
}上から3つのCSSはプロパティ名や値が変わっているだけで、概念は変わっていません。問題は下の4つです。
IEのgrid layoutでは要素を詰めるという概念がなく、指定しなければ常に①のマスに重ねて配置しようとします。それを回避するのが下の4つのCSSで、それぞれ何行目・何列目のマスへ配置するかを指定しています。
IE系はEdge 16から完全対応されるそうです。待ち遠しいですね。
長くなってきたので今回はここまでにさせていただきます。最も簡単な例でgrid layoutの考え方を理解していただいたところで、次回の更新では他のgrid layoutの記述法について書いていきます。
