Ads by Google
WEBデザインランキング新しい記事を書く事で広告が消せます。
タグリスト
--.--.--
スポンサー広告
|
|
|
CSSでタイトルを画像に置き換える
WEBデザインランキングタイトルを画像に置き換えるCSSテクニックです。ここではタイトルを使用しますが 他にも使えるテクニックです。
CSSでの画像置き換え
まずはhtmlのソース。
<h1>タイトル</h1>
次にこのh1タグされたタイトルを画像に置き換えるCSSを書き込みます。
h1 {
background: url("title.gif") no-repeat;
height: 100px;
width: 100px;
display:block;
text-indent:-9999px;
overflow:hidden
}
ポイントは
display:block
でブロック要素としているところとtext-indent:-9999px
で既存の文字を吹き飛ばしているCSSです。
必ずCSSで置き換える画像サイズの横幅の
width: 100px;
とたての幅をheight: 100px;
（ここでは仮です。）の値を入れてください。
この場合overflow:hiddenは使わなくてもいいですがfirefoxで画像置き換えした部分をクリックすると
text-indent:-9999px;
で吹き飛ばした部分まで画像があるような処理がとられますので気になる人はこの値も入力したほうがよいでしょう。
ご参考まで。
タグリスト
2007.12.30
CSSについて説明
