CSSで画像置換と言われるテクニックを使うことよくあることだと思います。念のために説明しておきますと、htmlではテキストなんですが、CSS側でテキストを表示させなくして背景として指定した画像を表示させる方法になります。例えばソースだとこの様なものになります。
HTML
[html]
<div id="page-title">
<h2>協会のご案内</h2>
</div>
[/html]
CSS
[css]
#page-title{
width: 798px;
height: 72px;
text-indent: -9999px;
background-color: #FFF;
background: #FFF url(about_title.jpg) 0 0 no-repeat;
}
[/css]
多分このようなものかと思います。
これをすることのメリットとしてはhtmlではテキストで表示されているので、音声読み上げブラウザではテキストとして認識されますのでスムーズに読み上げられることになります。従って聞く側にはわかりやすくなります。またSEOの観点では全てがテキストになりますのでロボットの評価が高くなります。また何らかの理由でCSSが効かない場合でも全てがテキストで表示されますのでわかりやすくなります。とこの様なことが言われています。
一見聞いたところいいことづくしって感じがしますが、こいつがなかなか曲者でした。背景画像にしたということはブラウザのデフォルトの設定でプリントアウトしようとするとこのテクニックを使用した箇所は全く写らなくなってしまいます。それはブラウザのデフォルトの設定が背景をプリントアウトする設定になっていないからです。知っている方からすれば、「そんなのチェックボックスにチェックするだけじゃん。」って仰る方もいるかと思いますが、知らない方からすれば、「そんなことしないとだめなの。普通に写してよ。」って方もいます。そうするとこのテクニックを使用してプリントアウトも実現するとなるともうひと手間必要になります。それが下記のソースです。ちなみに下記は正しい文章構造ではないと思われます。理由は後述します。
htmlの記述
<div id=”page-title”>
<h2>協会のご案内</h2>
</div>
<div id=”page-title-copy”>
<img src=”about_title.jpg” alt=”協会のご案内” width=”798″ height=”72″ />
</div>
CSSの記述
#page-title{
width: 798px;
height: 72px;
text-indent: -9999px;
background-color: #FFF;
background: #FFF url(about_title.jpg) 0 0 no-repeat;
}
#page-title-copy{
display: none;
}
プリント用CSSの記述
#page-title{
display: none;
}
#page-title-copy{
display: block;
}
このソースだと
<div id=”page-title-copy”>
<img src=”about_title.jpg” alt=”協会のご案内” width=”798″ height=”72″ />
</div>
の部分がブラウザ上だと見えない設定になっています。そしてプリント用のCSSによってこの部分は表示され、ブラウザで見えていた部分(<div id=”page-title”>)が見えなくなる設定になっています。要するに<div id=”page-title-copy”>の部分はプリントアウト用の記述となります。本来の意味からすると必要のないものですので、文章構造上正しくないということです。また{display: none;}を使用すると一部の音声ブラウザでは不具合が生じるようなので、このテクニックはあまり使われない傾向があるようです。