CSS スプライト、どのように計画すればよいですか? _html/css_WEB-ITnose

CSS スプライト、どのように計画すればよいですか?

通常、ページには何枚の CSS 背景画像が読み込まれますか?

スプライト画像には一般的にどのような種類がありますか?

スプライト画像のサイズはどれくらいにすればよいですか?アレンジ方法は？

サイト上でスプライトはどのように配布されますか?

上記のような悩みを抱えたことはありませんか？上記の質問を念頭に置いて、サイトのスプライト画像をより合理的に計画する方法について説明します。

まず、過去にページをカットする際にどのような素材画像が使われていたのかを思い出してみましょう。

よく考えます...よく考えます...おそらく: ボタン、アイコン、その他の固定サイズの背景画像、水平および垂直タイル化された背景画像、水平タイル化された背景画像、垂直レイヤー背景画像、左右のアダプティブ背景画像、上下のアダプティブ背景画像、明るい色と大きなサイズの背景画像。

少しわかりにくいと思うので、カテゴリに分けてみましょう。

スプライト図に従って使用されるスコープは、プロジェクト全体、グローバル、列レベル、ページ レベルに分割できます

スプライト画像の実装方法に応じて、固定サイズのスプライト画像、水平に配置されたスプライト画像、垂直に配置されたスプライト画像 (あまり一般的ではありません)、水平および垂直にタイル状に配置された背景画像 (あまり一般的ではありません) に分類できます。

次に、私たちが思い出す素材画像を以下のカテゴリに分類してみましょう:

範囲別:マテリアルは、異なるサイトの異なる機能で表示される可能性があります。ドメイン内

実装方法に従って:

固定サイズスプライト画像: ボタン、アイコン、その他の固定サイズの背景画像、明るい色と大きなサイズの背景画像

水平スプライト画像: 水平に配置された背景画像、左右のアダプティブ背景画像 (9 マスグリッドを使用しない実装)

垂直スプライト画像: 垂直背景画像、上下のアダプティブ背景画像 (9 マスグリッドを使用しない実装)

水平および垂直のタイル状の背景画像: この種の画像はスプライト画像に合成できません。一般に Web ページの背景パターンに使用され、ほとんどのサイトではめったに表示されません。 >

最後に、サイトから何ができるのか 性質を考慮して、スプライト画像は何枚作成すればよいでしょうか？以下の表を見てください:

この表から、ページ上の背景画像のリクエスト数は次のとおりであることがわかります:

最も一般的な状況を見てショックを受けましたか?笑、実際には、ページの実際の状況によれば、最初の凡例の背景画像のリクエストの数に比べて、リクエストの数はそれほど多くはありません。より明確になり、リクエストの数も大幅に減ります。

これらの写真のカット、配布、名前の付け方に何か特別な点はありますか?以下は私の個人的な意見と提案です:

水平タイルに 20px を使用します。水平タイルに 1px を使用すると、垂直タイルにも同じことが当てはまります。詳細は説明しませんが、オンラインで検索すると、関連する例が見つかります。

固定サイズのスプライト画像は通常、Web ページの幅の半分の幅に設定でき、高さは画像の内容に応じて増加します。画像をカットする前にどのサイズを使用すればよいかわからないかもしれないため、私の意見では、画像をカットする後の段階では、左右のアダプティブ背景を配置するために別のrepeat-x.png画像を使用する必要はないかもしれません。ほとんどの場合、ラベルはスライディング ドア方式を使用して左右のアダプティブ背景を実現し、ページ幅の半分で左右のアダプティブ背景の最大幅を実現し、左右に配置できます。アダプティブ背景をこのスプライト画像に追加します

画像をつなぎ合わせるとき、固定サイズの画像は 1 ピクセルずつ分離され、ブラウザーがズームインして計算するときに隣接する画像が表示されないようにします。

列レベルのスプライトの名前は、列レベルのディレクトリ名とページレベルのスプライトの名前に従って命名されます。コンポーネントクラスやスキンクラスのスプライトも同様に名前を付けます。区別や後の管理を容易にするために、名前を付けます。 >

プロジェクト間で共通のコンポーネント、または特定のコンポーネントに多くの画像コンテンツが含まれており、頻繁に変更される場合は、別のコンポーネントを作成できます。画像には、管理を容易にするためにコンポーネント名に従って名前が付けられます。

サイトに多数のグローバル アイコンがある場合は、アイコン用に別個のスプライト画像を作成することを検討できます。

新しいタグを使用することをお勧めします。この方法では、アイコンの背景を設定するためにコンテンツを持つタグを直接使用するのではなく、アイコンを実装します。また、アイコンの背景を中央に配置するには、スプライト アイコンとアイコンの間により多くのスペースを残す必要があります。この実装方法は、グローバル スタイルを組み込むには適していません。

上記は、あくまで個人的な経験と意見です。スプライト画像の企画に関して何か良い提案や意見がありましたら、メッセージを残して一緒に話し合ってください。