webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

CSSスプライト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。

f:id:yachin29:20160322014753p:plain

メリット
画像の読み込みが1回で済むので、サイトの読み込み速度が速くなる

デメリット
サイズやデザインの更新が面倒
background-positionの理解が必要

ナビゲーションボタンにCSSスプライトを使ってみましょう

f:id:yachin29:20180306155457p:plain