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

CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

画像スプライト（Image Sprite）とは

画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。

CSSでスプライト画像からアイコンを表示する仕組み

CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。

  • backgroundプロパティでスプライト画像を読み込み、no-repeatを指定する
  • widthとheightで、表示したいアイコンのサイズを設定する
  • background-positionで座標をずらし、表示するアイコンの位置を調整する

サンプルコード

以下は、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>

実行結果

上記のコードを実行すると、1枚のスプライト画像からTwitterとFacebookのアイコンがそれぞれ独立したアイコンとして表示されます。.facebookクラスではbackground-position: 0 -148px;を指定することで、スプライト画像内のFacebookアイコンの位置に合わせて背景をずらしています。

CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

  1. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ

  2. Pythonのcv2（OpenCV）で画像を表示する方法をわかりやすく解説

    PythonのOpenCV（cv2）を使えば、数行のコードで画像ファイルを読み込み、画面に表示することができます。ここでは、画像を読み込んで表示するための基本的な手順と、各関数の役割について解説します。 画像を表示するための基本手順 cv2で画像を読み込み・表示するには、主に以下のステップを実行します。 cv2.imread()：ファイルから画像を読み込みます。 cv2.imshow()：指定した名前のウィンドウに画像を表示します。 cv2.waitKey()：キーが押されるまでプログラムを待機させます。 cv2.destroyAllWindows()：開いているすべてのHighGUIウィン