ホームページ作成/ホームページの高速化

「CSS Sprite」で画像の表示速度を高速化する(4ページ目)

【ホームページの表示速度を速くする!】読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSS Sprite」の使い方をご紹介!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

background-positionプロパティの値にマイナスを指定

background-positionプロパティは、背景画像の表示開始位置を指定するプロパティです。具体的には、「背景画像の左上をどこに表示させるか?」を座標で指定します。例えば、
background-position: 50px 30px;
と指定すれば、背景画像は「本来表示される位置」から「右方向に50px、下方向に30px」ずれた位置に表示されます。値にはマイナスの数値も指定可能で、
background-position: -30px -40px;
と指定すれば、「本来表示される位置」から「左方向に30px(=右方向に-30px)、上方向に40px(=下方向に-40px)」ずれた位置に表示されます。

background-positionプロパティで、背景画像の表示開始位置をずらせる

background-positionプロパティで、背景画像の表示開始位置をずらせる


上図は、背景画像を1枚しか描画しなかった場合(たとえば、background-repeatプロパティに値「no-repeat」を指定した場合)の例です。通常、背景画像はタイル状に繰り返して表示されるため、実際には描画領域内(上図の赤枠内)に空白はできません。表示開始位置がずれた状態で、上下左右に繰り返して表示されます。

「CSS Sprite」では、この「画像の表示位置をずらす」方法を利用して、望みの画像だけを表示させています。

背景画像の描画開始位置を上にずらすことで、実際に見える画像を選択

背景画像の描画開始位置を上にずらすことで、実際に見える画像を選択


上図のように、background-positionプロパティの「2番目の値」(=縦方向にずらす距離)に、マイナスの値を指定することで、背景画像の表示開始位置を上方向にずらしています。こうすることで、実際に見える箇所を調節できます。

画像がたくさんあるなら、「CSS Sprite」の活用を

「CSS Sprite」にはいろいろな実現方法がありますが、
1.複数の画像を結合して、1枚の大きな画像にまとめる
2.画像の描画位置をずらすことで、見える箇所を調節する
……という2点は同じです。状況に応じて、使いやすい方法を試してみると良いでしょう。

複数のページで頻繁に利用される画像がたくさんあるなら、ぜひ「CSS Sprite」を活用して、ウェブページの表示速度を高速化させてみて下さい。

【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます