これだ！っていうRetina対応したCSSスプライトのmixinがなかったから いろいろした いろいろするにあたってこちらのmixinを参考にさせていただきました ありがとうございます https://gist.github.com/4072251 例： スプライト画像のディレクトリ buttons 個々の画像名 nav01,nav02,nav03,nav04 個々の画像のサイズがすべて同じな場合 mixin @mixin all-retina-sprites($map, $dimensions: false){ $base-class: sprite-map-name($map); $child-name: nth((sprite-names($map)),1); .#{$base-class} { background: sprite-url($map) no-repea
擬似要素と content プロパティを利用した画像置換テクニックの NIR (Nash Image replacement) と、いわゆる Retina ディスプレイ向けの高解像度画像 (sprites@2x.png みたいなやつ) を組み合わせる方法について。まずは NIR についておさらい: .nir { overflow: hidden; width: 160px; height: 50px; *background: url(sprites.png) no-repeat 0 -25px; *text-indent: -9999px; } .nir:before { content: url(sprites.png); display: inline-block; font-size: 0; line-height: 0; margin-left: 0; margin-top: -
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
