グローバル・ヘッダーのマークアップ

ロゴとサイト・ナビゲーションをnav要素の子に

ホーム以外ではロゴとサイト・ナビゲーションをまとめてnav要素で括るような形にグローバル・ヘッダーのマークアップを変えた。ホームでは今まで通りnav要素の外でmark要素を使ってロゴは表示される。あわせてタグラインをh1要素にしてしまったが、何か違う気がする。

他にはロゴを真四角から縦長で下が斜めにカットされているような形に変更した。SVGを直すのがなんとなく面倒だったのでborderプロパティーを利用したCSSで雑にやったけど、明らかにSVGを直す方が簡単だったのでちゃんとSVG画像を作り直した。縦横比は1:1.618になっていて、ロゴの幅に1.618の4乗をかけるとサブカラムの幅に、それにガッターを加えてまた1.618の2乗をかけるとコンテンツ(メインカラム)の幅になったりする。


このマークアップの変更は、ロゴはh1要素か否かみたいなちょくちょく論争になる問題というよりも、ロゴもナビゲーションの一部とみなすべきかなという考えに基づいたもの。そうするとロゴもnav要素の子になるべきかな、と。この場合、ロゴでh1要素を使ってしまうとそのnav要素の見出しになってしまう。それはさすがにおかしいので、自然とロゴはh1要素ではなくなった。

このままだとbody要素がUntitled BODYになってしまうのが難点で、タグラインを半ば強引にh1要素にしたりしてみた。title要素がちゃんとあるならUntitled BODYでもいいかみたいな雑な感覚でお茶を濁しても良さそうだけど……。もうちょっとちゃんと考えよう。