スタイルシート(CSS)で、文字を画像に置き換える手法です。
[参考記事] IMGタグとスタイルシートだけのロールオーバー
単純に<IMG>タグで画像を表示したらいいんじゃないの？って思うかもしれませんが、
それだとHTML文書を変えずに、CSSだけ変えただけでは、<IMG>タグの部分だけはデザインを変えることができなくなり、
CSSを使うメリットが減ってしまいます。
そこでHTML文書ではなくスタイルシートだけで画像を表示させる技術があれこれ考えられてきましたが、
現状では背景画像(background-image)を使用する方法しかないようです。
（本来、背景画像なのであまりよい手法とはいえませんが…）
現時点で考え得る最もよい手法です。
[参考記事] このページよりもっと良い手法がありました。
ページのタイトルバーなどには無駄なタグはなく使える手法です。
このページは海外からのアクセスが多いので英語版ページです。For English
CSSが使用できないブラウザではテキストとして表示されます。
CSSが使用できて、画像を表示しない設定になっていた場合にはテキストが表示されます。
JavaScriptは使用していません。
音声ブラウザで正しく読まれる（はずです）。
空タグがないのでValidator・HTMLチェックスクリプトに通ります。
スタイルシートだけで画像を変更することができます。
IE5以上、Netscape6以上、Firefox、Opera6、Safariに対応。
欠点
透明画像は使えません。
（画像に隠れるように文字位置を工夫するといいです）
文字の大きさを大きくすると画像の下からはみ出して見えます。
（大きくしても画像に隠れるように若干文字を小さくするといいですが、ユーザーには×）
解決策はページ最下部
Kikky Method
HTML文書
CSS無効または画像非表示で表示される 画像の内容[altにあたる]
CSS無効で表示される 画像の追加説明[titleにあたる]
CSSスタイルシート
width:155px;/*画像の幅*/
height:55px;/*画像の高さ*/
position:relative;/*外枠を相対位置に指定*/
font-size:70%;/*背景にある文字を小さく*/
/* \*/
overflow: hidden;/*文字がはみ出ても隠れるようにする*/
/* */
}
h2 b{
background:url(img/method.gif) no-repeat;/*画像を表示*/
width:100%;/*外枠の幅と同じに設定*/
height:100%;/*外枠の高さと同じに設定*/
position:absolute;/*外枠からの絶対位置に指定*/
top:0;/*外枠の上に合わせる（IE6対策[指定なしだと上に隙間ができる]）*/
left:0;/*外枠の左に合わせる（IE6対策）*/
text-indent: -9999px;/*画像位置の文字を画面外へ*/
z-index:1;/*Opera 5、Opera 6用の設定*/
}
例
キッキーメソッドKikky Method
画像が表示できないときは下のようになります。
HTML文書
CSSスタイルシート
width:155px;
height:55px;
position:relative;
font-size:70%;
/* \*/
overflow: hidden;
/* */
display:block;/*Aタグはインライン要素なのでブロック要素に変更*/
text-decoration: none;/*下線を消す(Netscape7対策)*/
}
a b{
background:url(img/method.gif) no-repeat;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:block;/*Bタグはインライン要素なのでブロック要素に変更*/
text-indent: -9999px;
font-size: 0;/*文字を最小にする*/
line-height: 0;/*行の高さを消す（Firefoxでのリンク領域対策）*/
cursor: pointer;/*マウスオーバーで指マークにする（IE6対策）*/
z-index:1;
}
Gilder Levin Method(ギルダー・レビンメソッド)
無駄な<SPAN>ができます。
Kikky Methodと同じように透明画像は使えませんし、文字の大きさを大きくすると画像の影から文字が見えます。
HTML
CSS
position:relative;
margin:0px; padding:0px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.gilderlevin2 span{
display:block;
position:absolute;
top:0px;
left:0px;
z-index:1; /*for Opera 5 and 6*/
}
#gilderlevin, #gilderlevin span{
width:155px;
height:55px;
background-image: url(img/method.gif);
}
例
ギルダーレビンメソッド
Kikky MethodとGilder Levin Method両手法で文字を大きくしたときの対策です。
設置場所の背景に単色の背景画像を設置します。
文字色を背景画像の色に合わせます。
そうすると文字が大きければ、背景画像の色で隠れますし（MacIE5）、画像が表示できなければ背景画像もなくなるので文字だけが見えます。
IE6ではマウスオーバーで画像を変える場合、マウスが離れても画像が戻りません。
IE5ではマウスオーバーで画像を変えるようにしても、クリックしたときしか画像が変わりません。またマウスポインターも出ません。
IEで画像を変えるようにするには、bタグだけではなくてaタグにもhoverの設定をすることで回避できます。
また文字を中央に揃えたいときにはtext-align:centerとline-height:【画像の高さ】を指定するようにします。
padding-topを使うとIE5、IE6(互換)でずれます。
[参考記事] ボックスの幅や高さがおかしい
IEではリンクがあるときにマウスオーバーしてもステータスバーにアドレスが表示されません。
spanタグを使う手法が一般的ですが、リンクの場合にspanタグを使うとMacIEではリンクできません。
そのためここではbタグを使っています。
[参考記事] SPANタグをposition:absoluteするとリンクできない
spanタグを使いたい人はPhark Methodと組み合わせるのがいいでしょう。
MacIEのみPhark Methodを使う感じです。
MacIEにだけスタイルシートを適用させるハックです。
【Phark Method】
/* */
MacIEだけ除外するハック。
【Kikky Method】
/* */
Netscape 7は
などの指定はできません。
[参考記事] 背景位置に種類の違う指定法を混ぜると無視される
CSSが使えて、画像が使えない環境は
携帯端末のフルブラウザでパケット料を考えて画像を表示しないようにしている場合
ページ印刷のときに背景画像を印刷しない設定にしている場合（標準設定）
[参考記事] 背景画像も印刷できるようにする設定
[参考記事] 印刷できる画像をCSSで表示させるには
相対配置されるBタグやSPANタグは先頭に書くようにしてください。そうしないとMacIE5で表示がずれます。
Gilder Levinのページでも説明は後半に書くようになってますが、実際のHTML文書は先頭に書かれています。
[参考記事] 相対配置の後に続く要素がずれる
未解決の問題
右クリックして「新しいウインドウで開く」ができません。buttontタグで『MacIEでCSS有効で画像OFFの問題』
標準の設定では印刷が出来ません。[参考記事]
BUTTONタグ
Firefoxではbuttonタグをposition:relative;にして、そのなかにposition:absolute;したbタグを置いた場合、表示がかなりずれます。
それ以外のブラウザではちゃんとできるので困ったものです。
仕方ないのでbuttonタグをposition:relative;にしないで、position:relative;にしたspanタグを入れ、さらにそのなかにposition:absolute;したbタグを置くという力技です。
これでほぼできます。
『ほぼ』というのはクリックするとわかると思うのですが、若干ずれてます。
またIE6では、hoverはaタグにしか使えないので、マウスオーバーしても（ロールオーバー）画像は変わりません。
あと１つ困ったことにMacIEではBUTTONタグの場合、Bタグを使用してもクリックできないんです。
これにはMacIEにだけ適用させるハックを使って、SPANタグとBタグをdisplay:none;にします。
MacIEでCSS有効で画像OFFの場合は問題が出ますが…
HTML
CSS
margin: 0;
padding: 0;
width: 100px;
height: 40px;
display: block;
border:none;
background-color:transparent;
font-weight:bold;
/* ¥*//*/
background:url(../img/css_ir.gif) no-repeat 0 0;
/* */
}
/* ¥*/
button#kikkymethod05 span {
margin: 0;
padding: 0;
width: 100px;
height: 40px;
display: block;
border:none;
cursor:pointer;
background:url(../img/css_ir.gif) no-repeat 0 0;
position:relative;
overflow: hidden;
}
button#kikkymethod05 span b{
display:block;
background:url(../img/css_ir.gif) no-repeat 0 0;
width: 100px;
height: 40px;
position:absolute;
top:0;
left:0;
z-index:1;
cursor: pointer;
}
/* */
/* ¥*//*/
button#kikkymethod05 span,button#kikkymethod05 span b{
display:none;
}
/* */
button:hover#kikkymethod05 span,button:hover#kikkymethod05 span b{
background-position: 0 -40px;
}
最終的な手法
空SPANがHTMLのValidatorに引っかかるのかと思ってましたがそうではないようなので、Gilder Levin Methodのほうを薦めます。
ただ内容のないものにリンクを張るのはちょっと怖いので、そんな人はKikky Methodを使ってください。
CSSを使う上での満たしたい条件
(1)CSS無効でも正しく表示される。
(2)CSS有効で、画像表示OFFでもなんとかなる。
(3)Tabキーで移動しても、フォーカスがわかるようにする。
(4)音声ブラウザでも閲覧できるようにする。
(5)文字の大きさを変更しても見栄えを保つ。
など
MacIE5で文字の大きいときに対応させるには、さらにブロック要素で囲んで、
/*¥*//*/
overflow: hidden;
display:inline-table;
/**/
を指定します。
SPANタグを使ったKikky Method MacIE5ではリンクできません。
SPANタグを使ったGilder Levin Method MacIE5ではリンクできません。
Bタグを使ったKikky Method
a#method,a#method b{
display:block;
background:url(img/method.gif) 0 0 no-repeat;
width: 100px;
height: 40px;
}
a#method{
position:relative;
/* ¥*/
overflow: hidden;
line-height:40px;
/* */
text-align:center;
/* ¥*//*/
font-size:10px;
/* */
}
a#method b{
position:absolute;
top:0;
left:0;
z-index:1;
cursor: pointer;
font-size:0;
line-height: 0;
text-indent: -9999px;
text-decoration: none;
}
a:hover#method,a:hover#method b{
background-position: 0 -40px;
}
testマウスオーバーのテスト
Bタグを使ったGilder Levin Method
a#method,a#method b{
display:block;
background:url(img/method.gif) 0 0 no-repeat;
width: 100px;
height: 40px;
}
a#method{
position:relative;
/* ¥*/
overflow: hidden;
line-height:40px;
/* */
text-align:center;
/* ¥*//*/
font-size:10px;
/* */
}
a#method b{
position:absolute;
top:0;
left:0;
z-index:1;
cursor: pointer;
}
a:hover#method,a:hover#method b{
background-position: 0 -40px;
}
透過画像を使うならPhark Method
Phark Method
HTML
CSS
width: 100px;
height: 40px;
text-indent: -9999px;/*文字を画面の左に飛ばす*/
background:url(../img/css_ir.gif) no-repeat 0 0;
}
WindowsIE5では表示されません。
そこでtext-indent: -9999px;を使わないで、font-size: 0;にしたり、line-heght:0;にしたりしてもIEでは１ピクセルの文字になってしまうので、
わかりにくいように文字色を背景画像の色と同じにして隠してしまう手法もあります。
しかしOpera、Safariでは文字の最小は６ピクセル程度なので文字を背景画像で隠せないときは、スタイルシートを分けるしかありません。
[参考記事] CSSのブラウザ振り分け
[参考記事] IEの条件付コメント
Phark Method
HTML
CSS
width: 100px;
height: 40px;
text-indent: -9999px;
background:url(../img/css_ir.gif) no-repeat 0 0;
}
CSS（IE5.5以下用）これは通常ブラウザ用CSSの後に書く
text-indent: 0;/*text-indentを既定に戻す*/
font-size: 0;/*文字を最小にする*/
line-height:0;/*とりあえず高さも最小にする*/
text-align:center;/*文字を隠しやすいところに移動する*/
color:#c6f;/*文字色を背景画像の色と同じにする*/
}
Aタグ用の指定
HTML
CSS
display: block;/*Aタグはインライン要素なのでブロック要素にする*/
width: 100px;
height: 40px;
text-indent: -9999px;
background:url(../img/css_ir.gif) no-repeat 0 0;
font-size: 0;/*Firefox1.5以上のフォーカス領域対策*/
text-decoration: none;/*Netscape7.1のリンク下線対策*/
}
a:hover#pharkmethod{
background-position: 0 -40px;
}
CSS（IE5.5以下用）これは通常ブラウザ用CSSの後に書く
text-indent: 0;
line-height:0;
color:#c6f;
text-align:center;
}
a:hover#pharkmethod{
color:#06f;
}
この手法を使うより、画像を工夫したほうがいいです。
単にJavaScriptを使わないでロールオーバーがしたいだけならIMGタグを使うべきだと思います。
[参考記事] IMGタグとスタイルシートだけのロールオーバー
デザインの為のタグをHTMLに書くなら、CSSを使わなくてもIMGにした方がよいと思います。
１つのことでもいくつかの手法がありますし、最良の方法はやはり状況によって違いますので臨機応変に手法を選択するといいです。
