WEB制作(html・css(スタイルシート))に関する各種メモ書き

オンラインでRetina画像対応CSSスプライトを作成する

オンラインでRetina画像対応CSSスプライトを作成するには以下のサイトが便利です。 手順としてはまず普通の画像のCSSスプライト(画像+CSS)を作成して、その後にRetina対応の画像のみを作成します。

● CSS Sprite Generator

http://spritegen.website-performance.org

● CSSスプライトを使ってメニューを作成する例

  • http://spritegen.website-performance.org にアクセスする
  • 【clear】を押してデフォルトの画像を消す。
  • 【open】を押して、CSSスプライトで1つにまとめたい画像( x1倍 )をすべて選択する。
  • 『Settings』の各種設定(マージンやCSSクラス名)を変更。(例 : クラス名は sp とします。)
  • 【Downloads】を押して表示される画面から画像を任意の名前で保存。
  • 【Downloads】を押して表示される画面からCSSを保存。
  • CSSファイル内のスプライト画像のパスを書き換える

    background-image: url(spritesheet.png);   /* spritesheet.png を任意のパスに */
  • CSSファイル内の .sp クラスに以下のプロパティを追加
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-size: 100%;
  • 同じ手順でRetina用画像のみを作成する

No.1028
04/29 16:42

edit