画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。 画像置換の仕方 たとえば以下のような(X)HTMLソースがあります。 <p>とあるWEBクリエイターのblog</p> この(X)THMLソースに以下のようなCSSを適応させるとにより、テキストを画像で表現することが可能です。 p{ width:400px; height:50px; text-indent:-9999px; background:url("logo.gif") top left no-repeat; } サンプル ロールオーバーイメージ 画像置換がクローズアップされたのは、JavaScriptを使わずにCSSのみでロールオーバーイメージ(マウスが上にくると画像が変わるテクニック)を行うことができたからです。 ロールオーバ
スタイルシート(CSS)で、文字を画像に置き換える手法です。 [参考記事] IMGタグとスタイルシートだけのロールオーバー 単純に<IMG>タグで画像を表示したらいいんじゃないの?って思うかもしれませんが、 それだとHTML文書を変えずに、CSSだけ変えただけでは、<IMG>タグの部分だけはデザインを変えることができなくなり、 CSSを使うメリットが減ってしまいます。 そこでHTML文書ではなくスタイルシートだけで画像を表示させる技術があれこれ考えられてきましたが、 現状では背景画像(background-image)を使用する方法しかないようです。 (本来、背景画像なのであまりよい手法とはいえませんが…) 現時点で考え得る最もよい手法です。 [参考記事] このページよりもっと良い手法がありました。 ページのタイトルバーなどには無駄なタグはなく使える手法です。 このページは海外からのアクセ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く