とりあえず、まとまってないけど忘れないためにメモ。すごく大雑把に書いていて正確性に欠ける点はご容赦ください。
Transitionalで書けば問題ないんだけどそろそろHTML5という訳でそうもいかないし。
通常は、reset.cssでimgにvertical-align:bottomとしておけばいいんだけど、liでfloatやdisplay:inlineした直下の画像との間にスペースが空いてしまうという問題に直面。
google先生に聞いてみるとこのサイト「リストをfloatで横並びにする際、画像の下に余白が空く」を教えてくれた。ビンゴ！ だと思ったけれどulやliにline-height:0を当てると文字がかけてしまいこれまた断念。
あれやこれやこねくり回してるうちに、bodyに当てたline-heightが関係しているのを発見。これをline-height:1にすると隙間はなくなった！
でも、やはりめんどくさいので全体にline-heightを設定したい。で、該当箇所のul,liをline-height:1にしてみた。これで解決かと思いきやなぜか繁栄されない。やはりreset.cssで全体をline-height:1にして必要箇所のみline-heightを設定するのが本来の方法なのだろうか。
この件はここまでで挫折。
リンク箇所のマウスオーバーの表示方法。
よく使われる方法に、リストでリンクを順番に書く。liをdisplay: inlineにして背景に画像を入れる。aをdisplay:blockにする。ってやるとテキストでリンクを書けるけど画像っぽいボタンができあがる。っていうのがあるけどこの時に楽にhoverの表現をする方法。
.ほげ a:hover {background: rgba(255,255,255,0.5);
これはRGB値がアルファー20%の白という意味。
最初Opacityでやってみたのだけれど背景だじゃなくて上のテキストも薄くなってしまったので実用にならなかった。
まぁ、とにかくこれだけで別画像用意したりjavascript用意したりすることなくhoverの表現ができて便利。
ついてに、cssでドロップシャドウ。
box-shadow: 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色
と
text-shadow: 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色
例：text-shadow: 1px 1px 5px #aaa;
これだけでドロップシャドウが付いてくれるので上記の方法でより画像っぽいリンクボタンが作成できる。
