任意のテキストを画像に置き換えるCSS

テキストをtext-indentで飛ばす方法

CSSでテキストを画像に置き換えるCSSコードになります。ユーザーが画像を読み込めない場合は、置き換えられるテキスト表示もされませんので気をつける必要があります。CSSが無効の場合は、テキスト表示がされます。

上記のコードは、ブロック要素などのタグでその背景を任意の画像に指定します。

• 指定する背景の繰り返しは無しで
• 高さ指定は、画像の高さに合わせて任意のピクセル数を指定します。
• text-indentで実際のテキストを左のとんでもない位置に飛ばしています。
• このコードで設定すれば、テキストと画像を置き換えることが可能です。
• 尚、インライン要素の場合、display:block;指定が必要となります。

<span></span>要素で画像を覆いかぶせる

ブラウザの設定で画像が非表示の場合は、覆いかぶせる方がいいかもしれないです。画像が非表示を想定する場合は、置き換えるテキスト要素に<span></span>要素を入れ子にしてCSSを設定します。（微調整が必要です）

CSSの設定パターンは以下の通り

• <span></span>は、インライン要素なのでdisplay: block;でブロック要素扱いにします。
• マージンの設定でマイナス指定し、<h1></h1>を隠します。
• position: relative;z-index: 2;指定で<h1></h1>よりも上に画像が表示されるように指定します。
• ※マージンの設定は、h1のCSS設定に関係してきますので、画面を見ながら微調整するようにします。
• 次の要素のコンテンツが指定する画像の高さ分空き（マージン）ができます。デザインレイアウト的にスペースが十分ある場合に使える方法だと思います。

<span>をグループ的にCSS設定している場合は、id指定などしてみてもいいかと思います。

<span>要素でなくても、<h1></h1>タグの次に<p></p>で指定して、<p></p>で囲まれたテキストを飛ばしてみてもいいかと思います。

※この方法は、次の要素のテキストもしくは、コンテンツが指定する画像の高さ分下にマージン空きができます。デザインレイアウト的にスペースが十分ある場合に使える方法だと思います。あまり高くない画像等であれば、違和感なく表現することが可能です。