HTML と CSS の少しマニアックなお話を……。
ナビゲーションバーを実装するには一般的に次の 2 通りがあります。
- ul 要素の中の li 要素を display:inline 指定で並べる。
- ul 要素の中の li 要素を display:block 指定して、float:left で並べる。
いずれにしても、実際のリンクである li 要素の中の a 要素を a:hover でいろいろ指定しても変化するのはテキストのみです。四角い領域ごと変化させるには a 要素を display:block 指定すればよいのです。実をいうとこのスマートなやり方に今日初めて気が付きました（以前使って忘れていただけかもしれませんが）。以後、忘れないようにここに書いておくことにしました。
