CSS Spritesを用いた表示高速化と軽量化の実施方法 | Stronghold Archive
どうもこんばんは！今回のtipは【CSS Spritesを用いた表示高速化と軽量化の実施方法】です。ページの高速化に関しましては色々な方法ありますが、もっとも手軽に始められる方法の一つだと思います。 CSS Spritesについて CSS Spritesとは簡単に言うと複数の画像一枚にまとめ、読み込みの回数（HTTPリクエストの回数）を減らし、さらには画像自身の容量も削るという方法になります。通常の場合、画像は以下のように一枚ずつ表示しているかと思います。CSS Spritesではこれら複数の画像を一枚にまとめ、背景画像に指定した上でbackground-position（背景画像の表示位置）を使って表示を切り替えていきます。この方法はボタン等でよく見られます。では実際に上の画像を使ってCSS Spritesを実装してみましょう。 CSS Spritesによるボタンの作成 １.ますはボタン
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
