Web学習 【32】 CSSスプライト

更新
2015年01月06日(火)

本文を追記欄に移動

CSSスプライト

 Webクリエイター能力認定試験エキスパートでCSSスプライトが出題されたので、これを機に練習しようと思います。

 まず、「CSSスプライトとは何か?」ということは、既に多くの解説サイトが存在しているのでそちらに任せます。Google「CSSスプライト

 私が参考にしたのは下記サイトです。

Lopan.jp「CSSスプライトについてあれこれ。
Webクリエイターボックス「CSSスプライトで画像を円滑に表示させる

どうやら何種類かの手法があるそうです。

  • text-indentを使った画像置換(Phark Method)
  • text-indentとwhite-spaceとoverflowを使った画像置換(Scott Kellum Method)
  • heightとpaddingとoverflowを使った画像置換(Leahy / Langridge)

サンプル作成

 何はともあれ、実際に作成してみましょう。まずは簡単な画像を用意しました。

cssスプライト サンプル
 縦横150pxの正方形を四つ並べてつなげた、縦横300pxの正方形画像です。

HTML部分

 まずはHTML部分ですが、ここに単純なリスト形式の文字列が二つあります。

 <a>タグを使ってリンクを貼ります。今回はリンク先を用意していないので、リンクなし状態です。

 リストを横並びにするために、liをフロート表示(float:left)にします(親要素ulにoverflow:hidden)。ついでにリストのマーカー(list-style-type)をなし(none)にします。ここは本来CSSに記述することですが、分かりやすいようにHTMLにstyle属性で記述しておきました。

 それぞれにクラス名を与えます。とりあえずリスト全体のクラス名を csssprite それぞれのリスト項目を csssprite_red と csssprite_blue にしておきます。最終的なソースコードは下記になります。

<ul class="csssprite" style="list-style-type:none;overflow:hidden;">
<li class="csssprite_red" style="float:left;"><a href="#">赤</a></li>
<li class="csssprite_blue" style="float:left;"><a href="#">青</a></li>
</ul>

CSS部分

 これをCSSスプライトで装飾していきます。a要素はインライン要素なので、ブロック表示(display:block)にすることで縦横の幅(widthとheight)を指定することができるようになります。そして上記の画像を背景画像(background-image)に設定します。

ul.csssprite li a {
	display: block;
	width: 150px;
	height: 150px;
	background-image:url(http://blog-imgs-70.fc2.com/e/v/o/evolianume/2014030311424806c.jpg);
}

各リスト項目のa要素の背景画像の配置(background-position)を調節します。擬似クラス(:hover)と合わせて四か所になります。画像をずらす方向なので、マイナス数値になります。

li.csssprite_red a{
	background-position: 0 0;
}
li.csssprite_blue a{
	background-position: -150px 0;
}
li.csssprite_red a:hover{
	background-position: 0 -150px;
}
li.csssprite_blue a:hover{
	background-position: -150px -150px;
}

完成

 さて、うまく表示されているでしょうか? まだa要素のテキスト部分を残していますが、このテキスト部分を非表示にするために、text-indentを利用したり、padding-topを利用するところに手法の違いが現れるようです。

 CSSスプライトでどれだけ表示が早くなるか知りませんが、たかだか数枚程度の画像のためにこんな面倒な作業をするのは避けたいものです(笑)

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

EMAIL:
URL:
TITLE:
お~、わかりやすいです!
CSSスプライトは、CSS3だけでは表現できない、アクセント的な画像がたくさんある時とか、ブログで記事ごとに表示するボタンとか、私みたいにギャラリーでサムネイルをたくさん使う時とかに使うのかな。
ほんの少ししか画像がないなら使わない方がいいですよね。
なにより、CSS3によるデザインのみで表現できるようになる方が意義があると思います。
まあ、ページ読み込みが一秒早くなるだけでPVが11%減少とか言われているようなので、webサービス業の人たちが必死になるのもわかります。
宵乃 さんへ
EMAIL:
URL:
回線速度が遅い時代なら分かるのですが、今後は回線速度の向上とともに無くなっていく技術のような気がします。
回線速度以外にも、SEO的には隠し領域があるとスパム判定されるので、あまり良くないという話も聞きますし、alt属性が使えないというデメリットも大きい気がします。
今回実際に作成してみて、面白い仕組みだなぁと感じる反面、労力に見合う価値があるのか疑問に思ってしまいました。試験範囲に含まれているってことは、実務的に必要性があるってことなんでしょうかね。
EMAIL:
URL:
TITLE:
>今後は回線速度の向上とともに無くなっていく技術のような気がします。
わたしのギャラリーくらい画像枚数が多いと劇的な差がありました(笑)
PCの処理能力の問題もありますし、タブレットやスマフォなどをターゲットにしているところでは、画像が多い場合はまだ活用できそうです。
>SEO的には隠し領域があるとスパム判定される
>alt属性が使えない
ダミー画像を使って<img>に直接指定する方法ならどちらもクリアできますよ。それに、CSSスプライトを使うのは、大抵alt属性を使う意味がないような画像かと。
まあ、個人ブログ・サイトではあまり使う必要はないですよね~。
宵乃 さんへ
EMAIL:
URL:
CSSスプライトの確認のがてら宵乃さんのギャラリーを改めて見させてもらいましたが、素敵な絵がいっぱいですね。 気付いたことがあったので、記事の方にコメントさせてもらいました。
自分の環境のせいか、性格のせいか、画像の読み込みの遅さは普段全く気にならないです。まぁ昔の30秒でやっと画像1枚表示される時代を知っているので、慣れているからなのかもしれませんが(笑)

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。