「text-indent」「overflow」CSSで画像置換を行う方法

Webページでは、テキストを主体として作成を行います。しかし、画像を取り入れた方が、見た目が華やかになって良いですよね。「img要素」を使用して画像を表示する方法もありますが、画像置換というテクニックを使うことも可能です。

画像置換とは、テキストを画像に置き換える方法で、ソース上はテキストですがブラウザ上だと画像に置き換わって表示されます。多くのサイトで使われている手法ですから、覚えておくようにしましょう。

ここでは、画像置換のテクニックを紹介します。

 

text-indentプロパティを使用した方法

画像置換の最も有名な方法として、「ファークメソッド」と呼ばれるものがあります。これは、「text-indent:-999px;」などと指定して、テキストを画面の外へ飛ばしてしまう方法です。これを使えば、テキストが見えなくなって背景画像だけが表示されます。

具体的には、以下のように指定します。

【CSS】
p {width: 300px;
height: 150px;
background-image: url(img/image.jpg);
text-indent: -999px;}


【HTML】
<p>ここにテキストが入る</p>

まずは、背景画像を設定して、横幅と高さも指定します。そして、「text-indent: -999px;」と指定すれば、テキストが見えなくなるというわけですね。最も簡単に画像置換ができる方法なので、広く利用されています。

しかし、これだと-999pxの大きな領域が作られてしまうので、読み込み速度が遅くなったりなどのパフォーマンスの低下が懸念されます。ですから、最近だと別の方法を使用する人が増えているようです。

 

「text-indent」と「white-space」と「overflow」を使う方法

「text-indent: -999px;」によるパフォーマンスの低下を解消する方法として、新しく考案されたのが「スコットケラムメソッド」です。方法としては、背景画像の外にテキストを飛ばしてから、overflowプロパティで消してしまいます。

具体的には、以下の通りです。

【CSS】
p {width: 300px;
height: 150px;
background-image: url(img/image.jpg);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}


【HTML】
<p>ここにテキストが入る</p>

この方法では、「text-indent: 100%;」として要素の幅分だけ右へインデントさせます。ただ、それだと改行されて、テキストが要素内に残ってしまいます。なので、「white-space: nowrap;」と指定することで、改行を禁止させています。さらに、「overflow: hidden;」として、はみ出たテキストを非表示としているわけです。

これだと、無駄に大きな領域を作ることもありません。なので、パフォーマンスを下げることなく、画像置換が行えるわけですね。だから、最近だと主流になりつつあるテクニックだといえます。

 

以上、画像置換の方法を紹介しました。CSSの応用テクニックですが、知っておいて損は無いと思います。ただし、テキストを隠してしまうので、検索エンジンからスパムと判定される可能性もあります。ですから、むやみに乱用するのは避けるようにしましょう。

サブコンテンツ

このページの先頭へ