WEB系求人広告にも出ていることだしCSSスプライトをおさらいしてみました！

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（≒縦位置）にあたる値」を調節します。

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;  }  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;}    }