cssで画像をプリロード-CSS TIPS
CSSでロールオーバーボタン(マウスが上にくると画像が変わるボタン)を実装する際に、プリロードを行っていないと、マウスオーバー画像が読み込まれるまでに若干のチラツキが発生します。 プリロードはjavascriptで行うの方法が一般的ですが、CSSで行うとデザイン時に同時にプリロードの処理を行うことができて便利です。 (X)HTMLに記述するコード <p class="button"> <a href="#">sample</a> </p> CSSに記述するコード p.button{ background:url("img01/a_img.gif") no-repeat; } p.button a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px;
ちょっとマシな画像置換
「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。 まもるべき条件はつぎの2つ。 HTMLに手を加えず、CSSの変更だけで実現できること CSS有効かつ画像非表示の環境では、もとのテキストが表示されること 一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。 サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。 該当箇所の（X）HTML <div class="secondary-column"> <h2>Appendix</h2> <div class="section" id="categories-archives"> <h3>Categories Archives</h3> <ul> <li><a
画像置換-text-indent-CSS TIPS
画像置換とは、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]を使う方法(1) JavaScriptを使わない、IMGタグとスタイルシートだけのロールオーバー 簡単に説明すると、背景にロールオーバー後の画像を置いておき、マウスが重なったときにはIMGを消してしまうという手法です。 背景として画像が読み込まれているのでキャッシュもされます。 Windows IE5～ Mac IE5 Firefox Netscape7 Safari Opera7～ 対応 (～Opera6はロールオーバーしない) <p><a href="./"><img src="img2.gif" alt="テスト" width="100" height="40"></a></p> p { /*Aタグに高さや幅を指定することが出来ないので親領域で指定する*/ width:100px; heigh
画像置き換え手法(DKIR) サンプル
header title content footer 画像置き換え手法(DKIR) 詳細の解説ページ 画像非表示のときの表示 タイトル部分の画像にDKIRを適用しています。
現在最良の画像置換法（IR[Image Replacement]法） - パソコンＱ＆Ａ
スタイルシート(CSS)で、文字を画像に置き換える手法です。 [参考記事] IMGタグとスタイルシートだけのロールオーバー 単純に<IMG>タグで画像を表示したらいいんじゃないの？って思うかもしれませんが、 それだとHTML文書を変えずに、CSSだけ変えただけでは、<IMG>タグの部分だけはデザインを変えることができなくなり、 CSSを使うメリットが減ってしまいます。 そこでHTML文書ではなくスタイルシートだけで画像を表示させる技術があれこれ考えられてきましたが、 現状では背景画像(background-image)を使用する方法しかないようです。 （本来、背景画像なのであまりよい手法とはいえませんが…） 現時点で考え得る最もよい手法です。 [参考記事] このページよりもっと良い手法がありました。 ページのタイトルバーなどには無駄なタグはなく使える手法です。 このページは海外からのアクセ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
乐山厩荒商贸有限公司
ロールオーバーのテスト2