楽ã—ã¦æ™‚é–“çŸç¸®ï¼Compassã§ä½œã£ãŸã‚¹ãƒ—ライト画åƒã§Retina対応を行ã†æ–¹æ³• | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作ã“ã‚“ã«ã¡ã¯ã€‚UFOã‚ャッãƒãƒ£ãƒ¼é‹ãŒæ€¥é™ä¸‹ä¸ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®ã‚‚ã‚‚ã“ã§ã™ã€‚ 輪ã£ã‹ãŒã¤ã„ãŸã‚ーホルダー系をã†ã¾ãå–れるよã†ã«ãªã‚ŠãŸã„…(´・ω・｀) æ°—ã‚’å–ã‚Šç›´ã—ã¦ã€ä»Šå›žã¯Compassを使ã£ã¦ä½œã£ãŸCSSスプライト画åƒã§Retina対応を行ã†æ–¹æ³•ã‚’ã”紹介ã—ã¾ã™ã€‚ Compassを使ã£ã¦æ›¸ã出ã—ãŸã‚¹ãƒ—ライト画åƒã‚’自動ã§Retina対応ã«ã•ã›ã‚‹ スプライト画åƒã®ç”Ÿæˆ $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); ã¾ãšã¯ã‚¹ãƒ—ライト画åƒã‚’生æˆã—ã¾ã™ã€‚ å˜ä¸€ã®ç”»åƒã‚’フォルダã«å…¥ã‚Œã‚‹ã¨ã€è¦‹äº‹ã«åˆä½“ã—ãŸã‚¹ãƒ—ライト画åƒãŒimagesフォルダã«æ›¸ã出ã•ã‚Œã¾ã™ã€‚ sprite-mapã«ã¯config.rbã§æŒ‡å®šã—ãŸimagesフォルダ以下ã®ãƒ«ãƒ¼ãƒˆã‚’入れã¦ä¸‹ã•ã„。 Mixinを記述ã™ã‚‹ @mixin sprite-
Webサイト＆Webアプリã®Retina対応方法ã¾ã¨ã‚
Maykel Loomans — Designer, Digital Product Builder & Photographer
{{#tags}}- {{label}}
{{/tags}}