【CSS】サイトの読み込みを高速化するスプライトとは?

【CSS】サイトの読み込みを高速化するスプライトとは?


WEBサイトのページの表示が遅い。

そんなとき、ゆっくり待ってくれる優しい人は少数派です。
大抵の人は、さっさと別のWEBサイトに移動してしまいます。

 

そのため、WEB制作の現場では、ページを1秒でも早く読み込ませることに対して、
様々な創意工夫がなされています。

 

今回は、そんな先人の知恵のひとつである「CSS スプライト」を紹介します。

 

CSS スプライトとは

CSSスプライトとは、
アイコンなどの小さな画像を、1枚の画像ファイルにまとめ、
表示させたい部分を背景画像として、CSSで指定する手法です。

 

グローバルメニューの表示を例に、CSSスプライトの説明を進めます。

 

CSSスプライト手順

 

グローバルメニュー表示(ノーマルな方法)

 

CSSスプライトの前に、一般的な方法を確認しましょう。
ノーマルな方法は、<li>タグの中に、<img>タグを用意するやり方です。

 

 

<HTMLコード>

 

<CSSコード>

 

グローバルメニュー表示(CSSスプライト)

 

CSSスプライトの場合は、<img>タグを利用しません。

 

まず、backgroundプロパティで表示する1枚の画像を参照します。
そして、各メニュー項目の座標位置(position)を指定します。

 

ポイントは、背景画像として利用 する点です。

 

<HTMLコード>

 

<CSSコード>

 

<利用する画像ファイル>

navigation(サンプル画像)

 

CSSスプライトのメリット

CSSスプライトの利点

 

CSSスプライトの利点は、
画像の読み込み回数の削減によるページの表示速度の短縮です。

 

読み込み回数の削減が、表示速度の短縮につながる理由は、
引越しをイメージするといいでしょう。

 

荷物を運ぶときに、大型トラックでまとめて1回で運ぶのと、
自家用車などで、荷物を1つずつ運んで、往復するのとでは、
どちらが早いでしょうか。

 

当然、大型トラックですね。
つまり、大型トラックがCSSスプライトです。

 

CSSスプライトの場合、画像を1つのファイルにまとめるので、
読み込み回数は、1回だけで済みます。

 

そのため、小さな画像を大量に読み込むページの場合は、
CSSスプライトで、ページの表示時間を短縮できるのです。

 

まとめ

読込速度の改善は、Web制作者にとって、重要な課題です。

 

質の高いWebサイトを作成するためには、
アスリートさながら、貪欲に速さを追求しなければいけません。

 

そのための手段の一つとして、CSSスプライトをマスターしておきましょう。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


MOBB

株式会社MOBBと申します。多言語対応webサイト制作やメディア構築、DMP開発などを行っております。

Next Article光彩の機能を使って文字をネオン風に仕上げよう!