Loading article…
CSS の画像置換は、 Flashなどの他の技術ではなく、カスケード スタイル シートを使用して、Web ページ上のテキストをそのテキストを含む画像に置き換える、古いWeb デザインテクニックです。これは、スクリーン リーダー、テキストのみのWeb ブラウザ、または画像やスタイル シートのサポートが無効になっているか存在しない他のブラウザのユーザーがページにアクセスできるようにしつつ、スタイルごとに異なる画像を表示できるようにすることを目的としています。多くのテクニックの 1 つは、2003 年に画像置換のアイデアを考案した Todd Fahrner にちなんで名付けられたFahrner 画像置換です。 [ 1 ]
主要なウェブブラウザすべてにCSSウェブフォントのサポートが導入されたことで、CSSによる画像置換はほとんど使われなくなりました。
HTMLドキュメントに画像を挿入する一般的な方法は、<img>要素を使用することです。しかし、この方法にはアクセシビリティと柔軟性の面で欠点があります。<img>
alt属性は画像コンテンツのテキスト表現を提供するように設計されていますが、そのためテキスト表現にHTMLマークアップを使用することはできません。<img><img>これらの問題を解決するために、ファーナー画像置換法などの画像置換技術が考案された。
ダグラス・ボウマンによって記述されたオリジナルの画像置換実装[ 1 ]では、見出しが使用され、その中に見出しのテキストを含む要素がありました。<span>
< h3 id = " firHeader " > <span>サンプル見出し</span> </h3>スタイルシートを通して、見出しには目的の画像を含む背景が設定され、CSSプロパティを以下のように設定することで非表示にされました。<span>displaynone
# firHeader { width : 300 px ; height : 50 px ; background : #fff url ( firHeader.gif ) top left no-repeat ; }# firHeader span { display : none ; }displayしかし、この方法では、一部のスクリーンリーダーが、プロパティを持つテキストを読み上げないため、見出しを完全にスキップしてしまうことがすぐに判明しましたnone。 2003年にマイク・ランドルによって開発された後のPharkメソッドは、代わりにプロパティを使用してテキストを画像の領域外に押し出すことで、この問題を解決しました。text-indent
# firHeader { width : 300 px ; height : 50 px ; text-indent : -5000 px ; /* ← Phark */ }しかし、Phark方式にも問題があった。CSSは有効だが画像が無効になっているビジュアルブラウザでは、何も表示されなかったのだ。
また、2003年には、デイブ・シェイの同名のシェイ法が、先に述べた2つの問題を解決したが、その代償として、<span>
< h3 id = " header " > <span> </span>画像差し替え修正</h3>空の要素をテキスト要素の上に絶対位置指定することで、テキストは実質的に非表示になります。画像が読み込まれなかった場合でも、背後にあるテキストは表示されたままになります。そのため、透明度を持つ画像はSheaメソッドでは使用できません。<span>
#header { width : 329px ; height : 25px ; position : relative ; }#header span { background : url ( firHeader.gif ) no - repeat ; position : absolute ; width : 100 % ; height : 100 % ; }それ以来、互換性や複雑さの程度が異なる12種類以上の方法が開発されてきた。[ 2 ]