7月
6
6
CSSスプライトを使ã£ã¦ãƒšãƒ¼ã‚¸ã®èªã¿è¾¼ã¿é€Ÿåº¦ã‚’å‘上ã™ã‚‹
ãŸãã•ã‚“ã®ç”»åƒã‚’使ã†ã¨ã€ç”»åƒã®æ•°ã ã‘データをèªã¿è¾¼ã¿ã«è¡Œã‹ãªã„ã¨ã„ã‘ãªã„ã®ã§ã€ãƒšãƒ¼ã‚¸å…¨ä½“ã®è¡¨ç¤ºé€Ÿåº¦ãŒé…ããªã‚Šã¾ã™ã€‚
普段ã‚ã¾ã‚Šæ°—付ã‹ãªã„ã“ã¨ã§ã™ãŒã€å°‘ã—ã§ã‚‚表示速度を早ãã—ãŸã„ã¨æ€ãˆã°ã€
ã“ã®CSS Spriteã¨ã„ã†ç”»åƒã®ä¸€éƒ¨ã®ã¿ã‚’表示ã™ã‚‹æ–¹æ³•を使ã£ã¦ã¿ã¾ã—ょã†ã€‚
CSS Spriteを使ãˆã°ã€ï¼‘度ã®ç”»åƒã®èªã¿è¾¼ã¿ã§æ¸ˆã‚€ã®ã§ãƒšãƒ¼ã‚¸å…¨ä½“ã¨ã—ã¦èªã¿è¾¼ã¿é€Ÿåº¦ãŒå‘上ã—ã¾ã™ã€‚
ã¾ãŸã€ã“ã®æ–¹æ³•ã¯CSSを使ã£ãŸãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ç”»åƒã«ã‚‚使ãˆã¾ã™ã€‚
CSS Spriteã¨ã¯å¤§ãã„ç”»åƒã‚’èªã¿è¾¼ã‚“ã§ä¸€éƒ¨ã ã‘を表示ã™ã‚‹æ–¹æ³•
CSS Spriteã¨ã¯åˆã‚ã«å¤§ãã„ç”»åƒã‚’èªã¿è¾¼ã‚“ã§ã€å¿…è¦ã«å¿œã˜ã¦ä¸€éƒ¨ã‚’表示ã™ã‚‹æ–¹æ³•ã§ã™ã€‚
ã¤ã¾ã‚Šã€æ¬¡ã®ã‚ˆã†ãªè¤‡æ•°ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒä¸¦ã‚“ã ç”»åƒã‚’用æ„ã—ã¦WEB上ã§ä¸€éƒ¨ã‚’切りå–りã¾ã™ã€‚
ã¤ã¾ã‚Šã€æ¬¡ã®ã‚ˆã†ãªè¤‡æ•°ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒä¸¦ã‚“ã ç”»åƒã‚’用æ„ã—ã¦WEB上ã§ä¸€éƒ¨ã‚’切りå–りã¾ã™ã€‚

