style属性にgrid-areaプロパティー

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プロパティーを上書きするだけと、細かいグリッドを定義しておいて、複雑に組み合わせるようなことをせずに済む。

そんなわけで、現在のページ・ヘッダーは、識別子を使ったグリッド・レイアウトになっている。試行錯誤した過程で、このウェブサイトでいろいろ試していた。左寄せではないが、おさまりがいいので、しばらく使うかもしれない。