7月
6

CSSスプライトを使ã£ã¦ãƒšãƒ¼ã‚¸ã®èª­ã¿è¾¼ã¿é€Ÿåº¦ã‚’å‘上ã™ã‚‹


ホームページを作るã¨ãã«ã¯ç”»åƒã‚’ãŸãã•ん使ã„ã¾ã™ãŒã€
ãŸãã•ã‚“ã®ç”»åƒã‚’使ã†ã¨ã€ç”»åƒã®æ•°ã ã‘データを読ã¿è¾¼ã¿ã«è¡Œã‹ãªã„ã¨ã„ã‘ãªã„ã®ã§ã€ãƒšãƒ¼ã‚¸å…¨ä½“ã®è¡¨ç¤ºé€Ÿåº¦ãŒé…ããªã‚Šã¾ã™ã€‚
普段ã‚ã¾ã‚Šæ°—付ã‹ãªã„ã“ã¨ã§ã™ãŒã€å°‘ã—ã§ã‚‚表示速度を早ãã—ãŸã„ã¨æ€ãˆã°ã€
ã“ã®CSS Spriteã¨ã„ã†ç”»åƒã®ä¸€éƒ¨ã®ã¿ã‚’表示ã™ã‚‹æ–¹æ³•を使ã£ã¦ã¿ã¾ã—ょã†ã€‚
CSS Spriteを使ãˆã°ã€ï¼‘度ã®ç”»åƒã®èª­ã¿è¾¼ã¿ã§æ¸ˆã‚€ã®ã§ãƒšãƒ¼ã‚¸å…¨ä½“ã¨ã—ã¦èª­ã¿è¾¼ã¿é€Ÿåº¦ãŒå‘上ã—ã¾ã™ã€‚
ã¾ãŸã€ã“ã®æ–¹æ³•ã¯CSSを使ã£ãŸãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ç”»åƒã«ã‚‚使ãˆã¾ã™ã€‚



CSS Spriteã¨ã¯å¤§ãã„ç”»åƒã‚’読ã¿è¾¼ã‚“ã§ä¸€éƒ¨ã ã‘を表示ã™ã‚‹æ–¹æ³•

CSS Spriteã¨ã¯åˆã‚ã«å¤§ãã„ç”»åƒã‚’読ã¿è¾¼ã‚“ã§ã€å¿…è¦ã«å¿œã˜ã¦ä¸€éƒ¨ã‚’表示ã™ã‚‹æ–¹æ³•ã§ã™ã€‚
ã¤ã¾ã‚Šã€æ¬¡ã®ã‚ˆã†ãªè¤‡æ•°ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒä¸¦ã‚“ã ç”»åƒã‚’用æ„ã—ã¦WEB上ã§ä¸€éƒ¨ã‚’切りå–りã¾ã™ã€‚

CSS Sprite

背景画åƒã¨ã—ã¦ä¸€éƒ¨ã ã‘表示ã™ã‚‹

ã¾ãšã¯background-imageã§ç”»åƒã‚’読ã¿è¾¼ã¿ã¾ã™ã€‚
ãã®éš›ã€è¡¨ç¤ºã—ãŸã„領域ã®é«˜ã•ã¨å¹…を指定ã—ã¦ãŠãã¾ã™ã€‚
div.image
{
	width:128px;
	height:128px;
	background-image:url('./image/img01.png');
	background-position:0px 0px;
}
ã“ã®ã‚ˆã†ã«ã™ã‚‹ã¨æ¬¡ã®ã‚ˆã†ãªè¡¨ç¤ºã«ãªã‚Šã¾ã™ã€‚
左上ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒé…ç½®ã•れãŸã‚ˆã†ã«è¦‹ãˆã¾ã™ãŒã€
実際ã«ã¯ç”»åƒå…¨ä½“を読ã¿è¾¼ã‚“ã§ã€å·¦ä¸Šã®ä¸€éƒ¨ã®ã¿ã‚’表示ã•ã›ã¦ã„ã‚‹ã®ã§ã™ã€‚
CSS sprite
ã“ã“ã§ã€æ¬¡ã®ã‚ˆã†ã«background-positionã®æ•°å€¤ã‚’変ãˆã¦
背景ã®é…ç½®ä½ç½®ã‚’変ãˆã‚‹ã¨ã€åˆ¥ã®ã‚¢ã‚¤ã‚³ãƒ³ã‚’表示ã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
div.image
{
	width:128px;
	height:128px;
	background-image:url('./image/img01.png');
	background-position:-150px 0px;
}


ã“ã®ã¨ãã«ã€å®Ÿéš›ã«ã¯ç”»åƒã¨ãã®è¡¨ç¤ºé ˜åŸŸã®é–¢ä¿‚ã¯ã“ã®ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚

CSS sprite
注æ„ã—ã¦æ¬²ã—ã„ã®ã¯background-positionã®æŒ‡å®šã®å€¤ã¯ãƒžã‚¤ãƒŠã‚¹(-)ã«ãªã‚Šã¾ã™ã€‚
ã“ã®background-positionã¨ã„ã†ã®ã¯ç”»åƒã‚’é…ç½®ã™ã‚‹ä½ç½®ã®ã“ã¨ã€‚
左上を基準ã¨ã—ã¦ãれãžã‚Œå³ã¨ä¸‹ãŒãƒ—ラスã®å€¤ã«ãªã‚Šã¾ã™ã€‚
ç”»åƒã®å³å´ã‚’表示ã—ãŸã„å ´åˆã¯ã€ç”»åƒè‡ªä½“ã¯å·¦å´ã«ç§»å‹•ã—ãªã„ã¨ã„ã‘ã¾ã›ã‚“。
ç”»åƒã®ä¸‹å´ã‚’表示ã—ãŸã„å ´åˆã¯ã€ç”»åƒè‡ªä½“ã¯ä¸Šå´ã«ç§»å‹•ã•ã›ãªã„ã¨ã„ã‘ã¾ã›ã‚“。
よãã‚ã‹ã‚‰ãªãã¦ã‚‚大丈夫。
何度も使ã£ã¦ã„ã‚‹ã†ã¡ã«æ…£ã‚Œã¦ãã¾ã™ã€‚

Leave a comment

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“

人気ã®è¨˜äº‹