Skip to content

Commit

Permalink
2024/10/22 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Dec 3, 2024
1 parent 8e9825e commit c4484cd
Showing 1 changed file with 6 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: CSS での画像スプライトの実装
slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
l10n:
sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb
---

{{CSSRef}}
Expand All @@ -12,18 +14,18 @@ slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
## 実装

例えば、 `toolbtn` クラスを持つすべてのアイテムに画像が与えられたとします。
例えば、 `tool-btn` クラスを持つすべてのアイテムに画像が与えられたとします。

```css
.toolbtn {
.tool-btn {
background: url(myfile.png);
display: inline-block;
height: 20px;
width: 20px;
}
```

背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の 2 つの値として、または {{cssxref("background-position")}} として追加できます。
背景の位置は、 background の中で {{cssxref("url_value", "<url>")}} の後に x と y の 2 つの値として、または {{cssxref("background-position")}} として追加できます。

```css
#btn1 {
Expand All @@ -35,7 +37,7 @@ slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
}
```

これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には `toolbtn` クラスが割り当てられており、上記の画像ルールの影響を受けているとします)
これは ID が `btn1` の要素を左に 20 ピクセル、 ID が `btn2` の要素を左に 40 ピクセル移動します(これらの要素には `toolbtn` クラスが割り当てられており、上記の画像ルールの影響を受けているとします

同様に、ホバー状態にすることもできます。

Expand Down

0 comments on commit c4484cd

Please sign in to comment.