1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. テキストの代わりに画像を表示させるOFF-LEFT(オフレフト)

コーディングコラム

テキストの代わりに画像を表示させるOFF-LEFT(オフレフト)

テキストを非表示にさせ、代わりにCSSでテキスト画像を背景に指定するOFF-LEFT(オフレフト)という手法があります。具体的には「text-indent」の値を-9999pxのように、テキストが画面からはみ出るように設定し、代わりに背景としてテキスト画像を表示させるといった手法です。ソースは以下のようになります。

HTML

<h1>
 見出しテキスト
</h1>

CSS

h1 {
 text-indent:-9999px;
 background:url(見出し画像);
}

この手法を使えば、ブラウザでは「見出しテキスト」の代わりに「見出し画像」が表示され、CSS未使用の場合は「見出しテキスト」が表示されることになります。見栄えもよく、音声読み上げソフトにも読み込まれるためアクセシビリティの面でも有効になります。SEO対策としても文書構成もわかりやすくなるため有効になるのはずですが、現状では一筋縄にはいかないようです。

OFF-LEFT手法は一昔前までは各検索エンジンにも有効に読み込まれていました。しかし、Yahooの検索エンジンではスパム行為としてみなされ検索結果から除外される傾向にあります。これは「text-indent」の不自然な値が問題になっているようです。確かにスパムとして使われている手法なのですが、表現方法としては優れているため制作側としては通常通り使えないのが非常に残念です。