いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史

2016年07月19日　05時00分更新

文●Baljeet Rathi

ツイートする

古き良き手法から、最新の手法まで。必要なときのために引き出しにしまっておきたい、画像置換の手法まとめ。

CSSの画像置換（Image Replacement）は長い歴史の中で移り変わってきました。もし、いまでもCSSで画像置換をするのなら、現在でも使える多くの有効な手法があります。一方で近い将来、CSSの画像置換を使うとグーグルが実際にペナルティーを課すようになるかもしれない、ということは知っておくべきことでしょう。いまのところは大丈夫だとしても、あまりおすすめはできません。

とは言っても、CMSまたはプロジェクトとの関係で画像置換を使わざるを得ない場合もあります。そこで、この記事ではまだ有効な、長い歴史のあるCSSの画像置換の方法を紹介します。画像置換が完全に使えなくなる前まで、これから紹介する手法さえ知っていれば十分でしょう。

ネガティブtext-indentを使うPhark手法

Phark手法は一時期、Web開発者によく使われていた一般的なものです。考え方はtext-indentに大きなネガティブ値を設定することで、テキストをブラウザー画面の外へ移動してしまうというものです。

.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

以下のCodePenは、text-indentを使ってテキストを隠した場合、見出しがどのように見えるかのデモです。

このようにすれば、スクリーンリーダーがテキストを利用できます。しかし、テキストが右寄せになっている場合は機能しません。また、ブラウザーはヘッダー用に非常に大きなボックスをレンダリングする必要があります。非常に古いデバイス上で問題が起こるのは、text-indent値が原因です。

Scott Kellum手法

大きなネガティブtext-indentを設定せず「100%」にします。こうすれば、ブラウザーは大きなボックスをレンダリングする必要がなくなり、パフォーマンスが向上します。Scott Kellum手法を使うのに追加のマークアップは必要はありませんが、CSSは次のように設定する必要があります。

.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

overflowをhiddenに設定すると、テキストが隠れます。white-space: nowrapを使って改行を避けます。Scott Kellum手法を使っても、スクリーンリーダーでテキストが読めます。

以下のCodePenは、Scott Kellum手法を使ってテキストを隠した場合、見出しがどのように見えるかのデモです。

marginを使うRadu Darvas手法

Radu Darvas手法もテキストをブラウザー画面の外へ出しますが、マージンを利用する点が異なっています。考え方は、非常に大きなネガティブ左マージンを適用し、その大きさだけヘッダーを動かすというものです。

.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}

先に説明した手法と同様に、ロゴを見出しの背景画像として使用します。

以下のCodePenは、1つ目がマージンなし、2つ目がマージンを適用したRadu Darvas手法を使ったデモです。

右へずっとスクロールしていくと、最初の見出しの背景が表示されます。実際には、スクロールバーを気にする必要はありません。大きなネガティブマージンが幅を補う（2つ目の見出しを見れば分かるとおり）からです。ブラウザーは非常に大きなボックスを扱う必要があるため、Radu Darvas手法はブラウザーで実行すると効率的ではない点に注意してください。

paddingを使うLangridge手法

Langridge手法ではpadding-topプロパティを使ってテキストをヘッダーの外に押し出します。このプロパティは、ロゴの高さと同じ値に設定されます。しかし、これだけでは不十分で、テキストを隠すためにoverflow: hiddenも使う必要があります。

.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}

先に紹介したScott Kellum手法とRadu Darvas手法と比べて、Langridge手法のプロパティはより良い仕事をします。アクセシビリティは先の2つの手法と同程度です。

以下のCodePenは、1つ目の見出しはパディングの背景を使っておらず、2つ目の見出しはパディングの背景を使ったLangridge手法のデモです。

小さなfont-sizeを使うLindsay手法

テキストを隠す別の方法に、テキストを小さくし色をロゴの背景色と同一にするものがあります。アクセシビリティに悪影響を与えることなく機能しますが、フォントサイズが小さく、カモフラージュされた色なのでSEOのガイドライン違反ととられるかもしれません。

.replace-font {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  font-size: 1px;
  color: white;
}

以下のCodePenは、1つ目は固定font-sizeなしの画像、2つ目がfont-sizeを適用したLindsay手法のデモです。

ロゴが均一な背景色でなく、完全に同じ色にできない場合はやっかいですが、色をtransparentに設定すればOKです。

displayプロパティを使うFahrner画像置換

ほかの手法と違って、Fahrner画像置換を使うにはマークアップを追加する必要があります。考え方は、テキストを要素でラップし、displayプロパティをnoneに設定するものです。マークアップは次のようになります。

<h1 class="replace-display">
  <span>SitePoint</span>
</h1>

CSSは以下のようになります。

