ロールオーバーサンプル: CSS編 (個別画像/高さ= padding-top)

CSSでテキストを背景画像に置き換える事から、一般に画像置換と呼ばれてる手法。
昔から賛否両論・いろいろ論議されてますが、最近は「使いたければ使えばいいんじゃない？」という感じです。

メリット
- CSSだけ制御できるため、HTMLソースに手を加える事が少ない。管理も楽。
- JavascriptがOFFな環境(セキュリティが厳しい企業等)でもロールオーバーが実現できる。
- 携帯ブラウザ等、CSSが利用できないブラウザではシンプルなテキストのリンクとして表示される。
- いろんな手法が編み出されてます。
デメリット
- 最初の一回だけちらつく。(背景画像一枚で済ます事で解決)
  - マウスオーバー時に画像を読み込むにいくため=プリロード(先読み)されてない
  - 一度読み込んでキャッシュされれば、二度と起きない。
- ボタンは背景画像なので、ユーザーの設定次第では印刷されない。(デフォルト設定では印刷されない)
- 「画像：OFF、CSS：有効」な設定のブラウザ（一部のモバイルPCのユーザー等）では、
  ボタンがどこにあるかわからなくなる。(テキストを移動させて、背景画像が表示されないから)
  - 「そんなユーザーは多い／少ない」ではなく、「そんなユーザーがいる」事実が大事の考え方。
- text-indentの負の値よりもマシ。
- 「CSSでエフェクト（動き）を制御する必要があるのか？」という根本的な疑問。

参考サイト）