BLOG

CSS Sprite

CSS Spriteは、画像が背景になってしまうので、
印刷した時に(標準設定では)印刷されないから使いにくい。

と、思っていたら、最近では色々な方法があって、
画像が印刷されるものもあることを、先日知りました。
最初の好き嫌いで判断して、中身を見ずに居たら、駄目ですね。

CSS Spriteの方法は色々ありますが、検索エンジンスパム的扱いを受けると怖いので、
Googleで使われているものなら大丈夫だろうと、
現在Google検索結果の左上ロゴで使われているものについて調べてみました。

以下は、忘れそうな自分の為のメモです。

■ HTML ====================

<a href="index.html">テキスト<img src="images/aaa.jpg" alt="" width="200" height="100" /></a>

■ CSS ====================

a{
display:block;
position:relative;
width:200px;
height:50px;
overflow:hidden;
}
img{
position:absolute;
left:0px;
top:0px;
}

aをブロック表示にして、表示させたい画像の幅と高さを指定、
overflow:hidden;で、表示させたくない部分は非表示に。
imgのposition:absolute;で、テキストの上に画像が重ねられる。

これをロールオーバーさせる場合は、少し書き加えて

■ HTML ====================

<a href="index.html">テキスト<img src="images/aaa.jpg" alt="" width="200" height="100" /></a>

■ CSS ====================

a{
display:block;
position:relative;
width:200px;
height:50px;
overflow:hidden;
}
a:hover{
zoom: 1;
}
img{
position:absolute;
left:0px;
top:0px;
}
a:hover img{
left:0px;
top:-50px;
}

で、出来ました。

IE6・IE7でロールオーバーが動かず、悩んでいたのですが、
背景画像を使わずにCSSスプライトをする方法 | アルペジオのように
http://likearpeggio.blog63.fc2.com/blog-entry-223.html

を参考にしてa:hover{ zoom: 1; }で追記した所、動きました。助かりました。

ご相談・お問合せ

ホームページに関すること等はお気軽にお問合せ下さい

東京・大阪を中心に全国のお客様に対応しております。
弊社から遠方にあたるお客様とは、Mail、TELにてやり取りさせて頂いておりますが、必要に応じ遠方であってもご訪問させて頂いています。

お問い合わせフォームへ

page top