アルファチャンネルで画像置換

この記事は「after 疑似要素で CSS ロールオーバー」の続きです。

このサイトの定番ネタです。「え、いまさら?」という声が聞こえてきそうな気がする画像置換ですが、今回は3年ほど前に大流行した「テキストをCSSの背景画像で置き換えて、text-indentですっ飛ばすアレ」にCSS3の要素を加えてじゃっっかん今風?にしたものです。

ちなみにこの手法は、大流行から1年ほどで「テキストをtext-indentで飛ばすのはアクセシビリティ的によくないし、CSSの背景画像じゃなくて画像と代替テキストという自然な(本来の)マークアップをすべき」みたいな思想が広まって一時期廃れたかに思われましたが、近年の表示速度最適化ブームに乗って、CSS Spriteを実現する手段として復活を遂げている、という経緯があったような気がします。いや、詳しくは忘れちゃいましたが;P

あいかわらず今回もCSS Nite LP3の課題の画像を利用させていただいています。

サンプル

下の画像の上にポインタを持ってきてみてください。

使用した画像:viewmore-alpha.gif

CSSで利用した画像ファイルです。わかりやすいように2pxのボーダーと背景色を設定しています。

画像 : viewmore-alpha.gif

コード

HTMLコード

画像置換なので、HTMLには単純にテキストが入っています。

<a href="#" class="viewMore">過去の記事一覧を見る</a>

CSSコード

プロパティはわかりやすい順序で書いています。

a.viewMore {
  display: inline-block;  /*blockでもOK*/
  overflow: hidden;  /*テキストを拡大したときに崩れないように*/
  
  width: 142px;  /*viewmore-alpha.gifの横幅*/
  height: 20px;  /*viewmore-alpha.gifの縦幅*/
  line-height: 20px;  /*viewmore-alpha.gifの縦幅*/
  
  background: transparent url(viewmore-alpha.gif) no-repeat 0 0;
  
  color: rgba(255, 255, 255, 0);  /*文字色を透明に*/
}

a.viewMore:hover {background-position: 0 -20px;}

/*選択したときの文字色を標準に戻す。
注:バラバラに書かないとFirefoxがちゃんとパースしません*/
a.viewMore::-moz-selection {  /*for Firefox*/
	color: #000;
	background-color: #b5d5ff;
}
a.viewMore::selection {
	color: #000;
	background-color: #b5d5ff;
}

かんたんなしくみ

しくみは本当に簡単で、hover時にtext-indent: -9999px;などで飛ばしていた画像をcolor: rgba(255, 255, 255, 0);と置き換えて常に透明にしただけ[1]

これだけの違いでなにがいいかといえば、テキストが選択できてコピーできることです。これまでのtext-indentで飛ばしていた方法はもちろん、HTMLに直接img要素で画像を記載する場合でも画像にあるテキストをマウスで選択してコピーすることはできませんでしたが、この方法なら画像の文字で検索したかった時も比較的楽にできます。
僕としては、常にテキストを飛ばしている状態よりいいのではないかと考えている途中です。

また、当然rgba()が使えないブラウザ(IE7以前とか)では利用できません[2]。よって、この手法も前回同様IE6, 7がなくなり、ユーザに認知されるほど採り入れられる手法になったときに、力を発揮する手法であると言えますね。

selection疑似要素の利用

画像 : selection疑似要素利用例

さらに、::selection疑似要素を使って、テキスト選択時の文字・背景色を適切なものに設定するとより丁寧かもしれません。
しかしながら、そもそも「この画像は、テキストで選択・コピーが可能であること」をユーザに分かってもらっていないと意味がないことが一番の障害でしょうか。

  1. テキスト拡大時に崩れるのを避けるために、overflow: hidden;としています。 [back]
  2. ただし、IEの場合はfilterプロパティなどで代替可能です。 [back]

コメントを残す

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

CAPTCHA