CSS Sprite Generator
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
HTTPリクエスト数削減テクニック2： CSS Sprite編
ã¯ã˜ã‚ã« ã“ã‚“ã«ã¡ã¯ã€ã‚¯ãƒ©ã‚¹ãƒ¡ã‚½ãƒƒãƒ‰æ ªå¼ä¼šç¤¾ã®é‡Žä¸ã§ã™ã€‚ HTTPリクエスト削減テクニックã®ç´¹ä»‹ã«å…¥ã‚Šã€å‰å›žã®ã€Žãƒªã‚¯ã‚¨ã‚¹ãƒˆæ•°å‰Šæ¸›ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯1：インラインイメージ編ã€ã§ã¯ã€ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã‚¤ãƒ¡ãƒ¼ã‚¸ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã—ãŸã€‚本記事ã§ã¯ã€ŒCSS Spriteã€ã®åŸºæœ¬çš„ãªçŸ¥è˜ã¨ä½¿ã„æ–¹ã€ä½¿ã„ã©ã“ã‚ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ã™ã§ã«å®šç•ªã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã¨ãªã£ã¦ã„ã¾ã™ãŒã€ä½•ã¨ãªã使ã£ã¦ã„ã‚‹ã“ã¨ãŒå¤šã„ã¨æ€ã„ã¾ã™ã€‚åˆå¦è€…ã®æ–¹ã«ã‚‚ç†è§£ã—ã¦ã„ãŸã ã‘るよã†è©³ã—ã解説ã—ã¾ã™ã€‚ 対象者 対象者ã¯ä¸»ã«ã‚³ãƒ¼ãƒ€ãƒ¼ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã§ã™ã€‚ デザインã¨ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’åˆã‚ã›ã¦æ‹…当ã™ã‚‹Webデザイナーも対象ã§ã™ã€‚ コーダー・フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ Webデザイナー Webディレクター Web担当者 CSS Spriteã¨ã¯ Webサイトã§ã¯ã‚¢ã‚¤ã‚³ãƒ³ã‚„ナビゲーションãªã©ã«å¤šãã®ç”»åƒãŒä½¿ã‚ã‚Œã€ã‚µã‚¤ãƒˆã«ã‚ˆã£ã¦ã¯20個30個ã¨ãŸãã•ã‚“ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒä½¿ã‚
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ | DevelopersIO
ã¯ã˜ã‚㫠特ã«å¯’ã„今日ã“ã®é ƒã§ã™ãŒèªè€…ã®çš†æ§˜ã¯å…ƒæ°—ã«ãŠéŽã”ã—ã§ã—ょã†ã‹ï¼Ÿ 2月ã®ãƒªã‚¢å……イベントã¨ã„ãˆã°ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ã§ã™ã（ä¼æ¥æˆ¦ç•¥ï¼‰ã€‚ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ç”¨ã®ãƒãƒ§ã‚³ã‚’販売ã™ã‚‹ãŠåº—も増ãˆã¦ãã¾ã—ãŸã€‚ 弊社ã¯ç§‹è‘‰åŽŸã¨ã„ã†ç«‹åœ°ã§ã™ãŒæ„外ãªã“ã¨ã«æ—¢å©šè€…ãŒå¤šã„ã®ã§ã€Œãƒªã‚¢å……爆発ã—ã‚ã€ã¨å˜†ã男性ã¯å°‘æ•°ã®ã‚ˆã†ã§ã™ã€‚ ã¡ãªã¿ã«ãƒ“ターãƒãƒ§ã‚³ãŒå¥½ãã§ã™ã€‚ 本題 今回ã¯å°‘ã—å‰ã«åŸ·ç†ã—ãŸã€Œã‚³ãƒ¼ãƒ€ãƒ¼å¿…見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜便利ãªCSS Sprite実装編ã€ã‚’発展ã•ã›ã¦SCSS・Compassã§Retina Displayã«å¯¾å¿œã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ 事å‰ã«å¿…è¦ãªçŸ¥è˜ ã“ã®è¨˜äº‹ã§ã¯ã€ä»¥ä¸‹ã®äº‹å‰çŸ¥è˜ãŒå¿…è¦ã«ãªã‚Šã¾ã™ã€‚ 記事ä¸ã§ã‚‚解説を挟ã¿ã¾ã™ãŒã€è©³ã—ãã¯è§£èª¬ã§æ¡ˆå†…ã—ã¦ã„るページをå‚考ã«ã—ã¦ãã ã•ã„。 SCSS/Compass CSS Sprite Media Queries 1，サンプルをã‚ャプãƒãƒ£ã—ã¦ã¿
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}