2013/10/28

サイト表示速度の高速化に期待大!CSSスプライトでナビゲーションを作ってみた

サイト表示速度の改善に期待大!CSSスプライトでナビゲーションを作ってみた

頻繁に利用するアイコンなどを一枚の画像にまとめて、サーバーへのリクエスト回数を減らしサイトの表示速度を向上させるCSSスプライトで簡単なナビゲーションを作成してみました。手軽にサイト表示を高速化できるため、多くのサイトで使用されている手法です。

目次

CSSスプライトとは

CSSスプライトとは、サイト内で使用するアイコンなどを一枚の画像にまとめ、サーバーへのHTTPリクエスト回数を減らし表示を高速化する手法です。それぞれの画像を読み込む度にのリクエストをしていては自ずと時間がかかってしまいますが、複数画像を1枚にまとめ、CSSによって画像の表示範囲を設定するCSSスプライトを用いることでリクエスト回数が1回で済みます。

CSSスプライト

FacebookやYoutubeでもCSSスプライトが利用されています。

CSSスプライトのメリット・デメリット

メリット

サイト表示速度が向上する

サーバーへのリクエスト回数が減り、すばやくサイトを表示することができるようになります。

ファイル管理が楽になる

単純に使用するファイルの数が減るため、管理が容易になります。

デメリット

更新作業が大変になる

画像のサイズ変更などを行う場合、CSSの数値も同様に変更しなければなりません。1つの画像のサイズを変更するだけでも画像の中の配置が変わるため、複数箇所のCSSを変更しなければならない場合も発生します。

alt属性が使えない

cssで画像の表示を制御するため、画像が表示されない際の代替テキストを表示するためのalt属性が使用できなくなります。

CSSスプライトを使ってナビゲーションをつくってみた

それでは実際にCSSスプライトを使用してグローバルナビゲーションを作成していきます。

まずは通常と同じようにナビゲーションを作成します。

ナビゲーションを作成

次にその下にマウスオーバー時のナビゲーションを作成します。

マウスオーバー用メニュー画像作成

画像の作成が終わったら、HTMLを書いていきます。

HTML

<nav>
  <ul>
    <li><a class="navHome" href="#">ホーム</a></li>
    <li><a class="navService" href="#">サービス一覧</a></li>
    <li><a class="navBlog" href="#">ブログ</a></li>
    <li><a class="navAccess" href="#">アクセス</a></li>
    <li><a class="navContact" href="#">お問い合わせ</a></li>
  </ul>
</nav>

それぞれ<a>タグにクラスが振り分けてあります。

CSS

nav ul li {
	float: left;
}

nav ul li a {
  display: block;
  width: 120px;
  height: 0;
  padding-top: 50px;
  overflow: hidden;
  background-image: url(images/navImg_splite.png);
}

.navHome { background-position: 0 top;}
.navService { background-position: 480px top;}
.navBlog { background-position: 360px top;}
.navAccess {  background-position: 240px top;}
.navContact { background-position: 120px top;}
.navHome:hover { background-position: 0 bottom;}
.navService:hover { background-position: 480px bottom;}
.navBlog:hover { background-position: 360px bottom;}
.navAccess:hover { background-position: 240px bottom;}
.navContact:hover { background-position: 120px bottom;}

テキストにpadding-topを指定し画像サイズ分下に移動させています。さらにoverflow:hidden;を指定しているので表示されなくなります。text-indent: -9999px;で飛ばすのと同じような考え方です。

あとは各ナビゲーションごとに表示する位置をずらしていきます。表示される範囲は120px × 50pxなので、この部分にちょうど該当の画像が来るようにbackground-positionで位置を指定していきます。

デモ

まとめ

サイト内で使用する画像を全て1つの画像にまとめれば相当表示速度が早くなりそうですが、更新作業に時間がかかったり背景のリピートを効かせることが出来なくなったりとデメリットも少なからずあります。加えて計画的に行わないと収拾がつかなく恐れもありますので、CSSスプライトを実装する際は十分な下準備が必要になってきます。

ナビゲーションに実装するだけなら、今回のように簡単に行うことが出来ますので、サイトの高速化を図りたいと考えている方はCSSスプライトを検討してみてはいかかでしょうか。