外部リンクへのテキストの前とか後ろに、ちっちゃなアイコンがついているアレ． やりたかったんです．
何のことか分からない方． えーと、こんなやつです．
超期待のスマートフォン iPhone
これまで、「→□」みたいなテキストを <a> タグでくくって、それっぽくしてたんですが、ちゃんとやろうということで作業してみました．
CSS で書けるのは知っていたんですが、どうやるのかが自分ではまったく思いつきません．
「リンク アイコン CSS」でググって、トップのページを見ると、いきなり分かりやすい解説が． 実質、ここだけで済んじゃいました．
CSS、やっぱり奥が深いですなぁ．
vertical-align: middle; をちゃんと指定しているのですが、Safari だとアイコンがずれて表示されます． Firefox だとちゃんと見える．
margin とかでいろいろやってみたけど、どうしても治らなかったので、アイコン画像の上下の余白を非対称にして解決しました． よく見ると、それでもずれてるんですけどね．
こういうブラウザの問題って、ほんとどうにかならんのでしょうか．
あと、密かに、ニコ動バナーを作ってたりします．