HOME

画像置換

CSSによる画像

見栄えのための（コンテンツでない、あるいは装飾的な）グラフィックはすべてCSSに記述するのが理想的。
完全な方法は今のところないので、それぞれの利点と欠点を考えながら利用できる方法で対処する。

方法A：FIR（Fahrner Image Replacement　ファーナー式画像置換）

CSSでbackground（またはbackground-image）プロパティを使用してテキストを画像で置換するオリジナルの方法。

マークアップ

Fahrner Image Replacement

・タグの追加：見出し要素に加えてマークアップ上でテキストを再度括るタグを必要とする。<span>が最適。
<span>は汎用インライン要素であり、特定の意味的構造をあらわさない。

<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

CSS

手順1．<span>要素を使ってテキストを非表示にする
手順2．スタイル定義したタイプの背景画像を<h1>要素に割り当てる 

#fir {
	width: 287px;
	height: 29px;
	background: url(fir.gif) no-repeat;
	}
#fir span {
	display: none;
	}

Fahrner Image Replacement

利点：
・マークアップではなくCSSを使用して画像を提供することで、CSSをサポートしていないブラウザやデバイスでも生のテキストだけは表示される。
・グラフィックを交換するのは、マークアップを更新するのと違って簡単
欠点：
・現時点では、一般的なスクリーンリーダーがdisplayプロパティの値をnoneに指定していると読み上げなくなる。
・意味のない<span>要素が必要
・ユーザがブラウザで画像を使用不可CSS有効にしていると、テキストも背景画像も表示されなくなる。

▲このページのトップへ

方法B：LIR（Leahy/Langridge Image Replacement　リーフィー/ラングリッジ式画像置換）

FIRで必要とされる、意味がないが不可欠な<span>要素なしで画像置換を処理することを目指す。 displayプロパティを使ってテキストを非表示にする代わりに含んでいる要素（ここでは<h1>）の高さを0に設定し、上パディングを置換画像の高さと同じに設定することでテキストを邪魔にならないところに移動する。

マークアップ

<h1 id="lir">Leahy/Langridge Image replacement</h1> 

#lir {
	padding: 90px 0 0 0;
	overflow: hidden;
	background: url(lir.gif) no-repeat;
	height: 0px !important; /*たいていのブラウザ用の値*/
	height /**/:90px; /*IE5/Win用の値*/
	}

テキストと置換する画像は高さ90ピクセルで、上パディングと同じ値。
高さを0に設定し、テキスト（および<h1>要素内に含まれるもの）を効果的に取り除く。
!importantルールで、先行する値が後続の値を上書きする。
※Windows版IEは!importantルールに対応していない。また通常のブラウザは2番目のheightルールを無視するがWindows版IE5は認識する。
/**/は、IE6による解釈を避けるために入れられている（→Alternate Box model Hacks）
また、最後のheightは、必ず置換に使用する画像の高さと同じになる。

Leahy/Langridge Image replacement

利点：
・追加のマークアップが不要
・スクリーンリーダーがテキストを正常に読み上げる
欠点：
・Windows版IE5のためのボックスモデルハックが必要
・ユーザがブラウザで画像を使用不可CSS有効にしていると、テキストも背景画像も表示されなくなる。

▲このページのトップへ

方法C：Phark方式

非表示にしたいテキストに大きな負のテキストインデントを割り当てる。テキストは画面上に存在するが、最大のモニタでも表示されない範囲にあるという、巧妙な方法。

マークアップ

<h1 id="phark">The Phark Method</h1> 

#phark {
	height: 26px;
	text-indent: -5000px;
	background: url(phark.gif) no-repeat;
	}

The Phark Method

利点：
・追加のマークアップが不要
・スクリーンリーダーがテキストを正常に読み上げる
欠点：
・ユーザがブラウザで画像を使用不可CSS有効にしていると、テキストも背景画像も表示されなくなる。

▲このページのトップへ

ロゴ交換

異なるサイトロゴを提供する。
一．ブラウザがCSSを適切に処理するロゴ（backgroundプロパティで参照）
二．古いブラウザ、ハンドヘルドデバイス、スクリーンリーダーなどに提供するロゴ

マークアップ

<div id="logo">
    <span><img src="logo_lofi.gif" width="173" height="31" alt="Beautifuldays" /></span>
</div>

ホームページに戻るクリッカブルロゴがあるマークアップ

