最近はよくcss spriteで画像を表示することが多くなってきました。
アイコンやボタン画像などをまとめておくと画像リクエスト数が減ってサイトの高速化につながります。ですが私自身、どのタイミングで、どこからどこまで使えばいいかは試行錯誤中です。
css spriteで使用するcssプロパティは結構種類があって、ネットで拾ってきたソースをコピペするだけで内容を理解せずに使いがちなので手書きでも書けるようにcssの中身を調べてみました。
css spriteで使用するプロパティ
使うタグによって使用するcssプロパティは異なるのですが、数が多いので意味を知らずにコピペしてました。
css spriteで何に使っているのかわかりにくいプロパティはざっとこんな感じです。
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
幅や高さ、backgroundプロパティはわかりやすいので省きます。
一個ずつ見てみましょう。
text-indent: 100%;
css spriteでテキストを表示したくない時に使います。
幅を指定した分のテキストをずらします。
width: 200px;を指定している場合、200pxテキストを右にずらします。テキストをボックス外に出すイメージです。
overflow: hidden;
ボックスからはみ出た内容を非表示にします。
text-indentでボックスの外に出したテキストを見えないようにします。
white-space: nowrap;
これが一番馴染みのないプロパティだと思います。
テキストをボックス内で改行しないようにします。
text-indentは一行目しかインデントが付きませんのでテキストが二行にわたってしまった場合に二行目のテキストが画像上に表示されてしまいます。
css spriteを使用するボックス幅よりもテキストが長い場合、テキストが改行してしまいますが、nowrapを指定することでボックス幅による改行を防ぎます。
display: block;
inline要素をblock要素にするために使います。
block要素にすると、幅、高さを持たせることができます。
aタグにcss spriteを使いたいときに使用します。そうでない場合はdisplayは指定なしでOK。
まとめ
css spriteでやっていることはテキストをボックスの外に出して隠すというシンプルなことです。
自分で書いてみて、なるほどーと納得出来ました。
テキスト飛ばしの件があるのでSEO的に少し気になります。でもimgタグ使うよりもhtmlがシンプルになるので検索エンジンも読みやすいんじゃないの？と思ったり。
なるべくcss spriteはテキストを含まないような画像で使うのが良いみたいです。
悩ましいですね～
詳しい使い方はこちらのブログに紹介されてます。すごいです。
