リストアイテムを画像で表示したいときのテクニック

これで指定すると大抵画像が上に寄ってしまい、上手い具合に１行目の真ん中に来てくれない。しかしline-heightで行間を広げてやると、うまく１行目の真ん中に来てくれる。２行目の文字がリストアイテムの左側面と揃えたい場合はlist-style-position:inside;、リストアイテム分空けたいときはlist-style-position:outside;で対応できる。リスト要素でないものにこれを適用させたいときは、display:list-item;で対応。３段階ぐらいなら文字の拡大縮小にも耐えられる。FFなどでものすごく拡大したりするとさすがにずれるが、普通に使用していていればまずそこまで拡大することはないと思われるので、３段階ぐらいの拡大縮小に耐えられれば十分なのではないでしょうか。

CSS界ではこちらの方がメジャーな方法かもしれないやり方。background-imageで使用したいリストアイテムを指定。background-repeat:no-repeat;でリピートしないようにする。background-positionでリストアイテムの位置を調節してやる。この場合注意したいのが、positionの指定を絶対指定ではなく相対指定ですること。文字の拡大縮小を絶対にさせないサイトなら絶対指定で問題ないが、ブラウザ間の表示の違いやユーザビリティを考えると相対指定が適切だ。指定単位は、これまで試して来た中で選別した結果、em、exが良かった。文字の拡大縮小に３段階までは確実に耐えられる。あとは、padding-leftでリストアイテムと文字がかぶらないようにしてやればOK。