[WEB制作]Webページでは、テキストを主体として作成を行います。画像を取り入れた方が、見た目が華やかになって良いですよね。「img要素」を使用して画像を表示する方法もありますが、画像置換というテクニックを使うことも可能です。画像置換とは、テキストを画像に置き換える方法で、ソース上はテキストですがブラウザ上だと画像に置き換わって表示されます。多くのサイトで使われている手法ですから、覚えておくようにしましょう。ここでは、画像置換のテクニックを紹介します。画像置換の最も有名な方法として、「ファークメソッド」と呼ばれるものがあります。これは、「text-indent:-999px;」などと指定して、テキストを画面の外へ飛ばしてしまう方法です。これを使えば、テキストが見えなくなって背景画像だけが表示されます。具体的には、以下のように指定します。-999px;}【HTML】<p>ここにテキストが入る</p>まずは、背景画像を設定して、横幅と高さも指定します。-999px;」と指定すれば、テキストが見えなくなるというわけですね。簡単に画像置換ができる方法なので、広く利用されています。これだと-999pxの大きな領域が作られてしまうので、読み込み速度が遅くなったりなどのパフォーマンスの低下が懸念されます。最近だと別の方法を使用する人が増えているようです。-999px;」によるパフォーマンスの低下を解消する方法として、新しく考案されたのが「スコットケラムメソッド」です。方法としては、背景画像の外にテキストを飛ばしてから、overflowプロパティで消してしまいます。具体的には、以下の通りです。100%;」として要素の幅分だけ右へインデントさせます。それだと改行されて、テキストが要素内に残ってしまいます。nowrap;」と指定することで、改行を禁止させています。hidden;」として、はみ出たテキストを非表示としているわけです。これだと、無駄に大きな領域を作ることもありません。パフォーマンスを下げることなく、画像置換が行えるわけですね。最近だと主流になりつつあるテクニックだといえます。以上、画像置換の方法を紹介しました。CSSの応用テクニックですが、知っておいて損は無いと思います。テキストを隠してしまうので、検索エンジンからスパムと判定される可能性もあります。むやみに乱用するのは避けるようにしましょう。機能性重視のレンタルサーバースペックの高さで選ぶ容量の大きさで選ぶマルチドメイン無制限から選ぶデータベース無制限から選ぶVPSで選ぶWordPress向けで選ぶサポートの充実度で選ぶお得なレンタルサーバーコストパフォーマンスで選ぶ料金の安さで選ぶ初期費用無料で選ぶ個人向けから選ぶ仕事で使うレンタルサーバービジネスサイト向けで選ぶアフィリエイト向けから選ぶネットショップ向けから選ぶアダルト向けから選ぶおススメのレンタルサーバーエックスサーバーロリポップヘテムルさくらのレンタルサーバーハッスルサーバーファイアバードミニバード最近の投稿ホスティングとハウジングの違いとは?レンタルサーバーの転送量制限とは何か?リンクベイト用のコンテンツで被リンクを獲得するSMO対策(ソーシャルメディア最適化)で被リンクを獲得する被リンクを集めやすいコンテンツを作る秘訣サイト内検索サバサバ倶楽部レンタルサーバーの比較や使い方を紹介するサイトです。Reserved.このページの先頭へ。