Retinaディスプレイ用の画像を作成できるPhotoshopアクション・「Retinize It」Retinize ItはiOSで採用されているRetinaディスプレイに対応する為の画像を作れるPhotoshopアクションです。@2xのファイルを作成する事ができます。ドロップシャドウを用いている場合は諸注意が必要みたい。使い方は本サイトに書いてあるのでご一読下さい。 Retinize It
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コードif (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); });window.d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
