grid-template-areaプロパティーで、識別子を使って特化型のグリッドを作ることが増えた。こういう場合、各グリッド項目に対して、grid-areaプロパティーで名前を付けていくことになる。この名前付けを、CSSファイルではなく、HTMLファイルに書いてしまった方がいいのではないだろうか。
例えば以下のようなリストがあり、そのレイアウトにグリッドを使うとする。グローバル・ヘッダーのナビゲーションを想定している。例なのでa要素は省略した。
<ul class="nav">
<li class="news">News</li>
<li class="feature">Feature</li>
<li class="column">Column</li>
<li class="store">Store</li>
<li class="search">Search</li>
</ul>このHTMLに対して、CSSファイルで、レイアウトを書き、各項目に識別子を付ける。例えば、3列2行にして、2行目の真ん中を空項目で埋めることにしたい。恣意的だが、空項目の部分にロゴが食い込むようなグローバル・ヘッダーを想像しておいてほしい。
.nav {
grid-template-areas:
"a b c"
"d . e";
}
.news {
grid-area: a;
}
.feature {
grid-area: b;
}
.column {
grid-area: c;
}
.store {
grid-area: d;
}
.search {
grid-area: e;
}この名前付けが冗長で、かつ定義より利用が前に来てしまうので、落ち着かない。逆順に書くと、親要素へのルールセットよりも、子要素のルールセットが前に来てしまい、同じく落ち着かない。HTML側でこう書いておきたい。
<ul class="nav">
<li style="grid-area: news">News</li>
<li style="grid-area: feature">Feature</li>
<li style="grid-area: column">Column</li>
<li style="grid-area: store">Store</li>
<li style="grid-area: search">Search</li>
</ul>クラスの代わりにこうしておくと、CSS側では、.navへのスタイルのみでよくなる。CSSでクラス名が使いたい場合は、HTML側にクラス名も重ねて書いてもいい。CSS側で属性セレクターを使って[style*="column"]と書いてもいいだろう。
.nav {
grid-template-areas:
"news feature column"
"store ....... search";
}あたかもgrid-template-areasプロパティーでクラス名を直接使えるように書ける。また、定義済みを参照しているだけなので、とても落ち着く。HTML側は、テンプレート・システムによって生成されるので、コストが下がり、ミスタイプも減る。このように、特化型で、構造や内容物に強く依存する場合なら、style属性に書いてしまってもいい気がしている。
こういったgrid-template-areasプロパティーで識別子だけを使う、固定的なグリッド・レイアウトは、グローバル・ヘッダーやグローバル・フッターで出番がある。項目の数やラベルが安定しているので、決め打ちで割り当てても問題は起きにくい。描画領域幅に合わせてレイアウトを変える場合も、grid-template-areasプロパティーを上書きするだけと、細かいグリッドを定義しておいて、複雑に組み合わせるようなことをせずに済む。
そんなわけで、現在のページ・ヘッダーは、識別子を使ったグリッド・レイアウトになっている。試行錯誤した過程で、このウェブサイトでいろいろ試していた。左寄せではないが、おさまりがいいので、しばらく使うかもしれない。