.replace-display {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-display span{
  display: none;
}

以下のCodePenは、実際に要素のdisplayをnoneに設定したFahrner画像置換のデモです。

Fahrner画像置換は、実装するのは簡単ですが、アクセシビリティに悪影響を与えます。displayを持つ要素がnoneに設定されたことをスクリーンリーダーが無視してしまうからです。visibilityがhiddenに設定された場合にもまったく同じ問題が起こりますので、そうもできません。できることといえば、opacityを0に設定することぐらいです。このように設定すれば、要素を隠しつつスクリーンリーダーによる読み取りも可能になります。

overflowプロパティを使うLeon Dwyer手法

パディングを加えてからテキストを隠すためにoverflowプロパティを使いました。この項ではoverflowプロパティだけを使って要素を完全に隠します。Leon Dwyer手法では先ほどのFahrner画像置換と同様にテキストを要素でラップする必要があります。今回のCSSは以下のようになります。

.replace-overflow {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-overflow span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

span要素の幅と高さを0に設定すると、要素内のテキストがボックスの外に出ます。そのあと、テキストはoverflow: hiddenプロパティで隠れます。

以下のCodePenは、オーバーフロープロパティを使うLeon Dwyer手法のデモです。

これでスクリーンリーダーがテキストを利用できるようになるので、アクセシビリティの問題はなくなります。

絶対配置を使うLevin手法

Levin手法も、利用するには要素を追加する必要があります。しかし、要素はテキストを回り込むように配置するためではなく、画像を配置するために利用します。Levin手法のマークアップは次のようになります。

<h1 class="replace-position">
  <span></span>SitePoint
</h1>

CSSは以下です。

.replace-position {
  width: 264px;
  height: 106px;
  position: relative;
}

.replace-position span {
  background: url("assets/logo.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

以下のCodePenは、絶対配置を使うLevin手法のデモです。

ヘッダー要素を完全に覆うことができるように、幅と高さを100%に設定していることに注意してください。Levin手法の唯一の問題点は使用する画像が必ず不透明でなければならない点です。不透明ではない場合、テキストが画像から透けて見えてしまいます。

ダミー画像を使うRadu Darvas Shim手法

Darvas Shim手法も、問題なく使うには通常の要素に加えてダミー画像が必要になります。ダミー画像は1×1ピクセルの透明なGIF画像です。画像を隠したときにユーザーにaltテキストを認識させるのが主な目的です。マークアップは以下のようになります。

<h1 class="replace-image-span">
  <img src="assets/transparent.gif" alt="SitePoint" />
  <span>SitePoint</span>
</h1>

適用するCSSは以下のようになります。

.replace-image-span {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-image-span span{
  display: none;
}

以下のCodePenは、ダミー画像を使うRadu Darvas Shim手法のデモです。

実際のテキストが隠れていても、スクリーンリーダーはaltタグを読み取れます。したがって、Radu Darvas Shim手法を利用しても、アクセシビリティの問題は起こりません。問題なのは<img>タグに意味が付与されておらず、今回のケースではbogus画像であることだけです。CSSと画像の両方を隠した場合、テキストが2つ表示されます。

実画像とInline画像を使うPhark手法

Phark手法は、画像置換に実画像を使います。実画像は画像を隠したときに表示されるaltテキストが設定されています。マークアップは以下のようになります。

<h1 class="replace-image-link">
  <img src="assets/logo.png" alt="SitePoint" />
</h1>

以下のCSSで実画像に置き換えられます。

.replace-image-link {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

以下のCodePenは、実画像とinline画像を使うPhark手法のデモです。

表示されている画像は、<img>タグではなくbackgroundプロパティによるものです。先に説明した大きなネガティブtext-indentの問題もあり、Phark手法はSEOの観点から好ましくありません。ほかの手法と比べてPhark手法には1つメリットがあります。CSSを隠し、ほかの画像を表示したままの状態でも実画像が見えることです。しかし、そうならば、なぜ画像だけを置いておけないのかは疑問ですね…。

clip-pathを使う手法

clip-pathプロパティは指定されたパスの外にあるものすべてを隠します。Clipパスを使う手法ならばテキストを切り抜き、隠せます。スクリーンリーダーはパスの外にあるテキストを利用できますが、表示上は隠れています。マークアップは以下のようになります。

<h1 class="replace-clip-path">
  <span>SitePoint</span>
</h1>

適用するCSSは以下の通りです。

.replace-clip-path {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-clip-path span{
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

以下のCodePenは、Clipパスを使う手法でclip-pathの値を変更し、テキストがどのように切り抜かれるかのデモです。

Clipパスを使う手法の唯一の問題は、サポートしているブラウザーがまだ十分にないことです。SitePointに掲載された『Introducing the CSS clip-path Property』でclip-pathプロパティをとりあげています。記事ではclip-pathプロパティをかなり深く掘り下げています。Clipパスを使う手法をサポートするブラウザーの数が十分になるまでに画像置換が必要なくなり、ブラウザーがClipパスを使う手法をサポートする必要もほぼなくなるでしょう。

Pseudo要素を使うNash画像置換

Nash画像置換はpseudo要素を使ってテキストを押し出します。マークアップは以下のようになります。

<h1 class="replace-pseudo">
  SitePoint
</h1>

以下のCSSを使えばNash画像置換が機能します。

.replace-pseudo {
  width: 264px;
  height: 106px;
  overflow: hidden;
}

.replace-pseudo:before{
  content: url("assets/logo.png");
}

以下のCodePenは、pseudo要素を使うNash画像置換のデモです。

pseudo要素はテキストを押し出します。テキストは押し出され、そのあとoverflow: hiddenプロパティを使って隠されます。Nash画像置換には1つ問題点があります。Internet Explorer 8かそれ以上でしか動作しないことです。

最後に

記事で紹介した手法には、それぞれメリットとデメリットがあります。一般的に、近い将来これらの手法はSEOの観点から好ましくないものとなるでしょう。これらの手法を使うのを避けたいなら、今がチャンスです！

（原文：A History of CSS Image Replacement）

［翻訳：中村文也］
［編集：Livit］

アートワーク：SitePoint / Natalia Balska

Web Professionalトップへ

WebProfessional 新着記事

ビジネス

Backlogは未来を楽にする　最初は手間だけど、1年後は使った自分を褒めたくなる

　2024年12月14日、BacklogのユーザーグループであるJBUG（Japan Backlog User Group）は「Backlog World 2024 in YOKOHAMA」を開催した。Webプロジェクト、イベント運営、新規事業、オンボーディング、ミーティング、ワークスペース統合など多種多様なBacklog活用事例が披露された。