スプライトの概念は、しばらく前から存在しています。これは、ゲーム業界で最も一般的に使用されている手法の1つであり、画面にアニメーションを表示するプロセスを高速化します。この記事では、この手法がCSSスプライトの助けを借りてWebページのユーザーエクスペリエンスを次の順序で改善するのにどのように役立つかを特に見ていきます。
- スプライトとは何ですか？
- CSSスプライトとは何ですか–簡単な概要ですか？
- それがWeb開発にどのように役立つかの例？
- CSSスプライトを使用する利点
- CSSスプライトを使用する場合、開発者は何をする必要がありますか？
- CSSスプライトシートを作成するにはどうすればよいですか？
- CSSスプライトを操作する方法は？
- CSSスプライトを使用している企業
スプライトとは何ですか？
スプライトは、ゲームのより大きなシーンの一部である単一の画像です。次に、複数のスプライトが結合されて、スプライトシートと呼ばれる大きな画像になります。スプライトシートがメモリにロードされると、アニメーションのような錯覚を与えるために、さまざまなスプライトがすばやく連続してレンダリングされます。これは、ゲーム内のシーンを生成するために、数十から数百の異なるスプライトに対して同時に実行されます。
基本的な考え方は、複数の画像を読み込んで表示するよりも、必要な場所に画像を読み込んでその一部を表示する方がはるかに高速であるということです。
CSSスプライトとは：簡単な概要ですか？
CSSスプライトは、Web開発者がWebページのパフォーマンスを最適化するためによく使用する手法です。この手法では、通常は同じサイズの複数の小さな画像が結合されて、 スプライトシート または タイルセット 。このスプライトシートは、必要な場所に個々の要素を表示するために使用されます。
通常、ロゴ、ナビゲーション矢印、ボタンなどの要素は、ほぼ同じ寸法であり、Webページで頻繁に使用されるため、スプライトシートに含まれています。
C ++での名前空間の意味
それがWeb開発にどのように役立つかの例？
一般に、Webページのデザイン中、画像は個別のファイルとして保存および使用されます。したがって、ユーザーがWebページを開くと、ブラウザーはこれらのファイルごとにHTTP要求を行い、それらを個別にダウンロードして表示する必要があります。これにより、特定のWebページにボタン、アイコン、ロゴなどの小さな画像が多数含まれる可能性があるため、ページの読み込み時間が長くなります。
CSSスプライトは、開発者がこれらの頻繁に使用される小さな画像を1つの大きな画像に結合するのに役立ちます。その後、ブラウザは1つのファイルのみをダウンロードする必要があります。画像をオフセットして必要なセクションを表示します。
CSSスプライトを使用する利点
通常の画像に比べてCSSスプライトを使用する主な利点は2つあります。
より高速なページ読み込み： シートがダウンロードされるとすぐにWebページで使用される画像が表示されるため、ページの読み込み時間が向上します。
スループットの向上とリソース使用量の削減： この手法は、ページの読み込みを高速化することでエンドユーザーエクスペリエンスを向上させるだけでなく、ただし、HTTP要求の数が少なくなるため、ネットワークの輻輳も軽減されます。
CSSスプライトを使用する場合、開発者は何をする必要がありますか？
個々の画像を操作する場合、開発者はHTMLタグを簡単に操作できます 必要に応じてCSSでスタイルを設定します。ただし、CSSスプライトを使用する場合、開発者は2つの特定のことを行う必要があります。
- スプライトシートの作成
開発者がCSSスプライトを使用することにした場合、Webページを開発する際、ボタンやロゴなどの必要な要素をすべてグリッド状のパターンでマージして、最初にスプライトシートを作成する必要があります。これは、PhotoshopやGimpなどの画像編集プログラムを使用して実行できます。スプライトシートの作成に役立つオンラインツールも多数あります。これらのツールについては、この記事の後半で説明します。
- を使用してスプライトの特定の要素にアクセスします CSSの背景位置 プロパティ
スプライトシートの準備ができたら、開発者はCSS属性を使用してシートのさまざまな部分にアクセスする必要があります。
- 幅： スプライトの幅
- 高さ： スプライトの高さ
- バックグラウンド： スプライトシートへの参照
- 背景位置： スプライトシートの必要な部分のみにアクセスするためのオフセット値（ピクセル単位）
CSSスプライトシートを作成するにはどうすればよいですか？
任意の画像編集ソフトウェアを使用して、小さい画像をグリッドに配置できますが、以下では2つの簡単な方法について説明します。
1.オンラインスプライトシート作成ツール
リンク： toptal.com/developers/css/sprite-generator/
このツールは無料で使用できるだけでなく、スプライトシートを参照するときに使用できる必要なCSSコードも提供します。また、要素間のパディングや配置の変更など、さまざまなプロパティをいじることができます。
2.スプライトを使用したスプライトシートの生成
Grunt、Node、またはGulpを使用している場合は、PNG、JPGなどのさまざまな形式でスプライトシートを作成するのに役立つSprityというパッケージをインストールできます。
まず、以下を使用してSprityをインストールする必要があります。
npm install sprity -g
次に、スプライトシートを生成するには、次のコマンドを使用します。
sprity ./output-directory/ ./input-directory/*.png
CSSスプライトを操作する方法は？
この例では、次のスプライトシートを使用します。
上の画像でわかるように、6つのアイコン（Instagram、Twitter、Facebook）がグリッドのようなパターンで配置されています。最初の行には通常の状態があり、2番目の行にはホバー状態があります（マウスカーソルをそれらの上に置くと表示される画像）。
上記のツールを使用してスプライトシートを作成した場合は、CSSで必要なオフセットをすでに知っていますが、他のツールを使用した場合、または単にスプライトシートを受け取った場合は、心配しないでください。その方法について説明します。必要な要素のオフセットを取得するのに役立ちます。
MSペイントを使用して、6つのアイコンのそれぞれに必要なオフセットを取得する非常に簡単な方法を見てみましょう。スプライトを操作するのは理想的なソリューションではないかもしれませんが、マウスカーソルの座標を提供する機能があるため、必要なX座標とY座標を取得するために使用できます。
まず、スプライトシート画像（すべての小さい画像を含むグリッド）を開き、取得するスプライトの左上隅にマウスカーソルを置きます。
スプライトの左上のポイント（左上のInstagram画像）の座標を取得したら、CSSコードを使用して、必要に応じてこの特定のスプライトを表示できます。
背景：url（ 'img_sprites.png'）
背景位置：0 0
幅：125px
高さ：125px
アイコンはその寸法であるため、幅と高さを125ピクセルとして使用しています。同じ行の次の画像（Twitter）を取得するには、次のコードを使用します。
背景：url（ 'img_sprites.png'）
背景位置：-128px 0px
幅：125px
高さ：125px
上記のスニペットのbackground-position属性に注意してください。 （-128px、0）は、スプライトシートを左に128ピクセル（要素間のパディングを考慮）およびY軸の0ピクセルだけオフセットしていることを意味します。 Twitterのホバーアイコンにアクセスする場合、background-position属性は次のようになります。
背景位置：-128px -128px
このようにして、CSSを使用してスプライトシートの各コンポーネントにアクセスできるようになりました。それを行う方法について、完全なHTMLおよびCSSコードを見ていきましょう。
ステップ1： 必要なHTMLコードを書く
以下のコードでは、3つのリンクを追加しているだけです。また、HTMLをスタイルシート（screen.css）にリンクします。
ステップ2： 必要なCSSを書く。まず、共有アイコンクラスのスタイルを設定します。ここでは、作成したスプライトシートを参照していることがわかります。
/ *共有アイコンクラス* /
span.icon リンク、
span.icon a：訪問{{
表示：ブロック
テキストインデント：-9999px
Javaでのマージソートプログラム
背景画像：url（./ img_sprites.png）
背景-繰り返し：繰り返しなし
}
ステップ3：オフセットを使用してスプライトシートから個々のアイコンを取得します。
/ * Instagramアイコン* /
span.instagram リンク、
span.instagram a：訪問{{
幅：125px
高さ：125px
背景位置：0 0
}
/ * Twitterアイコン* /
ソートアルゴリズムc ++
span.twitter リンク、
span.twitter a：訪問{{
幅：125px
高さ：125px
背景位置：-128px 0
}
/ * Facebookアイコン* /
span.facebook リンク、
span.facebook a：訪問{{
幅：125px
高さ：125px
背景位置：-257px 0
}
ステップ4： オフセットを使用してスプライトシートからホバーアイコンを取得します。
span.instagram a：ホバー{{背景位置：0 -128px}
span.twitter a：ホバー{{背景位置：-128px -128px}
span.facebook a：ホバー{{背景位置：-255px -128px}
CSSスプライトを使用している企業
業界の多くの有名企業は、CSSスプライトを使用してWebサイトの応答性を向上させています。 Google、Facebook、Amazonなどの企業は、特定のユーザーのセッションごとのHTTPリクエストの数を減らすのに役立つため、この方法を広く使用しています。これらの企業がいつでも何百万もの顧客にサービスを提供していることを考慮すると、これは大きなメリットです。
これで、CSSスプライトとは何か、およびそれらを操作する方法を把握できたので、CSSを学ぶための旅に一歩近づきました。スプライトのような概念は、開発者がWebページからパフォーマンスのすべてのビットを抽出することが非常に重要になっているため、今日のゲームチェンジャーです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「HTMLImages」ブログのコメント欄にその旨をお伝えいただければ、折り返しご連絡いたします。