テクノロジー・動画・写真・デザインとか

CSSスプライトのつまずき「リピート」に対処するコツ

GWの前半はサイトの高速化を図るためにCSSスプライトでのコーディングを久々にやってみたが、CSSスプライトのリピートで少しつまずいたので、そのコツをちょいと紹介。

CSSスプライトは複数の画像を一枚にまとめてCSSで細かく指定

CSSスプライトは、様々なアイコンなどを一つの画像にまとめることでサーバーのリクエストを減らして高速化を図れ、例えばこんな風に様々な画像を一枚にまとめて、CSSで個々の画像を指定していくわけだ。
CSSスプライトとは

基本的な使い方などの詳細については、WebクリエイターボックスさんとLopanさんあたりで詳しく紹介されているので、そちらをどうぞ。

CSSスプライトはリピートには向かない!?

スプライトさせたいイメージ

うちのサイトの右サイドエリアにあるタイトルバーは、背景画像に斜めのボーダーを入れていて、横にリピートすることを想定した。
cssスプライトは、リピートが不得意

続きを読む

リピートのダメな例

んで、先ほどのまとめた画像をrepeat-xでリピートさせようとすると、こんな感じになってしまう。
CSSリピートのダメな例

確かに、Webクリエイターボックスさんがデメリットとして背景画像のリピート表示ができないと記載しているのだが、うちのサイトでは数カ所リピートさせている箇所があるので、CSSスプライトでまとめられないのかとGoogle先生に聞いたり、唸って考えてみた。

リピートのコツ

あ、そっか!

と、出た答えはこれだ。
リピートのコツ

①端から端までをリピート画像で埋める

先ほどの「リピートのダメな例」で示した問題は、リピートさせたい画像の横に余計なアイコンや余白があったために起きている。
なので、横のアイコンや余白が無いように、端から端まで画像をリピートさせておくことで解決できる。
①端から端までをリピート画像で埋める

②heightの縦幅、またはwidthの横幅の長さは固定

通常CSSで指定が何もなければ背景に設定された画像は、上下左右にリピート表示される。

なので今回のように横にリピートの場合、余白や他の画像も一緒にリピート表示されないようにタイトルバーの高さのプロパティは指定する必要がある。

今回、タイトルバーのh3タグの高さのプロパティを下記のように指定している。
height:28px;
②heightの縦幅、またはwidthの横幅の長さは固定

逆に言えば、可変する長さには使えないのである。

③個々の画像を縦、又は横一列に画像を配置

リピート画像のメリットは、リピート内容によっては1pxから可能なので、画像のサイズをなるべく小さくしたい。
なので、ここでは少し長いロゴを別画像として切り離し、FacebookやTwitter、Googleなどのアイコンの横幅サイズに合わせて、縦一列に配置した。


・横にリピートする場合には、画像を縦一列に配置
・縦にリピートする場合には、画像を横一列に配置

③個々の画像を縦、又は横一列に画像を配置

④余白を入れることで修正が容易になる

CSSスプライトの場合、画像の修正が面倒だったりするが、余白を入れておくことで修正が容易になり、余白があっても問題ない箇所であれば多少の可変する箇所に指定することも可能だ。
④余白を入れることで修正が容易になる

Yahoo!さんのCSSスプライト画像も参考にするといいだろう。
http://k.yimg.jp/images/top/sp/logo.gif
http://k.yimg.jp/images/top/sp2/clr/1/clr-130327.png

⑤条件付きで最末端の画像は、可変する長さに使用可能

上記の③でheightやwidthの可変する箇所には使えないと述べたが、実は条件付きで1箇所だけCSSスプライトの画像を可変する箇所に利用する方法がある。

条件1

それが、スプライト画像の最末端にある画像だ。
例えば、高さのパロパティを指定しないとその画像以下に余白や画像がある場合には、それ全体がリピートされるはずだが、最末端なのでリピートのしようがないということだ。

当サイトではCSSのサイト設計が失敗しており、そのお陰で逆に知ることが出来た方法だが、bodyのプロパティにもCSSスプライトで画像をリピートさせている。
青いラインの部分で、こんな感じで指定しているだけだ。
background:url(common_repeat_img.png) 0 -405px repeat-x #f2f2f2;
CSSスプライトの例外的な使い方

条件2

上記のように青いラインの位置が固定であれば可能だが、下記のタイトルのようにボトムにある斜めのボーダーのように、タイトルの長さによって常にボトムのボーダーが移動するのは、やはり不可能だということだ。
条件2

最終的には、この3つの画像に収まった。
common_repeat_img logo bg-slash