Webデザインをする上でページ内で画像を使って表現したいものが多い場合、ユーザーのネット環境が悪かった場合のことを考えると、削減すべきはまさに「画像」そのものです。
容量、リクエスト数…
JPEGminiやTinyPNGなんかよく使って容量は軽くするんですけど、リクエスト数もしっかり考えましょう！ということでCSS Sprites（CSSスプライト）をおさらいします。
CSSスプライト とは？
CSSスプライトとは、Webデザインにおける技法の一種で、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示する手法のことである。
まさにこの通りです。
大手サイトなんかでも使われています。
例えばYoutubeも、ロゴやアイコンが一枚の画像で出来ています。
特にこういう、機能がたくさんあるサイトでは「親指を立てていいる＝好評化」な直感的な表現をしてる箇所など、読み込み速度の都合で表示されていないと
「あれ！この動画、超～イイのにドコ押せばこの気持ちを表現できるんだ！？ヌゥゥゥ！」
などとユーザーの損気を招きかねません。
しかしCSSスプライトを使うことで、複数のリクエストではなく1度のリクエストで、必要箇所の画像を読み込めるのです！
CSSスプライトのやり方
表示したいサイズ分だけwidthとheightを指定します。
背景に、必要な画像を1枚にした「CSSスプライト用の画像」を指定し、
background-positionプロパティを使って背景の表示位置を動かします。
CSS – background-position
ここで大事なのは、もともとあるテキストや要素をどう非表示にするか、というポイントです。
いくつかあるので、軽く説明していきます。
text-indent
.title1{ display:block; width: 500px; height: 60px; background: url(CSSスプライトでまとめた画像のURL) text-indent: -10000px; overflow: hidden; }1つのプロパティでテキスト、要素を非表示にできてしまうので、一番楽です。
しかし、テキストを横なり縦なりにぶっ飛ばしたことで、膨大なサイズの要素を生成していることになるので、パフォーマンスに影響が出るとのことです。
text-indent white-space
.title1{ display:block; width: 500px; height: 60px; background: url(CSSスプライトでまとめた画像のURL) text-indent: 100%; white-space: nowrap; overflow: hidden; }先ほどのと違い、text-indent:100%;で要素の幅分だけしかインデントしないので、要素のサイズとしてはコンパクトに収めることができます。
しかしそのままだと、テキストの大きさと比べ要素の高さに余裕がある場合に改行されて残ってしまいます。
というわけでwhite-space:nowrapで改行をしないように、overflow:hiddenではみ出した領域を非表示にします。
height padding
.title1{ display:block; width: 500px; height: 0px; padding-top: 60px; background: url(CSSスプライトでまとめた画像のURL) overflow: hidden; }高さを0に指定します。
padding-topに表示したい領域の分だけ指定し、幅をもたせます。
するとテキスト、要素がはみ出して背景のみになるというカラクリですね。
どれにせよ、SEOだったりサイトの概要をクローラーに把握してもらうために、HTML上は要素の中にテキストを入れておいたほうが良いです。
CSSスプライトを実装
background-positionプロパティの値を指定して、各要素の表示を変えていきます。
CSS – background-position
このプロパティの仕様は、位置を数値で指定していない場合は画像の一番左上が表示されます。それを念頭に置いた上で実装していきます。
ちなみに僕の場合ですが、CSSをスプライト用の画像の中にそれぞれ縦に並べることが多いです。
この画像を使って試してみます。
HTMLはこのようになっています。
- アイコン1
- アイコン2
- アイコン3
- アイコン4
- アイコン5
- アイコン6
背景を指定しただけだとこんな感じ。
background-positionを指定していないデモページ
CSS
ul { width: 380px; display: block; margin: 0 auto; } ul li { width: 55px; height: 0; padding-top: 55px; margin-right: 10px; overflow: hidden; list-style: none; float: left; background-image: url(spr.png); background-repeat: no-repeat; } ul li:last-child { margin-right: 0; }
background-positionを変更してみましょう。
上記の通り、アイコンは縦に並んでいます。なので、background-positionの「y（≒縦位置）にあたる値」を調節します。
CSS
ul { width: 380px; display: block; margin: 0 auto; } ul li { width: 55px; height: 0; padding-top: 55px; margin-right: 10px; overflow: hidden; list-style: none; float: left; background-image: url(spr.png); background-repeat: no-repeat; } ul li:last-child { margin-right: 0; } ul .icon1 { background-position: 0 0; } ul .icon2 { background-position: 0 -55px; } ul .icon3 { background-position: 0 -110px; } ul .icon4 { background-position: 0 -165px; } ul .icon5 { background-position: 0 -220px; } ul .icon6 { background-position: 0 -275px; }
LESSで演算を使って書くと、画像や要素の大きさが変わっても変数の値を1度変更するだけなのでラクかもしれません。
LESS
ul{ width: 380px; display: block; margin: 0 auto; li{ width: 55px; height:0; padding-top: 55px; margin-right: 10px; overflow: hidden; list-style: none; float: left; background-image: url(spr.png); background-repeat: no-repeat; } li:last-child{margin-right: 0;} @bgpos: 55px; .icon1{background-position: 0 0;} .icon2{background-position: 0 -@bgpos;} .icon3{background-position: 0 -@bgpos*2;} .icon4{background-position: 0 -@bgpos*3;} .icon5{background-position: 0 -@bgpos*4;} .icon6{background-position: 0 -@bgpos*5;} } CSSスプライトの注意点
複数の画像を1枚に集約するわけですが、実際に表示されるサイズを想定して配置するのが吉ですね！
それと、似た要素ごとに分けて作っていくと実装しやすいかもしれません。
例えば、アイコンは「icon-sprites.png」に、見出しの背景は「titlebg-sprites.png」に…など。
以上、LESSを絡めて実装してみました。
たまに求人広告にも、「求めているスキル」欄に書かれているので、使わなくともカラクリは覚えておいて損はないです！
でわ！
