h1タグの中でサイトのロゴ画像を表示する

　text-indent=-9999px;というのがどうも時代錯誤の技術に思えて（実際そうなのだけど）、いまサイトのタイトルロゴってどうやって表示してるんだろうと思って調べた。

<h1>
  <a href="#">
    <span>サイトタイトル</span>
  </a>
</h1>

h1 a {
  display:block;
  width:280px;
  height:100px;
  background-image:url("../img/logo_dummy.gif");
  background-repeat:no-repeat;
}
h1 span {
  display:none;
}

　前はaタグのなかにサイトタイトル書いて、CSSでtext-indent=-9999px;とかして文字を画面外に飛ばしてたんだけど、今の時代それやるとあんまよろしくないっぽい。このやり方は、spanで文字を囲んでおいて、display:none;で囲んだ箇所を消すというもの。で、h1 aに画像が表示されるようにしてある。

　他にも前ならh1タグ＝テキスト飛ばし＋画像表示されるようにCSS書いてたと思うけど、今ではh1をサイト内で複数回使えるようにしておいた方がよいっぽいので、h1そのものはCSSでいじらないのが無難みたい。

【参考】
文字列(h1など)を画像で置き換える(span要素使用) - bnote
blog*citron | タイトルロゴを画像にする