目次
この章について
今回使用した画像は下記からダウンロードできます。
bg-sprite
CSSスプライトとは
複数の画像をひとつの画像にまとめてbackground-positionプロパティで位置をずらしながら表示させる方法です。画像の数が増えると、その分サーバへのリクエストが増えます。画像をまとめることで読み込み回数を減らすことができ表示スピードを上げることができます。background-positionで位置をずらす時に、縦に並んだ画像は上にずらしていきます。横に並んだ画像は左にずらしていきます。そのためマイナスで値を指定するのがポイントです。
下記は参考例です。アイコンサイズは20 x 20px、上下の余白は10pxです。
使用画像
<ul class="sprite">
<li class="sprite-icon01">矢印</li>
<li class="sprite-icon02">注意</li>
<li class="sprite-icon03">メール</li>
</ul>
.sprite{
list-style: none;
margin-left: 100px;
margin-top: 30px;
}
.sprite li{
height: 20px;
line-height: 20px;
font-size: 20px;
margin-bottom: 20px;
padding-left: 25px;
background-image: url(images/sprite.png);
background-repeat: no-repeat;
}
.sprite-icon01{ background-position: left 0; }
.sprite-icon02{ background-position: left -30px; }
.sprite-icon03{ background-position: left -60px; }
CSSスプライトに適した画像
アイコン、背景画像、メニューなど画像の更新があまりないものが向いています。メインビジュアルなどで大きい画像や更新されやすい画像には向いていません。CSSスプライトは更新の際に画像を編集する必要があるため追加更新にはあまり向いていないからです。
画像置換とは
画像置換とはHTML内のテキストを非表示にし、その範囲を背景画像へと置き換えるCSSの手法です。最近はあまり使われなくなりましたが、以前はSEO対策として利用されたテクニックです。SEO的に画像のalt属性のテキストよりナチュラルなテキストの方が有利とされていたために考えだされたテクニックです。
注意点としては背景画像内のテキストと非表示にするHTMLのテキストの内容を同じにしておくことです。テキストを意図的に非表示にするのは検索サイトでは基本的にNGのため、画像のテキストと非表示のテキストを合わせることでペナルティを回避します。
ナビゲーションやボタンなどhover表示が必要な背景画像はCSSスプライトを利用します。通常時とhover時の画像を別にすると、カーソルがボタンに重なった際に一瞬チラつきが発生します。これはマウスが重なった時にhover時の背景画像がサーバから呼び出されるため遅延が発生するからです。
下記のボタン画像で画像置換を行ってみます。2つの手法を紹介します。
text-indent: -9999px;を利用した画像置換
テキストをtext-indent: -9999px; で要素外に移動させて、テキストを非表示にするテクニックです。text-align: left; は左ぞろえに指定しておくことでtext-indent: -9999px; で左方向に移動させるためです。overflow: hidden; は要素外に移動させたテキストを非表示にする役割とフォーカスエリアの線を要素内に表示させる役割があります
<p class="btn"><a href="#">button</a></p>
.btn{
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.btn a{
display: block;
overflow: hidden;
width: 400px;
height: 60px;
background-image: url("images/btn-sprite.png");
background-repeat: no-repeat;
background-position: left top;
text-align: left;
text-indent: -9999px;
}
.btn a:hover{
background-position: left bottom;
}
heightとpaddingを利用した画像置換
高さを0にしpadding-topで高さを確保するテクニックです。テキストはpadding-topで要素外に押し出されます。overflow: hidden; は要素外に押し出したテキストを非表示にする役割とフォーカスエリアの線を要素内に表示させる役割があります。
<p class="btn"><a href="#">button</a></p>
.btn{
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.btn a{
display: block;
overflow: hidden;
width: 400px;
height: 0;
padding-top: 60px;
background-image: url("images/btn-sprite.png");
background-repeat: no-repeat;
background-position: left top;
}
.btn a:hover{
background-position: left bottom;
}
フォーカスとは
ブラウザでWEBサイトを表示した際、tabキーを押すとリンクのある箇所に枠線が表示されます。これを「フォーカス（focus）」と言います。
下記のボタンのまわりの青い線がfocusです。線種や太さ、色はブラウザにより異なります。
まとめ
- CSSスプライトとは複数の画像を1枚にまとめたものをbackground-positionで位置をずらして表示するテクニック
- 画像置換はhtmlのテキストを背景画像に置き換えるテクニック
- 画像置換を使うときにはhtmlのテキストと背景画像のテキストを同じにする