タグ

htmlとCompassに関するkuwalabのブックマーク (1)

  • コーダー必見、SCSS・Compassで開発効率アップ|便利なCSS Sprite実装編 | DevelopersIO

    はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます(シリーズは続きます)。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって? CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ(個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します) CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp

    コーダー必見、SCSS・Compassで開発効率アップ|便利なCSS Sprite実装編 | DevelopersIO
  • 1