テキストを画像で置換

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

Pocket

This entry was posted in CSS, web.

2 thoughts on “テキストを画像で置換

  1. ぼくはtext-indent使わずpaddingでします
    でもその辺って、どうでもいいんじゃない?
    と思っている人間です だめですね〜

    • > fimpen_さん
      コメントありがとうございます~!
      たまたまこのネタがTwitterで出てきたので、授業の復習を兼ねてまとめてみました!(いまさら)
      ようは正しく表示できたらいいんじゃないのかな…とわからんなりに私もそう思うのですけどね。(汗)
      いろんなやり方があって難しいです~。><

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>