個別記事

前後の記事

:before 疑似要素を使ってテキストを画像に置換

この記事が属するカテゴリー
CSS

Image Replacement （背景画像置換）ネタ再び。我ながらしつこいネタだけどキニシナーイ。とりあえず今回は、:before 疑似要素を使って、テキストを画像に置換してみるっす。

残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。おそらく IE7 ではサポートされると思うんで、IE7 がそこそこ広まったうえで、それ以前の IE をバッサリ切り捨てる潔さがあれば、意外と使える方法かもしれない。

:before 疑似要素によるImage Replacement の仕組み

:before 疑似要素と content プロパティを使うことによって、当該要素の前に生成内容を挿入することが可能になる。今回のImage Replacement （背景画像置換）の仕組みとしては、テキストの前に画像を挿入し、はみ出したテキストを不可視にすることによって画像のみを表示させるって感じ。当然、画像をオフにした場合は、はみ出して不可視になっていたテキストが表示されることになる。

実際のやり方

サンプルとして下記のソースを使い、Lucky bag::blog の文字を画像で表示してみる。

<h4>Lucky bag::blog</h4>

まず、h4 に対して :before 疑似要素を使って画像を要素の前に生成する。

h4:before {
        content: url("banner.png");
}

before01.jpg

さらに、その部分をブロック化させる指定を追加することによって、テキストが画像の下に回り込む。

h4:before {
        content: url("banner.png");
        display: block;
}

before02.jpg

最後に h4 の高さ（＝画像の高さ）を指定し、領域からはみ出したテキストを隠すことによって完成。

h4 {
        height: 110px;
        overflow: hidden;
}

before03.jpg

完成サンプル。IE などの :before 疑似要素をサポートしていないブラウザ、もしくは、画像オフ CSS オンの状態で閲覧すると、元のテキストのみで表示される。

2005-05-07T18:34:21+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/223

":before 疑似要素を使ってテキストを画像に置換"へのトラックバックはまだありません。

コメント

":before 疑似要素を使ってテキストを画像に置換"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)