メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN HTML・CSS TIPS Webデザイン

imgタグを使ったCSSスプライトで画像切替え表示する方法-HTML&CSS小技Tips #001

投稿日:2014年9月19日 更新日:

imgタグを使ったCSSスプライトで画像切替え表示する方法

HTML&CSSの基礎的なTipsを、好きな時に参照出来るようにまとめたもの。
imgタグを使ったCSSスプライトで画像を切替え表示する方法の覚書です。

スポンサーリンク

imgタグを使ったCSSスプライトで画像を切替え表示する

目次

  1. 01 CSSスプライトとは?
  2. 02 スプライト画像を準備する
  3. 03 HTMLとCSSの記述サンプル
  4. 04 まとめ

01 CSSスプライトとは?

CSSスプライトとは、
複数の画像を一枚の画像にまとめて、CSSでポジションを指定して表示をコントロールするCSSの手法です。
複数の画像を1つにまとめて配信することで、サーバーへのHTTPリクエスト回数を減らし、表示を高速化する効果などがあります。

たとえば

アイコン(画像)にマウスを乗せた時に、画像を切り替え表示したい際などに使えます。

dez008_img01

通常CSSスプライトでは、
background-imageプロパティを使って背景画像の表示をコントロールするのですが、表示領域外にテキストを飛ばすことで背景画像のみを表示させる画像置換では、

・テキストを画像に置き換えると、Googleにスパム判定される可能性がある
 ※こちらはテキストを使わなければOK?
・画像が表示されない際に代替テキストを表示するalt属性が使えない
・Webページを印刷する際、ブラウザの初期設定では背景画像が印刷されない

などのデメリットがあるため、imgタグを併用する方法を選びました。

※画像置換については04 まとめに記載した参考サイトページなどを参照してみてください。

02 スプライト画像を準備する

スプライト画像とは、
複数の画像を1つにまとめた画像のことです。

↓こんな感じのやつ

dez008_img02

キャラチョコブックはPhotoShopを使って作成してますが、より効率を追求される方はスプライト画像をオンラインで生成してくれるジェネレーターなんかもあります。

  1. CSS Sprite Generator

さらに

imgタグを併用する方法ではなくbackground-imageプロパティを使う方法だと、SassとCompassを使ってスプライト画像とCSSを自動生成する方法もありますネ。

03 HTMLとCSSの記述サンプル

アイコン(画像)にマウスオーバー時(マウスを乗せた時)画像を切り替え表示するHTMLとCSSの記述サンプルです。

※画像表示サイズ=height: 80px;width: 80px;
※スプライト画像サイズ=height: 80px;width: 160px;

dez008_img03

[HTMLの記述サンプル]

<!-- div要素は各自任意の要素にアレンジする -->
<div class="sample_icon">
	<a href="リンク先のURL">
		<img src="スプライト画像のURL" alt="任意の代替テキストを記述" />
	</a>
</div>

[CSSの記述サンプル]

/* ==========================================
   CSS Sprite
   ==========================================*/
  
.sample_icon {
	display:block;/*←➀*/
	height: 80px;
	width: 80px;
	overflow: hidden;/*←➁*/
}  

.sample_icon a:hover img {
	margin: 0 0 0px -80px;/*←➂*/
} 

[解説]
➀インライン要素の場合は、幅と高さの指定を有効にするため、要素をブロック化する
➁画像表示サイズ外を見えないようにする
➂マウスオーバー時、スプライト画像の位置を左に80px移動する

※サンプルHTMLではdiv要素にクラス名を付与していますが、こちらは各自任意の要素にアレンジください。

04 まとめ

この記事では
imgタグを使ったCSSスプライトで画像を切替え表示する方法をまとめました。

参考サイトページ

  1. CSSスプライトについてあれこれ。

CSSスプライトや画像置換について丁寧に解説されていて参考になります!!

スポンサーリンク

-DESIGN, HTML・CSS, TIPS, Webデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