背景画åƒã¨ã—ã¦ä¸€éƒ¨ã ã‘表示ã™ã‚‹
ã¾ãšã¯background-imageã§ç”»åƒã‚’èªã¿è¾¼ã¿ã¾ã™ã€‚
ãã®éš›ã€è¡¨ç¤ºã—ãŸã„é ˜åŸŸã®é«˜ã•ã¨å¹…を指定ã—ã¦ãŠãã¾ã™ã€‚
左上ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒé…ç½®ã•れãŸã‚ˆã†ã«è¦‹ãˆã¾ã™ãŒã€
実際ã«ã¯ç”»åƒå…¨ä½“ã‚’èªã¿è¾¼ã‚“ã§ã€å·¦ä¸Šã®ä¸€éƒ¨ã®ã¿ã‚’表示ã•ã›ã¦ã„ã‚‹ã®ã§ã™ã€‚
ã“ã“ã§ã€æ¬¡ã®ã‚ˆã†ã«background-positionã®æ•°å€¤ã‚’変ãˆã¦
背景ã®é…ç½®ä½ç½®ã‚’変ãˆã‚‹ã¨ã€åˆ¥ã®ã‚¢ã‚¤ã‚³ãƒ³ã‚’表示ã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
ã“ã®ã¨ãã«ã€å®Ÿéš›ã«ã¯ç”»åƒã¨ãã®è¡¨ç¤ºé ˜åŸŸã®é–¢ä¿‚ã¯ã“ã®ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚
注æ„ã—ã¦æ¬²ã—ã„ã®ã¯background-positionã®æŒ‡å®šã®å€¤ã¯ãƒžã‚¤ãƒŠã‚¹(-)ã«ãªã‚Šã¾ã™ã€‚
ã“ã®background-positionã¨ã„ã†ã®ã¯ç”»åƒã‚’é…ç½®ã™ã‚‹ä½ç½®ã®ã“ã¨ã€‚
左上を基準ã¨ã—ã¦ãれãžã‚Œå³ã¨ä¸‹ãŒãƒ—ラスã®å€¤ã«ãªã‚Šã¾ã™ã€‚
ç”»åƒã®å³å´ã‚’表示ã—ãŸã„å ´åˆã¯ã€ç”»åƒè‡ªä½“ã¯å·¦å´ã«ç§»å‹•ã—ãªã„ã¨ã„ã‘ã¾ã›ã‚“。
ç”»åƒã®ä¸‹å´ã‚’表示ã—ãŸã„å ´åˆã¯ã€ç”»åƒè‡ªä½“ã¯ä¸Šå´ã«ç§»å‹•ã•ã›ãªã„ã¨ã„ã‘ã¾ã›ã‚“。
よãã‚ã‹ã‚‰ãªãã¦ã‚‚大丈夫。
何度も使ã£ã¦ã„ã‚‹ã†ã¡ã«æ…£ã‚Œã¦ãã¾ã™ã€‚
ãã®éš›ã€è¡¨ç¤ºã—ãŸã„é ˜åŸŸã®é«˜ã•ã¨å¹…を指定ã—ã¦ãŠãã¾ã™ã€‚
div.image { width:128px; height:128px; background-image:url('./image/img01.png'); background-position:0px 0px; }ã“ã®ã‚ˆã†ã«ã™ã‚‹ã¨æ¬¡ã®ã‚ˆã†ãªè¡¨ç¤ºã«ãªã‚Šã¾ã™ã€‚
実際ã«ã¯ç”»åƒå…¨ä½“ã‚’èªã¿è¾¼ã‚“ã§ã€å·¦ä¸Šã®ä¸€éƒ¨ã®ã¿ã‚’表示ã•ã›ã¦ã„ã‚‹ã®ã§ã™ã€‚

ã“ã“ã§ã€æ¬¡ã®ã‚ˆã†ã«background-positionã®æ•°å€¤ã‚’変ãˆã¦
背景ã®é…ç½®ä½ç½®ã‚’変ãˆã‚‹ã¨ã€åˆ¥ã®ã‚¢ã‚¤ã‚³ãƒ³ã‚’表示ã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
div.image { width:128px; height:128px; background-image:url('./image/img01.png'); background-position:-150px 0px; }
ã“ã®ã¨ãã«ã€å®Ÿéš›ã«ã¯ç”»åƒã¨ãã®è¡¨ç¤ºé ˜åŸŸã®é–¢ä¿‚ã¯ã“ã®ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚

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


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

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰




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


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


人気ã®è¨˜äº‹
- ãªãœã‹å‰é¢ã«è¡¨ç¤ºã•れãªã„?position:relative,absoluteã¨z-indexã§ã®é‡ãªã‚Šé †ã®é–¢ä¿‚ - 118,518 views
- 当サイトã«ã¤ã„㦠- 113,214 views
- 自分ã®ãƒ‘ソコンã®ãƒãƒ¼ã‚«ãƒ«ç’°å¢ƒã§ãƒ›ãƒ¼ãƒ ページを作るã€è¦‹ã‚‹ - 84,007 views
- ã“れã¯ä½¿ãˆã‚‹ï¼ãƒžã‚¦ã‚¹ã‚’ç”»åƒã®ä¸Šã«æŒã£ã¦ãã‚‹ã¨æ˜Žã‚‹ããªã‚‹å‡¦ç†ã‚’CSSã ã‘ã§å®Ÿè£…。 - 13,943 views
- SEOã«çµ¶å¯¾ã‚„ã£ã¦ã¯ã„ã‘ãªã„。フレームセットã®ãƒ›ãƒ¼ãƒ ページ。 - 12,158 views
- フリーダイアルã®ãƒã‚´ãƒžãƒ¼ã‚¯ã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ - 11,615 views
- ã“れãŒã‚れã°ã¨ã£ã¦ã‚‚便利。ホームページを作るãŸã‚ã®ã‚½ãƒ•ト。 - 9,444 views
- FFFTPã§.htaccessãŒè¡¨ç¤ºã•れãªã„ã®ã‚’表示ã•ã›ã‚‹æ–¹æ³• - 8,628 views
- 点線を使ã£ãŸä¸‹ç·šã‚’引ã„ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹CSS - 7,937 views
- HTMLãƒ†ãƒ¼ãƒ–ãƒ«ã‚¿ã‚°ã®æ¦‚è¦ãã®ï¼’。ヘッダーã€ãƒœãƒ‡ã‚£ã€ãƒ•ッターã®ï¼“è¦ç´ 。 - 7,747 views