Tweet

Pocket

CSSを使用して「テキストを画像で置換」。
backgroundで指定する方法の基本的なやりかた。
※賛否両論ある方法なので注意です。

＜HTML＞

<h1>cssで画像置換</h1>

＜CSS＞

<style type="text/css">
h1 {
    background-image:url(title.gif);
    width: 400px;
    height: 50px;
    text-indent: -9999px;　/* 左へどーんって飛ばす */
}
</style>

この指定は、SEO的な視点から見ると有効…？
でもユーザーが画像を表示しないようにブラウザを設定している場合、ブラウザ上にはなにも表示されない状態になる。
そのためユーザーのアクセシビリティ上いかがなものか、という意見もアリ。
（ベストなのは背景に画像を指定して上がテキストという状態だから）