これで決まり?な画像置換 - DKIR

カテゴリ:CSSテクニック 2009年12月 7日 12:13

こんな記事を書いておいてなんですが・・アクセシビリティ的にはあまり画像置換自体が推奨されていないようです。
ただ、個人的な意見を言うと、あくまで理想は、だと思っています。
管理側の問題などもあるでしょうし、どのサイトも 100% WCAG 2.0 に適合しないといけない、というわけでもないと思います。複合的に考えて、最適な策を取ることが望ましいのではないかと。

ただ、使用する上ではそういった問題があるということは知った上で使うべきだと思います。アクセシビリティに関してはこちらの 画像置換とアクセシビリティ を参考にしてみてください。n

ちなみにマウスオーバーによる効果だけを実装したい場合は、手軽に画像のロールオーバー効果を実装するJavaScript を参考に、JavaScript を使っての実装もありです。(というか個人的には大体 JS でやっちゃってます)

DKIRのイメージ

前回の記事で告知したように、DKIR という画像置換手法について解説したいと思います。
この手法のメリットは、"画像OFF、CSS ONでも問題なく内容が表示される" というところでしょう。

今までの画像置換の問題点をおおむね解決している手法となります。
(SEO 的にどうなの? というのは議論しても解決する問題でもないので触れません)
また、IE6 を含めたほとんどのブラウザでも対応可能です。 この記事の後に ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 という記事を書きました。こちらは画像置換ではなく、ただの画像ボタンのロールオーバーの紹介なので、画像置換は・・という人は参考にしてみてください。

▼EntryMore▼

さて、順を追って説明していきたいと思います。
まずざっくりとした概念図を見てください。

DKIR概念図

簡単に言ってしまえば、今までの手法である a 要素に背景画像を配置して、テキスト部分を text-indent: -9999px なんかで外部に飛ばしてしまう、というものの、「テキストを飛ばす」というところを "a 要素の下に潜り込ませる" ということで実現しているテクニックです。

HTML と CSS は以下になります。

CSS ソース

HTML ソース

サンプルでは p 要素でマークアップしていますが、li 要素などに置き換えて考えてもらって大丈夫です。

今回のテクニックを実現する注意点は 4 つ。

  1. 親要素(サンプルでは p 要素)に対して position: relativez-indexに適当な整数値を指定する。
  2. 中間に位置する要素(サンプルでは a 要素)にはposition: relativeを指定しない。
  3. position: relativeを span 要素指定する。
  4. 背面に置きたい要素(今回のサンプルでは span 要素)のz-index-1にする。

たったこれだけです。
注意点 1 つ目の z-index に関しては、続く span 要素のマイナス値によって z-index の累積値がマイナスにならないようにするための処置です。なので整数値であればなんでも構いません。

ちなみに今回のサンプルの .dkirBox に当たる部分の指定はなくてもいちおう標準的なブラウザでは正常に動作します。(IE6 含む)
ただ、仕様では z-index の累積値がマイナスになった場合の UA(ユーザーエージェント)の挙動については明記されていないため、念のためマイナスにならないようにしている、という理由です。

さらに、今回のサンプルでは a 要素に対して position: relative を指定していませんが、指定しても本来は問題ありません。が、IE6 や IE7 では position: relative を指定すると span 要素が a 要素の下に潜り込まなくなるのでこのように記述しています。(加えて、.dkirBox の zoom: 1 もなぜかサンプルではテキストが変なところに表示されてしまっていたので、これを加えて解消しています。

上記のように z-index にはマイナス値も設定できます。
マイナスを指定した場合はサンプルの通りです。
z-index にマイナス値を指定した場合、その要素が属しているスタックコンテキスト(position: relative や position: absolute を指定した直近の要素)からの相対座標のため背面に回る、というわけです。

このように "背景画像の背面に隠す" という手法のため、仮に画像がOFFだったり、また画像の読み込みに失敗した場合でも問題なくテキストが表示される、というわけです。

このテクニックのデメリットとしては、背面に移動するという処理のため背景画像に透過 PNG が使えないことでしょう。
そういったケースの場合はやはり今までの手法を取るしかありません。

CSS3 の登場などで今後は今ほど画像に頼った処理をしなくても済むようになると思いますが、それまでは画像を使ったテクニックでカバーするしかなさそうです。

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/164

トラックバック

グローバルナビの画像置換

CSS-EBLOG これで決まり?な画像置換 – DKIR http://css-eblog.com/csstechnique/dkir.ht...

by100yenBENTO 2011年7月20日 15:26