CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSイメージスプライトを使用する利点

画像スプライトを使用する主な利点は、httpリクエストの数を減らして、サイトの読み込み時間を短縮できることです。また、画像の読み込みが速くなり、あるイベントでのある画像から別の画像への切り替えがはるかにスムーズになります。画像スプライトは、1つの画像に配置された画像のコレクションです。

以下は、CSSを使用した画像スプライトの利点を示すコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSイメージスプライトを使用する利点

上記では、以下を使用して画像スプライトを設定しました-

.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}

  1. CSSを使用してImageSpriteからアイコンを表示する

    画像スプライトを使用する主な利点は、httpリクエストの数を減らして、サイトの読み込み時間を短縮できることです。 以下は、CSSを使用して画像スプライトからアイコンを表示するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .twitter,.facebook {    background

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig