スプライトとフォントアイコンを実装するためのCSS

スプライト:

以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな Web ページにアクセスすると、これらの画像が繰り返し取得され、リソースに何度もアクセスする必要がありました。

リソースへのアクセス回数を減らすために、よく使用される複数の画像を 1 つの画像に結合します (Web ページのキャッシュメカニズムにより、すでに使用可能なローカルリソースは省略されます。リソースが前回取得された場合は、キャッシュされたリソースの有効期限が切れるまで再度アクセスされません。[遊園地に行くのに少し似ています。すべてのゲームをプレイできるチケットもあれば、1 つのゲームしかプレイできないチケットもあります。すべてのゲームをプレイできるチケットがあれば、何度もチケットを購入する必要はありません])。

よく使用する複数の画像を 1 つの画像に結合した後、この画像を背景画像として設定し、background-position を使用して画像のさまざまな部分を表示します。

例：

以下は26文字のアルファベットです。この絵を使ってGOOGLEを綴ります。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8" />
    <title>ドキュメント</title>
    <スタイル>
        div{
            表示:インラインブロック;
        }
        div:最初の子{
            幅:79px;
            高さ: 79px;
            背景画像:url('abcd.jpg');
            背景位置:-396px 0;
        }
        div:n番目の子(2){
            幅:82ピクセル;
            高さ: 82px;
            背景画像:url('abcd.jpg');
            背景位置:-326px -98px;
        }
        div:n番目の子(3){
            幅:82ピクセル;
            高さ: 82px;
            背景画像:url('abcd.jpg');
            背景位置:-326px -98px;
        }
        div:n番目の子(4){
            幅:79px;
            高さ: 79px;
            背景画像:url('abcd.jpg');
            背景位置:-396px 0;
        }
        div:n番目の子(5){
            幅:48px;
            高さ: 77px;
            背景画像:url('abcd.jpg');
            背景位置:-81px -101px;
        }
        div:n番目の子(6){
            幅:48px;
            高さ: 77px;
            背景画像:url('abcd.jpg');
            背景位置:-286px 0;
        }

    </スタイル>
</head>
<本文>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</本文>
</html>

結果：

上記の例に示すように、複数の画像を 1 つの大きな画像に配置し、background-position を使用して表示したいコンテンツを抽出できます。

実際には、多くの背景画像でこの手法が使用されています。

たとえば、JD.com ロゴ:

JD.com の小さなアイコン:

フォントアイコン:

ご存知のとおり、ユニットフォントのファイルサイズは画像のサイズよりも小さくなります。スプライトが画像を 1 つずつ処理することを考慮して、画像をフォントに変換するという素晴らしいアイデアを思いついた人がいました (実際、フォントは元々そのように設計されていました)。

フォントに変換後、特殊なコードを使用して指定した画像を表示することができます。

フォントアイコンはフォントなので、フォントの色やフォントサイズを (歪みなく) 変更できるため、スプライトに比べて非常に明らかな利点があります。

例: [以下はフォントアイコンの作成方法ではなく、使用方法のみを示しています]

私はicomoonを使ってフォントアイコンのセットを作成し（icomoonには既製のアイコンオプションがあります）、それをダウンロードしました。以下にファイル名を記載します。

style.cssはフォントアイコンを使用する方法を提供することができます

demo.html は、フォントアイコンを使用する 2 番目の方法を提供します。

次に以下を使用します:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8" />
    <title>ドキュメント</title>
    <スタイル>
    /* フォントを宣言します。次のテキストはダウンロードしたフォルダ内の css ファイルにあります */
        @フォントフェイス {
      フォントファミリー: 'icomoon';
      src: url('fonts/icomoon.eot?ni3k5c');
      src: url('fonts/icomoon.eot?ni3k5c#iefix') フォーマット('embedded-opentype'),
        url('fonts/icomoon.ttf?ni3k5c') フォーマット('truetype'),
        url('fonts/icomoon.woff?ni3k5c') フォーマット('woff'),
        url('fonts/icomoon.svg?ni3k5c#icomoon') フォーマット('svg');
      フォントの太さ: 標準;
      フォントスタイル: 通常;
        }
        /* 使用*/
        [class^="icon-"]、[class*="icon-"] {
          /* フォントを変更するブラウザ拡張機能の問題を防ぐために !important を使用します */
          フォントファミリー: 'icomoon' !important;
          話す：なし
          フォントスタイル: 通常;
          フォントの太さ: 標準;
          フォントバリアント: normal;
          テキスト変換: なし;
          行の高さ: 1;
          /* フォントレンダリングの改善 =========== */
          -webkit-font-smoothing: アンチエイリアス;
          -moz-osx-font-smoothing: グレースケール;
        }
        .icon-home:before {
          内容: "\e900";
        }
        .icon-image:before {
          内容: "\e90d";
        }
        .icon-music:before {
          内容: "\e911";
        }
        div{
            font-family:'icomoon';/* 上記と一致している必要があります*/
        }
    </スタイル>
</head>
<本文>
    <div class=".icon-imagee"></div> 
    <!-- 最初の使用方法:
    style.css ファイルをインポートし、指定されたアイコンのクラスセレクターのプロパティを対応するクラス属性値として使用します -->
    <div></div> <!-- 2 番目の使用方法:
    タグのフォント宣言を行い、demo.html を開いてアイコンをコピーします (左側にコード 1 つ、右側にアイコン 1 つ)
     -->
     <!-- 最初の方法は ::before を使用して追加することですが、他の ::before メソッドを使用して追加することもできます -->
</本文>
</html>

要約する

上記はエディターが紹介したスプライトとフォントアイコンの CSS 実装です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: ファイルアップロードスタイルの詳細を実装するjs

>>: ウェブデザインと制作におけるハイパーリンクの効果の向上