アイコンとかに便利なSassの書き方 | Workabroad.jp

2014/09/09 13 users CANPATH Sass マージン CSS アイコン

CSS Spriteでアイコンを表示させるってのは良くやるけども、 意外にもSassで書いたのは初めてだったので、メモ。 CANPATHで選べるアイコンを増やしました。 自分史を作るのがまたちょっと楽しくなると思います。 で、このCSSを作る方法。 まずは画像を用意します。 ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。 なのでこの画像は、500px ... 続きを読む

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

2013/03/14 478 users ビルドツール gzip minify 備忘録 CSS

Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 さらにメタ言語などを使用すると、複数のツールを使用しなければならないケースも出てきます。 それらの作業をまとめて自動化してしまう、Grunt.jsが面白かったので備忘録もかねて紹介します。 Grunt.jsとは？ Grunt.jsは、サーバーサ... 続きを読む

はてなブログで簡単にアイコンを出す方法 - Ueday HatenaBlog

2012/12/06 18 users アイコン ICON ボク 本文 はてなブログ

2012-12-06 はてなブログで簡単にアイコンを出す方法 こういう感じで使う ↓ぼくのホームページです！！１１ アイコン出す方法 ブログの本文で、下記のようなiタグを書きます。icon-◯◯の中を色々変えると色々アイコンが変わる。 <i class="icon-dashboard"></i> なんでアイコン出せるのか はてなブログでは管理ページなどにアイコンのCSS Spriteを使っているの... 続きを読む

img要素でCSS Spriteする方法: 小粋空間

2012/06/06 90 users 小粋空間 img要素 座標 HTTPリクエスト数 手法

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは... 続きを読む

CSS Spriteを活用しよう - DesignWalker

2008/02/16 1066 users DesignWalker

みなさんお馴染みのYouTube このYouTubeのプレーヤーに使われている画像は実は↓のような一枚の画像が用意されていて、スタイルでうまく表示されているようです。 画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。 このテクニックをCSS ... 続きを読む