デザインちーむテクニックチュートリアルつっつです。テクニックについて書かせてもらいます!ちなみに何故必要かなどは、前回のインラインイメージの記事をご覧ください。今回は、、CSSスプライトこちらを説明していきたいと思います。インラインイメージ+CSSスプライトCSSスプライトとは各画像を一枚の画像に結合変換してCSSを使って一部だけ表示することで、あたかも一枚画像の様に表示するテクニックです。こちら前回のインラインイメージの記事と同じでHTTPリクエストを減らすことでサイト表示速度を早くしようという考え方です。インラインイメージより少々管理が面倒になるのがネックですが良く使われるテクニックです(筆者はインラインイメージ好きです)※こちらはキャッシュが効くので初回以外は高速になるかと思います、ただしコードが全体的に複雑になる気がしてます。CSSスプライトをやってみようまずはお好みの画像をこちらのサイト(←よく使う)にまとめてアップ変換!こんな感で簡単に結合されると思います。結合された画像とソースをダウンロード!HTMLファイルにペタリと貼ってお好みのサーバーに上げてみてください画像が表示されるはずです。面倒な方はこちらにサンプルがあります。/>サンプル確認はこちら最適化後サンプル確認はこちらこちらChromeデベロッパーツールでソースを確認してみてください要は空タグに高さと幅を設定、Background-imageで画像を表示、Background-positionで画像の表示位置をずらしてあたかも一枚の画像のように表示してるのです。グーグル先生なんかで”CSSスプライト”で検索すると先人様の素晴らしいノウハウが沢山出てきます。※測定値ですがサーバーの状態などにも左右されるので今回のものが絶対ではありません前回に引き続き速度テストをしたいと思います、定番の計測サイトです。今回はノーマル、CSSスプライト、インラインの3種類を比較してみたいと思います。ノーマルサンプル確認はこちらCSSスプライトサンプル確認はこちらインラインイメージサンプル確認はこちらまとめどうでしょうか?インライン、CSSスプライトどちらも効果ありと判断してもいいかと思います。初訪問者にはインラインイメージ、リピート訪問者にはキャッシュが効くCSSスプライトが良さそうに感じますよねーではでは長所短所のバランスを考えつつ使い分けて、ハッピーなバリサクWEBサイトを作っていきましょう!ちなみに、、、調子にのってインラインイメージ+CSSスプライトこれは意味がありません。意味がないかは考えてみてくださいね。部隊のWEBサイト作成、部隊広報部などでキャリアを積む。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。他にもこんな記事が読まれています!WEBマーケティングサーバー・ネットワークライフスタイルお知らせ2015.03.27デザインに深みを持たせるタイポグラフィの知識とサンセリフなど2014.06.19なにかと使える「Ruby」、インストール方法。ル2015.05.11USB2.0とUSB3.0とeSATAの速度比較2014.10.20Apacheの設定は後書きでわかりやすく!2015.11.09手入力のHTTPクライアント・サーバごっこで理解するHTTP2017.02.19CUIログインでパスワード入力を間違ったら[Ctrl]+[U2015.06.29Go-Nextインフラエンジニアが語る、自作PCへの熱い思い2016.04.14インフラ系女子、モニターを修理してみた。InnoDBファイルフォーマットBarracud2016.04.15Go-Nextインフラエンジニアが語る、自作PCへの熱い思い2015.03.31USB2.0とUSB3.0の規格や給電の違いについて2017.03.21最初からずば抜けた結果は出ないけど、着実に仕事ができるように2016.11.24いま話題のVRってなに?2016.11.14旧東海道をいくら歩いてもGo-Nextには着きません。2017.05.02旧東海道を歩くだけでお金持ちになるとかいう話2014.09.02スマホの通話料を安く抑える方法。