<div id="logo">
    <span><a href="/"><img src="logo_lofi.gif" width="173" height="31" alt="Beautifuldays" /></a></span>
</div>

CSS

#logo img {
	display: block;
	width: 0;　…①
	}
#logo span {
	width: 173px;　…②
	height: 31px;　…②
	background: url(logo_hifi.gif) no-repeat;
	}

①インライン画像の幅を0に設定して非表示にする。このとき、displayプロパティを使用しない。
②置換に使用するロゴと同じ高さと幅を割り当てる。
★次に、画像の幅を0に設定したことにより、なくなったクリッカブル領域を拡大する。 

#logo a {
	border-style: none;　…④
	display: block;
	width: 173px;　…③
	}
Beautifuldays

③クリッカブル領域として設定する幅の値は置換する画像と同じになる。
④リンクした画像の周りに描画されるデフォルトのボーダーを取り除くために設定。

▲このページのトップへ

画像タブのロールオーバー

マークアップ

<ul id="nav">
    <li><a href="/" class="selected">Home</a></li>
    <li><a href="/guides/">Guides</a></li>
    <li><a href="/magazine/">Magazine</a></li>
    <li><a href="/articles/">Archives</a></li>
</ul>

装飾的なものにできるように、<li>要素に固有のidを追加する

<ul id="nav">
    <li id="thome"><a href="/" class="selected">Home</a></li>
    <li id="tguides"><a href="/guides/">Guides</a></li>
    <li id="tmag"><a href="/magazine/">Magazine</a></li>
    <li id="tarchives"><a href="/articles/">Archives</a></li>
</ul>

★ひとつの画像で3つの状態を表示する。
ひとつの状態のタブは20ピクセル高、合計60ピクセルの高さの画像。
background-positionで変更する。
フリッカー（＝ちらつき。2つ以上の画像を切り替えるCSSにおいて、 マウスを乗せた際にスムーズに画像の反転が発生せず、一瞬その画像がちらついて見える状態）を排除できる。

CSS

#nav {
	margin: 0;
	padding: 0;
	height: 20px;
	list-style: none;
	display: inline;
	overflow: hidden;
	}
#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	}
#nav a {
	float: left; 
	padding: 20px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:20px; /*IE5/Winのみが解釈*/
	}
#nav a:hover {
	background-position: 0 -20px;
	}
#nav a:active, #nav a.selected {
	background-position: 0 -40px;
	}

基本的にパディングとリストスタイルをオフにし、リストを水平にして、各ハイパーリンクが設定されたテキストを非表示にする。 :hoverと:activeルールは#nav内にあるすべての<a>要素に適用されるので、各項目ごとに繰り返す必要はない。 list-style:none;とdisplay:inline;が#navおよび#nav liセレクタの両方で繰り返されているのは、Windows版IE5を適切な状態に維持するため。 次に、<li>要素に個々のbackground-imageとwidthを設定。 

#thome a {
	width: 100px;
	background: url(3tab_home.gif) top left no-repeat;
	}
利点：
・マークアップには番号なしリストがあるだけなので、軽量
・スクリーンリーダーがテキストリンクを読み上げるためアクセシブル
・各状態の複数画像をプリロードまたは作成する必要がなく、ホバーエフェクトをコントロールする余分なJavaScriptも不要
・フォントサイズやリンクラベルの長さによっては限られた面積にテキストリンクがうまく収まらない危険性があるが、この方法では画像で表示できるので、その心配がない。

▲このページのトップへ

画像テキストをスケールする

1.大きなテキストラベルの付いたタブ画像セットを作成する。
2.既存の「medium」および「large」代替スタイルシートにルールを上書きする。
3.代替スタイルシートをPaulSowdenのスタイルシートスイッチャーを使って有効化する。（第10章参照） 

h1 {
	#thome a {
	width: 46px;
	background: url(guides_lg.gif) top left no-repeat;
	}

水平方向の間隔はきつくなるが、垂直サイズはオリジナルと同じにする。

互換性

アイテムを完全に整列させるために#navにposition: absoluteを設定し、ヘッダ領域の背景色が透けて見えるようにする。Windows版Opera7を除いて機能する。
Opera7については、絶対配置した要素の幅を指定する必要がある。 

#nav {
	margin: 0;
	padidng: 0;
	height: 20px;
	list-style: none;
	display: inline;
	overflow: hidden;
	width: 201px;
	}

▲このページのトップへ