【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

29Jan2012

メニューボタンを作りなおしてサイト高速化[CSS sprite]

今回はCSS spriteと呼ばれる手法で、トップメニューを作ってみます。

CSS spriteとは、複数の画像パーツを一つの画像として読み込みCSSで表示位置を調節する手法です。

言葉だと意味不明なので、実例を紹介しましょう!

現在(2012.01)、PetitCottageのトップメニューはCSS spriteで製作しています。
CSS sprite

CSSのみで動きを制御している一般的なメニューボタンですが、使用している画像は以下の1枚だけです。

CSS spriteの作り方と使い方

1. CSS spriteのメリット:目的はサイト高速化ただ一つ!!

メリット:ページ表示速度が体感できるほど早くなる

デメリット:作成、更新時の作業が負担になる(と言う人もいる)

特徴
・CSSのみで動作
・画像の読み込み(HTTPリクエスト)を劇的に減らせる
・画像1個のサイズは大きくなるが、全体のサイズは小さくなる
・作成・更新時の作業が複雑になる
・背景画像として表示するのでaltタグが使えない

CSS spriteはページ表示の高速化を狙って考案された手法です。

PetitCottageの例では、通常の方法だと18個の画像を読み込むところ、CSS Spriteでは1回の読み込みで完了します。

JaveScriptで製作されたメニューボタンをCSS spriteで作りなおすだけで体感できるほど表示速度が改善されます。

デメリットとして作成・更新時の負担を挙げる人もいますが、一度慣れてしまえば逆に更新が楽になる場合もあると僕は考えています。

一度に複数画像を編集できますし、HTMLの編集も非sprite時とさほど変わりません。
何よりも乱雑になりがちな画像フォルダ内がスリム化されます。(先の例だと画像ファイル数18個→1個に)

2. CSS sprite シンプルなボタンの作り方

まずはこちらのシンプルなボタンを作って、基本を確認してみましょう。

ここからはマウスオーバーで変化するボタンの実例を出しながら話を進めます。
“マウスオーバー”が存在しないスマホでは意味不明になりますので、あしからず。

サンプルボタン

2.1. 画像の準備とHTML

CSS sprite画像の作成方法

ボタン部分のHTMLコーディングを行います。
作例ではリンクボタンなのでAタグにしていますが、Hタグ・Pタグなど、他のタグでも大丈夫です。

サンプルボタン

2.2. CSSのコーディング

#sprite {
	display:block;  // Aタグはインライン要素なのでブロック要素にする
	width:143px; // ボタン一個の幅 (画像ではなく)
	height:31px; // ボタン一個の高さ (画像ではなく)
	background-image:url(../csssprite.gif); // 画像のパス
	background-position:center top; // 通常時は背景画像を上に移動
}
#sprite:hover {
	background-position:center bottom; // マウスオーバー時は背景画像を下に移動
}

2.3. CSS spriteの仕組み

css sprite の仕組み
今回作った例は、上のように背景を「top-bottom」と移動させる一番シンプルな方法です。

このように一つのボタンに使う通常画像・マウスオーバー画像をCSS spriteで作成するのは、一番効果的な使い方だと思いますのでどんどん活用してください。

3. 3つ以上の画像をまとめる場合の作り方

3つ以上の画像を使う場合は、top-bottomだけの簡単な指定は使えなくなります。
その場合は、このようにピクセル指定します。

#sprite {
	~省略~
	background-position:0px 0px; // 右方向の距離 下方向の距離
}
#sprite:hover {
	background-position:0px -50px; // 右方向の距離 下方向の距離
}

表示領域からみて背景画像の位置を指定するため、マイナスの値になる点に注意が必要です。

ピクセル指定する場合の注意点 CSS sprite

ここまででお気づきでしょうが、画像内のボタンの位置をそのままマイナスにすればいいだけです!

ピクセル指定の法則 css sprite

4. テキスト不使用 画像ボタンの作り方

4.1. CSS spriteでテキストを表示しない方法

今回作成したボタンはテキストを使用していますが、広く使われているボタンはこのような画像ボタンだと思います。

画像ボタン

しかしAタグで作成している為、テキストを削除したら空タグになってしまいます。

そこでtext-indent:-9999pxを使い、テキストを画面外に飛ばす方法が使われます。

メニュー
#sprite-img {
	text-indent:-9999px // テキストを-9999px移動させる(画面外に飛ばす)
	display:block;
	width:143px;
	height:31px;
	background-image:url(../csssprite-img.gif);
	background-position:center top;
}
#sprite:hover {
	background-position:center bottom;
}

4.2. テキストを画面外に飛ばしてもSEOスパムにならない?

SEOという言葉が使われ始めた頃からweb製作をしていた人間にとっては、2012年になってまだこんな話はしたくないのが本音ですが一応補足します 笑

text-indent:-9999pxを指定してテキストを画面外に飛ばすこと自体はスパムではありません。
当然、今回のようにCSS spriteで背景画像を表示させるためにテキストを飛ばす。という手法も問題ありません。

テキストが画面外に飛ばされるのを良い事に、あからさまなSEOキーワードを詰め込んだらアウトです。

判断基準はこの言葉に凝縮されています。

もし検索エンジンが無くても、それをやりますか?

さらに言うと、ちょっとくらいグレーでもいいからキーワードを詰め込みたい!という考えは愚の骨頂です。
キーワードを詰め込めば良い という考えは多くの場合効果的なSEOとは言えないので、無駄な事は止めたほうが良いでしょう。

4.1.で作成したボタンのように、「menu」という画像に対応する箇所は「メニュー」とだけ書きましょう。

関連記事