CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSS画像スプライト


画像スプライト

画像スプライトは、単一の画像に入れられた画像のコレクションです。

多くの画像を含むWebページは、ロードに時間がかかり、複数のサーバー要求を生成する可能性があります。

イメージスプライトを使用すると、サーバーリクエストの数が減り、帯域幅が節約されます。


画像スプライト-簡単な例

3つの別々の画像を使用する代わりに、次の1つの画像( "img_navsprites.gif")を使用します。

ナビゲーション画像

CSSを使用すると、必要な画像の一部だけを表示できます。

次の例では、CSSは「img_navsprites.gif」画像のどの部分を表示するかを指定します。

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

説明された例:

  • <img id="home" src="img_trans.gif">-src属性を空にすることはできないため、小さな透明な画像のみを定義します。表示される画像は、CSSで指定した背景画像になります
  • width: 46px; height: 44px; -使用する画像の部分を定義します
  • background: url(img_navsprites.gif) 0 0; -背景画像とその位置を定義します(左0px、上0px)

これは画像スプライトを使用する最も簡単な方法です。次に、リンクとホバー効果を使用して画像スプライトを拡張します。


画像スプライト-ナビゲーションリストを作成する

スプライト画像( "img_navsprites.gif")を使用してナビゲーションリストを作成します。

HTMLリストを使用します。これは、リンクであり、背景画像もサポートしているためです。

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

説明された例:

  • #navlist {position:relative;}-位置は相対位置に設定され、その中の絶対位置を許可します
  • #navlist li {margin:0; padding:0; list-style:none; position:absolute; top:0;}-マージンとパディングは0に設定され、リストスタイルは削除され、すべてのリストアイテムは絶対位置に配置されます
  • #navlist li、#navlist a {height:44px; display:block;}-すべての画像の高さは44pxです

次に、特定のパーツごとに配置とスタイル設定を開始します。

  • #home {left:0px; width:46px;}-左端に配置され、画像の幅は46pxです
  • #home {background:url(img_navsprites.gif)0 0;}-背景画像とその位置を定義します(左0px、上0px)
  • #prev {left:63px; width:43px;}-右に63pxの位置にあり(#home width 46px +アイテム間の余分なスペース)、幅は43pxです。
  • #prev {background:url( 'img_navsprites.gif')-47px 0;}-背景画像を右に47px定義します(#home width 46px + 1px linedivider)
  • #next {left:129px; width:43px;}-129pxを右に配置し(#prevの開始は63px + #prev width 43px +余分なスペース)、幅は43pxです。
  • #next {background:url( 'img_navsprites.gif')-91px 0;}-右に91pxの背景画像を定義します(#home width 46px + 1px linedivider + #prev width 43px + 1px linedivider)


画像スプライト-ホバー効果

次に、ナビゲーションリストにホバー効果を追加します。

ヒント::hoverセレクターは、リンクだけでなく、すべての要素で使用できます

新しい画像( "img_navsprites_hover.gif")には、ホバー効果に使用する3つのナビゲーション画像と3つの画像が含まれています。

ナビゲーション画像

これは単一の画像であり、6つの個別のファイルではないため、ユーザーが画像にカーソルを合わせても読み込みの遅延はありません。

ホバー効果を追加するために追加するコードは3行だけです。

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

説明された例:

  • #home a:hover {background:url( 'img_navsprites_hover.gif')0 -45px;}-3つのホバー画像すべてに対して、同じ背景位置を指定しますが、45pxだけ下になります。