より多くのデザイナーや開発者が標準 (特に CSS) を使用し始めると、新しいテクノロジーが毎日発見され、同じ目標を達成するための新しい方法が開発され、より良い方法が常に開発されています。
」これは、CSS を使用して通常のテキストを画像に置き換えるテクノロジーです。
CSS を使用してテキストを画像に置き換えるにはどうすればよいですか?
パフォーマンスに使用されるすべての画像 (重要でないまたは装飾的なもの) を CSS に配置できれば、更新された画像を簡単に置き換えることができるのが最善ですが、私たちはそうしません。同様に、テキストを画像に置き換える高度な CSS を完全にサポートしているかどうかに関係なく、すべてのブラウザーとデバイスがマークアップ ソース コードの意味を正しく解釈できることを保証できます。この本の利点。
完璧な解決策はありません
ただし、CSS だけを使用してテキストを画像に置き換える「完璧な」方法を見つけるのは、ほとんど聖杯を探すようなものです... すべてにおいて機能する唯一の方法がまだ存在していないからです。ブラウザのメソッドですが、補助プログラム (スクリーン リーダーなど) では使用できません。ユーザーがブラウザで画像を表示せず、CSS も有効にするように指定しない限り、機能する他のメソッドもあります。
この中にはありますが。テキストの書き込み 当時、すべての人 (またはすべてのユーザー) を満足させる方法はありませんでしたが、現在ではこの方法が実際に多くの Web サイトで使用されています。画像を置換する方法を適用する場合は特に注意が必要であり、それを理解する必要もあります。副作用を引き起こします。
使用することはできますが、注意してください
これがこの章の目的です。画像置換によってもたらされる利便性は、時間が経つにつれて、より多くの CSS 愛好家がそれを実現するためのより良い方法であることに気づくでしょう。同じ効果がありますが、その前に、これらのテクニックを上手に活用してメリットとデメリットを比較検討する必要があります。
画像置換の概念を理解するために、いくつかの一般的に使用される方法から始めましょう。 image 置換技術 (Fahrner Image Replacement;FIR) について話します。
#p#
方法 A: ファーナー画像置換 (FIR)
この手法を発見した Todd Fahrner にちなんで名付けられた FIR は、CSS の背景 (または背景画像) プロパティ
の Douglas Bowman を使用してテキストを画像に置き換えるオリジナルの方法です。 2003 年 3 月に発行された優れた教育文書「背景画像を使用してテキストを置換する」(http://www.php.cn/) により、この方法が大きな注目を集めました。
FIR バーを置換する簡単な例を使用してみましょう。画像付きのタイトルテキスト。
タグのソース コード
次に置換に使用されるタグのソース コード:
Fahrner Image Replacement
これは、後で画像に置き換えられる単純なタイトル タグです。
図 14- 1 のデフォルト スタイルタイトル
追加タグ ファーナー画像の置換
追加の タグを配置しました。 CSS に追加する準備ができました。
CSS コンテンツ
方法 A の本質は、2 つのタスクをそれぞれ完了するために必要な 2 つのタグのセットを使用し、 タグでテキストを非表示にしてから、 タグにスタイルを追加することです。背景画像を指定します。 これら 2 つの手順により、2 セットのラベルが使用されます。
テキストの非表示
まず、 タグの display 属性を使用して、テキストを非表示にします。
まず、Photoshop を使用してテキスト画像を作成します (図 14-2)。もちろん、他の画像エディタを使用して同じ作業を完了することもできますので、画像の長さと幅に注意してください。
図 14-2 fir.gif、テキストの置換に使用される画像
図 14-2 この画像のサイズは幅 287 ピクセル、高さ 29 ピクセルです。画像の < ;h1>タグの背景画像。
#fir {
幅: 287px;
高さ: 29px;
背景: url (fir.gif) no-repeat;
}
#fir スパン {
表示: なし;
}
前
タグのテキスト内容を非表示にするには、display 属性を使用します。
で、置換画像の長さ、幅、画像名を指定します。 h1> タグのサイズは画像とまったく同じ (287*29px) で、画像は表示によって隠されたテキストの後ろに表示されます。
でタイトルを表示した場合の効果です。完璧な画像です!
マークアップ構文の代わりに CSS を使用して画像を提供するため、CSS をサポートしていないブラウザでもタイトル テキストを確実に表示できます。画像を置き換える必要がある場合は、CSS を変更するだけで済みます。
しかし、これらの利点には、言及する価値のあるいくつかの非常に重要な欠点も伴います。
欠点
ユーザビリティの専門家 Joe Clark は、スクリーン リーダーやその他の補助デバイスを使用してページ コンテンツを読むユーザーに対する Fahrner の画像置換手法の影響を広範囲に研究しました。
}
#fir span {
display: none;
これらのルールは、テキストが視覚的に非表示になるだけでなく、スクリーン リーダーで閲覧するユーザーには完全に見えなくなります。また、デザイナーが将来の画像の表示方法をより正確に制御できるように、スクリーン リーダー専用の新しい CSS メディア タイプを作成する必要があると主張する人もいます。または、スクリーン リーダーは、音声などの既存のメディア タイプのいずれかに準拠している必要があります。
スクリーン リーダーにはテキスト表示の問題が発生することに加えて、FIR には次の 2 つの欠点があります。
このメソッドが機能するには、一連の タグが必要です。
まれに、ユーザーが画像を表示するためにブラウザを閉じたときに CSS サポートを有効にすると (通常は帯域幅を節約するため)、テキストも画像も表示されなくなります。
メリットとデメリットを比較検討します
実際のところ、FIR を使用すると、デザイナーは障害を持つ人々に完全なコンテンツを提供できなくなるリスクがあり、画像表示をオフにして CSS を有効にするユーザーも同じリスクを負います。
この章の後半の「技術拡張」の単元で、FIR を使用することが合理的な状況がいくつかあります。
これらのユーザビリティに関する調査結果が表面化するにつれて、他のデザイナーや開発者も常に適応し、画像置換技術を試したり、通常のテキストを「隠す」新しい方法を見つけたり、北京向けに画像をカスタマイズしたりしているため、次の方法をチェックしてください。
#p#
方法 B: Leahy / Langridge Image Replacement Method (LIR)
は、Seamus Leahy (http://www.php.cn/) と Stuart Langridge (http://www.php.cn/) によって同時に開発されました。 LIR このメソッドの目的は、FIR で無意味だが必要な
LIR タグを使用せずに画像の置換問題を処理することです。代わりに、テキストの高さを使用します。アウトソーシング要素 (この例では () は 0 に設定され、padding-top はテキストを邪魔にならないように置換画像と同じ高さに設定されます。
マークアップ ソース コードと CSS
この方法では追加の タグが必要ないため、マークアップ ソース コードは次のように削減できます。
Leahy / Langridge Image Replacement
図 14-4 のテキストを画像に置き換えるのに必要な CSS コードはすべて、次のステートメントに含まれています:
#lir {
パディング: 90px 0 0 0;
オーバーフロー: 非表示;
背景: url(lir.gif) no-repeat;
高さ: 0px !重要; /* ほとんどのブラウザの場合 */
height /**/:90ピクセル; /* IE5/Win の場合*/
}
図 14-4 画像エディタで作成された lir.gif
テキストの置換に使用される画像の高さは 90 ピクセルであるため、ほとんどのブラウザでは高さを 0 に設定します。これはテキストを設定することと同じです (または 内) は完全に削除され、この値がその後の値の代わりに使用されるようにします (Windows の IE5 の場合のみ)。ただし、2 番目の高さのルールは無視されます。 Windows 版 IE5 が対応します。
悲惨なボックス モデル
最後のルールは、Windows 用 IE 5 が CSS ボックス モデルを誤って解析する問題を修正します (第 12 章「ボックス モデルの問題」を参照)。これは、Windows 用 IE5 が幅と高さの間の内部パッチを蓄積するためです。
この例では、高さは置換画像の高さと同じです。
欠点
方法 B では、冗長な タグを削除できますが (タグのソース コードを修正することは常に良いことです)、方法 A と同じ欠点があります。つまり、画像がオフになり、ユーザーがCSS を有効にすることは何の関係もありません。表示されません。
LIR のもう 1 つの欠点は、Windows 用 IE5 を適切に動作させるためにボックス モデルのハックが必要なことです。
メソッド B は表示属性を使用しないため、テキストを非表示にする場合、この方法はスクリーン リーダーを使用する場合に便利であると考えられます。ただし、方法 A と同様に、Leahy/Langridge 方法を使用する場合にも注意を払い、「回転」するときの使いやすさを考慮する必要があります。
Mike Randle による別の画像置換方法の変形を見てみましょう。
#p#
メソッド C: Phark メソッド
インターネットの最も優れた点は、常に既存のテクノロジを改良し、同じ目標を達成するためのさまざまな方法を見つけている人がいることです。2003 年 8 月、開発者のマイク ランドルは独自のイメージである置き換えメソッド (http: //www.php.cn/) は特別なアイデアを使用して、非表示にしたいテキストに大きな負の text-indent 値を指定します。テキストは理論的には画面上に表示されますが、表示を超えてしまいます。最大の画面でも表示されない範囲がたくさんあります。なんと賢いアプローチでしょう。
マークアップ言語と CSS
メソッド B と同様に、Phark メソッド (Mike の Web サイトのニックネームにちなんで名付けられました) も、メソッド C を使用する場合、タイトル タグのソース コードは次のようになります。
Phark メソッド
このメソッドは、FIR メソッドに必要な追加の タグを使用する必要はありません。非表示のテキストを確認し、図 14-5 の画像を置き換えるのに必要な単純な CSS コンテンツに置き換えます。 
図 14-5 置き換えるために使用する高さ 26 ピクセルの画像 phark.gifテキスト
#phark {
高さ: 26px;
テキストインデント: -5000px;
背景: url(phark.gif) no-repeat;
}
ご覧のとおり、方法 C は、ボックス モデルのハックや追加のタグを必要とせず、テキストを画面外に押し出すことができます。
方法 B と同様に、この方法を使用すると、スクリーン リーダーのユーザーはタイトル テキストの内容を正常に聞くことができ、これは確かに改善です。
まだ完璧ではありません
Phark メソッドは最も簡単に実装できますが、「画像表示をオフにして CSS を有効にする」場合には問題が発生します。実際には簡単ではありませんが、これがこのテキストを書く意味を表しています。現時点では、まだ完全な解決策はありません。
前に示した 3 つの方法を確認し、その違いをまとめてみましょう。
#p#
概要
初期のファーナー画像置換法から始まり、その 2 つのバリエーションに至るまで、一般的に使用される 3 つの画像置換手法を注意深く研究しました。どちらも完璧ではありませんが、Mike Randle のような手法は完璧に近いものになるはずです。現実の世界で適用されますが、いくつかの落とし穴や欠点に注意する必要があります。
これら 3 つの方法の主な違いを分析してみましょう:
方法 A:
意味のない タグの追加セットが必要です。
このテキストが書き込まれると、一般的に使用されるスクリーン リーダーは表示属性の影響を受け、コンテンツを読み取らなくなります (Joe Clark の調査結果による)
「画像表示をオフにしてCSSを有効」にすると何も表示されなくなります。
方法 B:
追加のタグは必要ありません
スクリーン リーダーはコンテンツを正常に読み取ることができる必要があります。
Windows 版 IE5 のボックス モデル Hack を使用するには。
「画像表示をオフにしてCSSを有効」にすると何も表示されなくなります。
方法 C:
追加のタグは必要ありません
スクリーン リーダーはコンテンツを正常に読み取ることができる必要があります。
「画像表示をオフにしてCSSを有効」にすると何も表示されなくなります。
現在、すべての一般的な方法には最後の欠点がありますが、より多くの開発者が画像置換技術の研究を続ければ、いつか誰もが満足できる解決策が見つかると私は信じています。
それまでは、いくつかの実用的な方法があります。画像置換の概念については言及する価値があります。そのうちの 2 つは、この章の後半の「技術拡張」単元で説明します。
言及する価値のある 1 つの重要な点: Dave、標準準拠のデザイナー Shea は、画像置換の最新の開発を常に観察しています。 Dave の「Revised Image Replacement」(http://www.php.cn /) を必ずチェックしてください。
#p#
スキル拡張
この単元では、まず、画像置換テクノロジが正しく適用される 2 つの現実世界の状況を見てみましょう。まず、ロゴ置換に役立つテクニックを見てみましょう。これは、FIR のプロモーションである Douglas Bowman です。技術 (方法 A) が最初に私に教えてくれました。次に、Fast Company の Web サイトが画像置換技術を使用して JavaScript を使用せずにナビゲーション システムを作成する方法を共有します。
ロゴの置換
この章の冒頭で、CSS を使用してテキストを画像に置き換える方法について説明しました。これらの方法には特定の欠点がありますが、これらの欠点は 1 つの特殊なケース、つまり画像を使用する場合には完全に解消されます。別の画像を置き換えます。
しかし、なぜこれを行う必要があるのでしょうか?
Hi-Fi と Lo-Fi
がある画像を別の画像に置き換える理由の 1 つは、異なる Web サイト ID を提供するためである可能性があります。1 つは CSS を完全にサポートする (背景属性を正しく処理できる) ブラウザー用であり、もう 1 つはこの方法です。古いブラウザ、ハンドヘルド デバイス、スクリーン リーダーなどに便利です。
この方法は、ロゴに透明色または CSS で設計された特別な色がある場合に特に便利です。ロゴにより、Lo-Fi バージョンを表示できます。 CSS がオフまたはサポートされていない場合でも、ページの外観が良好になるようにします。
例
著作権弁護士の関与を避けるために、ここでも私の個人的な Web サイトを例として使用します。ロゴ画像を置き換えるだけでなく、CSS を有効にしたバージョンの他のページも考慮に入れます。ロゴの部分はハイパーリンクとしてクリックでき、ホームページに戻ることもできます。
ホームページでロゴをマークするために使用したソース コードと、他のページで使用したソース コードを見てみましょう。
これはホームページです:
< ;p id="logo">
他のすべてのページのロゴをクリックすると、ユーザーは次のページに戻ることができます。ホームページ:
style="max-width:90%" alt="マークアップ言語 - 画像置換_HTML/Xhtml_Web ページ制作" />
図 14-6 CSS が有効になっていないブラウザに表示される logo_lofi.gif
図 14-7 CSS が有効になっているブラウザに表示される logo_corn 。
CSS コンテンツ
#logo img {
display: block;
width: 0;
}
#ロゴ スパン {高さと幅を置換画像と同じに設定し、背景画像を Hi-Fi バージョンとして指定するだけであることがわかったはずです。 ハイパーリンクを復元する
幅: 173px;
高さ: 31px;
背景: url(../images/logo_corn.gif) no-repeat;
}
# logo a {CSS で の幅を指定することで、この例では、サイズの異なる 2 つの画像を指定することもできます。
border-style: none;
display: block;
width: 173px;
}
図 14-9 CSS をサポートするブラウザでは、hi_fi ロゴが表示されます
この例は、画像置換テクニックを罪悪感なく使用できる、具体的には、既存のインライン画像を別の CSS 参照画像に置き換えることができる実際の状況を示していると思います 
#p#
使いやすいイメージ タグの反転効果 
図 14-12 3 つの状態を含む画像 パディング: 0;
高さ: 20px;
リスト スタイル: なし;
表示: インライン;
オーバーフロー: 非表示;
}
#nav li {
マージン: 0;
パディング: 0;
リストスタイル: なし;
表示: inline;
}
#nav a {
float: left;
パディング : 20px 0 0 0;
オーバーフロー: 非表示;
高さ: 0px !重要;
高さ /**/:20ピクセル; /* IE5/Win のみ*/
}
#nav a:hover {
背景位置: 0 -20px;
}
#nav a:active, #nav a.selected {
背景位置: 0 -40px;
}
フロントこの CSS セクションでは、リスト スタイルと内部パッチが削除され、リストが水平になり、ハイパーリンク内のテキストが非表示になります。これは、すべての #nav に共通です。また、プロジェクトごとにこれらのルールを個別に繰り返す必要はありません。
次に、強調表示し続けたいタグの「selected」クラスを指定し、タグがサイト内のどこにあるかを示すヒントを読者に提供します。
これらのルールは :active 状態と共有されていることに気づくかもしれません。 #nav と #nav li の指定を繰り返します。 list-style:none; および display:inline; ルールは、Windows 用 IE5 に追加されるものですが、理想的には、これらのルールを #nav に 1 回指定するだけで十分です。もちろん、これは現状ではありません。
次に、各 ID のルールを追加し、背景画像と幅を指定します。以下は例です。背景: url(home.gif) top left no-repeat;
}
もちろん、各タグには同様のステートメントが含まれています。 結果
図 14-13 は、通常の状態、マウスオーバー状態、選択状態のラベルの効果を示しています。実際の操作の効果を確認したい場合は、例を参照してください。ソース コード (http://www.php.cn/) の SimleBits の上。
図 14-13 ラベル ナビゲーション効果。3 つの異なる状態を示します。 なぜそれを使うのでしょうか？ これは非常に軽量であり、マークアップのソース コードは単なる順序なしのリストです。 使い方は簡単です。スチュアートの方法を使用して、スクリーン リーダーがテキスト リンクを発音できるようにしました。 JavaScript なし: マウスオーバー効果を制御するために画像を事前にロードしたり、個別の画像を作成したりする必要はありません。 美しいです。テキストをあるべき場所に配置するには多くのスキルが必要です。そのため、[美しい画像] を使用するだけで済みます。 しかし、待ってください、テキストのサイズは変わりません!
Douglas Bowman の良いアドバイスに従い、読みやすさの問題と画像のサイズを変更できないことに対応して、さらに一歩進んで、テキストを拡大したラベル画像の 2 番目のセットを作成しました。次に、これらのルールは既存の中規模および大規模な置換スタイル シートで上書きできます。以前に第 10 章「ヒントの拡張」で説明した、置換スタイル シートを有効にしました。前のコードと同じで、画像の位置のみが変更されます。幅:#thome a {
width: 46px;
バックグラウンド: url(guides_lg.gif) 左上 no-repeat;}このメソッドはテストされており、バージョン 5.0 以降のすべてのブラウザで正常に動作するはずです。
図 14-14 は、Fast Company Web サイト上の拡大されたラベルの効果を示しています。垂直方向のサイズは元のラベルと同じですが、水平方向の距離が狭くなっていることがわかります。ただし、拡大テキストの追加により、画像サイズにラベルを付ける機能を使用することで、視力の悪いユーザーをサポートするだけでなく、既存のデザインの詳細を維持することもできます。
図 14-14 拡大されたアイコンを含むナビゲーション バー。置換スタイルシートを使用した画像 互換性
Fast Company の Web サイトでは、すべての要素を完璧に配置するために、position:absolute を使用して #nav の位置を指定することにしました。タイトル領域の背景色が透けて表示されます。ただし、絶対に配置された要素の幅を指定する必要がある Windows 版 Opera7 を除いて、この方法は完全に機能します。
これは、すべての画像の幅の合計を指定するだけで問題ありません。 #nav 問題ありません:
#nav {
マージン: 0;
パディング: 0;高さ: 20px;この本の翻訳はあと 2 章だけ残っています。この本を書き写すことは、読むことよりも人々の心に深く根付くことができます。ははは、私はたくさんの恩恵を受けました
リストスタイル: なし;
表示: インライン;
overflow: hidden;
width: 201px;
}
これでぐっすり眠れるようになり、Opera ファンも満足です。 結論これで、画像置換テクノロジーの最新の開発について理解できましたが、まだ完璧な解決策はありませんが、これらの原則は非常に重要であり、理解して実験する価値があります。
さらに、画像置換技術の 2 つの実際の使用法をデモンストレーションすることで、あなたが始められることを願っています。そう、あなたは... 次のベスト プラクティスを発見する人になってください。運と名声は待っています!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
