スプライト画像とは？ まずスプライト画像とは、複数の画像を１枚にまとめた画像のことで、CSSで表示範囲を指定して使用します。 マウスオーバーや容量軽減、今回のようなアニメーションのために使われることが多いです。 アニメーションにするなら、こんな感じの画像になります。 上記をcssアニメーションのstepsを使うと以下のようになります。 stepsとは？ stepsはCSSのプロパティであるanimation-timing-functionの値の一つで、コマ撮りのアニメーションのような動きをさせることが出来ます。 animation-timing-functionは、アニメーションの速度を指定するときに記載します。 animation-timing-function（速度）の値一覧 ・step-start：最初からアニメーション終了時の状態になる ・step-end：最後に一瞬でアニメーショ
その昔、webサイト高速化の手段の一つとして、かなり有名だったCSSスプライト。これは、複数のアイコンなどを一つの画像ファイルにまとめることで、読込回数を減らし、ウェブサイトの速度向上を図る、というものでした。 ただ、これってHTTP/1の時代はけっこう効果ありましたが、じつはHTTP/2の時代だと、そんなにメリットがないようです。 CSSスプライトの考察 HTTP/1とHTTP/2の違い 普段、なにげなくブラウザで各社のウェブサイト（ホームページ）を見ていますが、内部的な話をすれば、ブラウザは、IP/TCPプロトコルの上で成り立つHTTP通信により、サーバーからクライアントにデータを読み込んできます。 そして、このHTTP通信をするための規格というものは、時代に沿って進化をしていて、一昔前はHTTP/1系でしたが、2015年頃からHTTP/2となりました。 HTTP/1系⇒HTTP/2に
サイトの読み込みを最適化するために「CSSスプライト」というものが使われることがあります。実際どのように使うのか理解しておくと、便利なこともあるかもしれません。今回はこのCSSスプライトについて紹介します。 CSSスプライトは、サイトの読み込みを速くする目的で使われているCSSの技法です。具体的には、「サイト内の複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる」ことで画像の読み込みを減らし、サイトの読み込みが速くなるという仕組みです。 CSSスプライトを使うことで、サイトの読み込みが速くなるというメリットがあります。逆にデメリットは、サイズを変更したり画像を追加したいときの更新に手間がかかってしまうことです。 CSSスプライトを使ったアイコン アイコンの場合は、アイコン画像をひとつにまとめた一枚画像を使い、画像の読み込みを最適化します。 一枚の画像に
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】スプライト画像をstepsでアニメーションさせる方法・作り方 - 株式会社オーツー｜スタッフブログ
CSSスプライトって意味あるの？ HTTP/2になった時代に考察してみる | マイテラス
CSSスプライトとは？