Webデザイナーã®ãŸã‚ã®Sass/Compass入門 先生：石本 å…‰å¸
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusã¯ã€ŒWEBã«èª•ç”Ÿã—ãŸã€å¦æ ¡ã®æ–°ã—ã„ã‚«ã‚¿ãƒã€ã€‚ ＷＥＢ生放é€ã®æŽˆæ¥ã‚’ç„¡æ–™ã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ â–¼ã“ã¡ã‚‰ã‹ã‚‰æŽˆæ¥ã«å‚åŠ ã™ã‚‹ã¨ã€å…ˆç”Ÿã¸ã®è³ªå•ã‚„ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¨ã®ãƒãƒ£ãƒƒãƒˆã€è³‡æ–™ã®æ‹¡å¤§è¡¨ç¤ºç‰ãŒå¯èƒ½ã§ã™ã€‚ https://schoo.jp/class/228/room ーーーーーーーーーーーーーーーーーーーーーーーRead less
compassã§cssスプライトã™ã‚‹ã¨ãã®å‡ºåŠ›ã‚’ã§ãã‚‹ã ã‘å°‘ãªãã™ã‚‹è©¦ã¿ - ã—ã‚‹ã¦ã
æ¦‚è¦ Sprite layouts | Compass Documentation compassã§ã®cssスプライトを試ã—ã¦ã¿ãŸã®ã§ãƒ¡ãƒ¢ã€‚ sprite-backgroundã£ã¦ã„ã†mixinã¯çµæ§‹è‰²ã€…ãªäººãŒãƒ–ãƒã‚°ã«æ›¸ã„ã¦ã‚‹ã‚“ã ã‘ã©ã€retina対応ã—ã¦ã„ãªã‹ã£ãŸã‚Šã€ç„¡é§„ãªå‡¦ç†ãŒå…¥ã£ã¦ã„ãŸã‚Šã—ã¦ãªã‚“ã‹ã—ã£ãã‚Šã“ãªã‹ã£ãŸã®ã§è‡ªåˆ†ã§å®Ÿè£…ã—ã¦ã¿ãŸã€‚ 完æˆå“ 以下ã®ãƒ•ã‚¡ã‚¤ãƒ«ã¯ä½¿ã„回ã›ã‚‹ã®ã§ã€mixins/_sprite.scssã¿ãŸã„ã«ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«ä¾å˜ã—ãªã„ファイルã¨ã—ã¦ç½®ã„ã¦ãŠã。 @mixin sprite-background-size($name, $sprites, $device-pixel-ratio: 2) { $_width: image-width(sprite-file($sprites, $name)) / $device-pixel-ratio; $_height:
åˆã‚ã¦Sassã¨Compassを使ã£ãŸéš›ã«å‚考ã«ã—ãŸè¨˜äº‹ã¾ã¨ã‚
ã—ã°ã‚‰ãå‰ã‹ã‚‰æ°—ã«ãªã£ã¦ã„ãŸCSSを書ã時ã«ä¾¿åˆ©ã ã¨ã„ã†ã€ŒSassã€ã¨ã€ŒCompassã€ã‚’自分ã®ã‚µã‚¤ãƒˆã‚’作る時ã«ä½¿ã£ã¦ã¿ã¾ã—ãŸã€‚ é †ç•ªã«å°Žå…¥ã®æ‰‹é †ã‚’追ã£ã¦ã‚‚ã„ã„ã®ã§ã™ãŒã€æ¤œç´¢ã™ã‚‹ã¨å¤šãã®ã‚µã‚¤ãƒˆãŒç´¹ä»‹ã—ã¦ã„ã¾ã™ã®ã§ã€ç§ãŒè¦‹ã¦å‚考ã«ã—ãŸãƒšãƒ¼ã‚¸ã‚’ã¾ã¨ã‚ã¦ãŠããŸã„ã¨æ€ã„ã¾ã™ã€‚ Sassã¨ã¯ ã¾ãšSassã¨ã¯ä½•ã‹ã¨è¨€ã†ã¨ã€CSSを生æˆã™ã‚‹ãŸã‚ã®ãƒ¡ã‚¿è¨€èªžã§ã€ã“れを利用ã™ã‚‹ã“ã¨ã§CSSã‚’æ—©ã書ã‘ãŸã‚Šã€è¨˜è¿°ãŒæ¥½ã«ãªã£ãŸã‚Šã—ã¾ã™ã€‚ Sassã®å…¬å¼ã‚µã‚¤ãƒˆã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ Sass – Syntactically Awesome Stylesheets Compassã¨ã¯ Sassã‚’æ‹¡å¼µã—ã¦ã€ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚’è¿½åŠ ã—ã¦ãれるもã®ã§ã™ã€‚ベンダープレフィックスを自動ã§ã¤ã‘ã¦ãã‚ŒãŸã‚Šã€ãƒªã‚»ãƒƒãƒˆCSSを呼ã³å‡ºã—ã¦ãã‚ŒãŸã‚Šã€CSSスプライトを使ãˆãŸã‚Šã—ã¾ã™ã€‚ Compassã®ãƒ‰ã‚ュメントã¯ä»¥ä¸‹ã‹ã‚‰ç¢ºèªã§ãã¾ã™ã€‚ Compass H
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ | DevelopersIO
コーダー必見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜Retina Display対応CSS Spriteç·¨ ã¯ã˜ã‚㫠特ã«å¯’ã„今日ã“ã®é ƒã§ã™ãŒèªè€…ã®çš†æ§˜ã¯å…ƒæ°—ã«ãŠéŽã”ã—ã§ã—ょã†ã‹ï¼Ÿ 2月ã®ãƒªã‚¢å……イベントã¨ã„ãˆã°ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ã§ã™ã（ä¼æ¥æˆ¦ç•¥ï¼‰ã€‚ãƒãƒ¬ãƒ³ã‚¿ã‚¤ãƒ³ç”¨ã®ãƒãƒ§ã‚³ã‚’販売ã™ã‚‹ãŠåº—も増ãˆã¦ãã¾ã—ãŸã€‚ 弊社ã¯ç§‹è‘‰åŽŸã¨ã„ã†ç«‹åœ°ã§ã™ãŒæ„外ãªã“ã¨ã«æ—¢å©šè€…ãŒå¤šã„ã®ã§ã€Œãƒªã‚¢å……爆発ã—ã‚ã€ã¨å˜†ã男性ã¯å°‘æ•°ã®ã‚ˆã†ã§ã™ã€‚ ã¡ãªã¿ã«ãƒ“ターãƒãƒ§ã‚³ãŒå¥½ãã§ã™ã€‚ 本題 今回ã¯å°‘ã—å‰ã«åŸ·ç†ã—ãŸã€Œã‚³ãƒ¼ãƒ€ãƒ¼å¿…見ã€SCSS・Compassã§é–‹ç™ºåŠ¹çŽ‡ã‚¢ãƒƒãƒ—｜便利ãªCSS Sprite実装編ã€ã‚’発展ã•ã›ã¦SCSS・Compassã§Retina Displayã«å¯¾å¿œã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ 事å‰ã«å¿…è¦ãªçŸ¥è˜ ã“ã®è¨˜äº‹ã§ã¯ã€ä»¥ä¸‹ã®äº‹å‰çŸ¥è˜ãŒå¿…è¦ã«ãªã‚Šã¾ã™ã€‚ 記事ä¸ã§ã‚‚解説を挟ã¿ã¾ã™ãŒã€è©³ã—ãã¯è§£èª¬ã§æ¡ˆå†…ã—ã¦ã„るページをå‚考ã«ã—ã¦ãã ã•
Sublime Text 2ã§ã‚³ãƒ³ãƒ‘イル編 ｜ クラスメソッド開発ブãƒã‚°
ã¯ã˜ã‚ã« ã“ã®ã‚·ãƒªãƒ¼ã‚ºã€Œã™ãã«ä½¿ãˆã‚‹SCSS入門シリーズã€ã§ã¯Scoutを使ã£ã¦ã‚³ãƒ³ãƒ‘イルã—ã¦ãã¾ã—ãŸã€‚ 最近Sublime Text 2ã®ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚‚è²·ã£ã¦ã€æœ¬æ ¼çš„ã«ä½¿ã„始ã‚ã¾ã—ãŸã€‚ ãã“ã§ã€ä»Šå›žã¯Sublime Text 2（Windows, Mac）を使ã£ã¦ã‚³ãƒ³ãƒ‘イルã™ã‚‹æ–¹æ³•ã‚’調ã¹ãŸã®ã§ã€ã¾ã¨ã‚ã¦ç´¹ä»‹ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã«è‹¦æ‰‹ãªäººãŒå¤šã„ã‹ã‚‚ã—ã‚Œãªã„é»’ã„ç”»é¢ã€Œã‚³ãƒžãƒ³ãƒ‰ãƒ—ãƒãƒ³ãƒ—トã¨ã‚¿ãƒ¼ãƒŸãƒŠãƒ«ã€ã‚’利用ã—ã¾ã™ã€‚ 難ã—ã„ã‚“ã˜ã‚ƒãªã„ã‹ã¨æ€ã†ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ãŒã€æ˜¯éžæŒ‘戦ã—ã¦ã¿ã¦ãã ã•ã„。ãã®ã†ã¡å¤§ã—ãŸã“ã¨ã—ã¦ãªã„ã˜ã‚ƒã‚“ã¨æ€ãˆã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ 主ãªæµã‚Œ 主ãªæµã‚Œã¯ã“ã‚“ãªæ„Ÿã˜ã§ã€æœ€åˆã«é»’ã„ç”»é¢ã§ã‚³ãƒžãƒ³ãƒ‰ã‚’入力ã—ã¦ã„ãã¾ã™ã€‚ ãã‚ŒãŒçµ‚ã‚ã‚Œã°Sublime Text 2ã®è¨å®šã‚’è¡Œã„ã€ã‚³ãƒ³ãƒ‘イルを試ã—ã¾ã™ã€‚ Rybyã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ« インストールã®ç¢ºèªã¨ã‚³ãƒ³ã‚½ãƒ¼ãƒ« Sassã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«
å°‘ãªã„手間ã¨çŸ¥è˜ã§ãã‚Œãªã‚Šã«è¦‹ã›ã‚‹ã€ã‚ºãƒ«ã„デザインテクニック
å°‘ãªã„手間ã¨çŸ¥è˜ã§ãã‚Œãªã‚Šã«è¦‹ã›ã‚‹ã€ã‚ºãƒ«ã„デザインテクニック：ズルã„デザイン（1）（1/2 ページ） デザインãŒè‡ªåˆ†ã§ã‚¤ã‚¤æ„Ÿã˜ã«ä½œã‚ŒãŸã‚‰ã„ã„ãªã‚ã¨ã„ã†ãƒ—ãƒã‚°ãƒ©ãƒžã®ã¿ãªã•ã‚“。少ãªã„手間ã§ç°¡å˜ã«ã€ã¡ã‚‡ã£ã¨ã„ã„æ„Ÿã˜ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã«è¦‹ã›ã‚‹ãŸã‚ã®ã€ã¡ã‚‡ã£ã¨ã—ãŸå°ã‚ºãƒ«ã„Tipsを紹介ã—ã¾ã™ Webプãƒã‚°ãƒ©ãƒžã€Webエンジニアã®çš†ã•ã‚“ãŒã€å€‹äººã§ä½œã‚‹Webサービスやãƒãƒƒã‚«ã‚½ãƒ³ãªã©ã§ã€çŸæœŸé–“ã«é›†ä¸ã—ã¦ã‚µãƒ¼ãƒ“ス開発ã—ã¦ãƒãƒ¼ãƒ³ãƒã—ãŸã„ã¨ãã«ã€ã‚‚ã†ã¡ã‚‡ã£ã¨è‡ªåˆ†ã§ã‚¤ã‚¤æ„Ÿã˜ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã§ãã‚‹ã¨ã„ã„ãªã‚ã¨ã„ã†å£°ã‚’よãèžãã¾ã™ã€‚ ã“ã®ä¼ç”»ã¯ã€ãã‚“ãªãƒ—ãƒã‚°ãƒ©ãƒžãŒã€å°‘ãªã„手間ã§ç°¡å˜ã«ã€ã¡ã‚‡ã£ã¨ã„ã„æ„Ÿã˜ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã«è¦‹ã›ã‚‹ãŸã‚ã®ã€ã¡ã‚‡ã£ã¨ã—ãŸå°ã‚ºãƒ«ã„Tipsを紹介ã—ã¾ã™ã€‚ （注）ã“ã®ãƒšãƒ¼ã‚¸ã§ã¯ã€å€‹ã€…ã®ãƒ‡ã‚¶ã‚¤ãƒ³è¦ç´ を分ã‹ã‚Šã‚„ã™ã説明ã™ã‚‹ãŸã‚ã«ã€å®Ÿå¯¸ã‚µã‚¤ã‚ºã‚ˆã‚Šç”»åƒã‚’拡大ã—ã¦ä½¿ç”¨ã—ã¦ã„ã¾ã™ã€‚ ズルã„デザインã¯Sassã¨Compassを利用ã—
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
compass ベンダープリフィックス
{{#tags}}- {{label}}
{{/tags}}