タグ

retinaに関するku_marinのブックマーク (22)

  • ブログの記事内画像を楽してRetinaディスプレイに対応させる方法

    「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。 ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ文内の画像です。 メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「[email protected]」という縦横2倍の画像を用意することもできると思います。 しかし、ブログ文内の画像は数も多く、「[email protected]」のようなファイル名の画像もいちいち用意していられないと思います。 そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。 このブログでは、WordPress で記事を書くときに[メディアを追加]を

    ブログの記事内画像を楽してRetinaディスプレイに対応させる方法
  • The Ultimate Guide To iPhone Resolutions

    UPDATE: We have added the new iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max to the guide below. The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only

    ku_marin
    ku_marin 2014/09/24
    iPhone2G〜6+までのiPhoneの解像度比較、めっちゃ見やすい
  • iPhone6/iPhone6 Plusの画面対応について - Qiita

    iOSにも画面フラグメントの時代がきました。 特にややこしくしているのが、iPhone6 Plusです。ピクセル比が3倍。 iPhone6 plusのiOSシミュレーターで画面のサイズをデバッグしてみると「414 x 736」になり、3倍すると「1242 x 2208」ですが、公称では「1080 x 1920」です。ということはピクセル比は正確には@2.46とかなのかな・・・。この辺りの仕組みがまだつかめてません。 既存プロジェクトの対応方法 iPhone6/6+のiOSシミュレーターで、既存のiOSプロジェクトを特に何もせずにビルド、実行すると「320 x 568」いわゆるiPhone5/5sサイズを拡大したような形で表示されます。(iPadiPhoneアプリをx2で実行したような感じ。ただiPadiPhoneほどの解像度の差は低いので、そこまで違和感は感じない。) iPhone6/

    iPhone6/iPhone6 Plusの画面対応について - Qiita
    ku_marin
    ku_marin 2014/09/12
    “iPhone6 Plusに関しては、 2208×1242 (with 736x414 points)と考えてればよさそう”
  • iPhone 6 Screens Demystified | PaintCode

    Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree

    iPhone 6 Screens Demystified | PaintCode
    ku_marin
    ku_marin 2014/09/12
    iPhone6と+のRetinaについての詳細。分かりやすい
  • PCサイトのRetinaディスプレイ対応やっとく? - やっぱりWebが好き - Writing Mode

    今年からプライベートではMacBook Pro(13インチ)のRetinaディスプレイモデルを使っているから、最近はWebサイトの画像がボヤけて見えるのが気になって仕方ないのです。 これからはPCのディスプレイもどんどん高解像度になっていくであろうことを考えると、今からPC向けサイトのRetina(高精細)ディスプレイ対策もしっかり考えておきたい。 というわけで、備忘録がてら久々にWeb制作の現場感漂うエントリーをお届けしたいと思います。 これまでスマホ向けにしか考えたことのなかったRetinaディスプレイ対応ですが、やっぱり自分のマシンがRetinaディスプレイになってみるとPCでも格的に対策せねばと考えてしまいます。 スマホやタブレット端末以外ではまだまだ普及率の低いRetinaディスプレイだけど、おそらく今後数年のうちにPCでも一般的になってくるんじゃないかな。 現状、Retina

    PCサイトのRetinaディスプレイ対応やっとく? - やっぱりWebが好き - Writing Mode
    ku_marin
    ku_marin 2014/03/05
    めんどくさいから自分のブログとかは通常PCでも2倍値のまま表示させちゃってる。これからどうしようかなぁ
  • Retinaでもボケない「シンボルアイコン」を使いこなそう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうも!デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO(約500ppi)、ジャパンディスプレイのLTPS(約650ppi)などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという!4K時代の到来を予感させる!(その前に地球が終わらなければいいのだが!) ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何? 読んで字の如し、「図形のフォント」です。タイ

    Retinaでもボケない「シンボルアイコン」を使いこなそう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • CompassでCSSスプライト(Retina対応)

    今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio

    CompassでCSSスプライト(Retina対応)
  • WebページをRetina対応させるテクニック~基礎知識編

    WebページをRetina対応させるテクニック~基礎知識編:jQuery×HTMLCSS3を真面目に勉強(4)(1/2 ページ) iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応(1920×1080ピクセル)のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場

    WebページをRetina対応させるテクニック~基礎知識編
  • Flatis

    ku_marin
    ku_marin 2013/05/22
    毎回忘れちゃう
  • いまさら聞けないRetina対応のための「ピクセル」の話

    ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです(と考えています)。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i

    いまさら聞けないRetina対応のための「ピクセル」の話
  • jQueryで画像をRetina対応させるプラグインを作ってみた | soplog(そぷログ)

    レチナ対応機種が無かったのでこれまで避けてきたのですが、今更ながら我が家にiPhone4sがきたので、前々から構想していたレチナ対応をプラグインにしてみました。 追記: iOS6で全般うまく動いて無いみたいなので調査中です(´・ω・`) 追記:同日15時53分 諸々修正いたしました。TLの皆様、ご助力ありがとうございました!! 追記:2012年9月27日10時頃 ご要望をいただいたので、エントリーの追記、サンプルの改修をしました。 サンプル サンプル-ダウンロード 使い方 HTMLJavaScript <!-- 画像の幅:data-img-width 画像の高さ:data-img-height 画像のALT:data-img-alt 画像のパス:data-img-path ←追加 --> <a href="img.jpg" class="img-retina" data-img-wid

    jQueryで画像をRetina対応させるプラグインを作ってみた | soplog(そぷログ)
  • Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2 - Show-web

    前回のRetinaディスプレイ時に読み込む画像を切り替えるjQueryでは以下の通りRethina・非Retina画像のリクエストが発生して非効率なスクリプトとなってしまっていたので修正しました。 修正後のソースは以下の通り。 [html] <p><img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /></p> [Javascript] $(function(){ $('img').each(function(){ var src = $(this).attr('data-original'); if(window.devicePixelRatio === 2) { $(this).attr('data-original', src.replace(/(\.jpg|

    Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2 - Show-web
  • 1216彩票-官网平台

    您不具备使用所提供的凭据查看该目录或页的权限。 请尝试以下操作: 如果您认为自己应该能够查看该目录或页面,请与网站管理员联系。 单击刷新 按钮,并使用其他凭据重试。 HTTP 错误 401.1 - 未经授权:访问由于凭据无效被拒绝。 Internet 信息服务 (IIS) 技术信息(为技术支持人员提供) 转到 Microsoft 产品支持服务 并搜索包括“HTTP ”和“401 ”的标题。 打开“IIS 帮助”(可在 IIS 管理器 (inetmgr) 中访问),然后搜索标题为“身份验证”、“访问控制”和“关于自定义错误消息”的主题。

    ku_marin
    ku_marin 2012/09/11
    すごく便利ですが、相対パスで書いても、DOMだと絶対パスになっているような
  • iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える - かちびと.net

    iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでs コード if (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); }); window

    iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える - かちびと.net
  • Retina Images

    Retina Images serves different images based on the device being used by the viewer, all you have to do is create a high-res version of each image.Automatically serve high-res images, to those who'll appreciate them. View project on GitHub Download Retina Images (v1.0) Mouse-over to see the effect of Retina Images This demo actually replicates what happens on retina devices Back to top About Retin

  • とくめいどうぶつえん

    とくめいどうぶつえん
  • Towards A Retina Web — Smashing Magazine

    Reda Lemeden covers some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities, and invites Web designers and developers to offer a pleasurable viewing user experience regardless of the display they are using. With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the pr

    Towards A Retina Web — Smashing Magazine
    ku_marin
    ku_marin 2012/08/22
    Ratina対処
  • Retinaサポートその二歩目 – Taiyo Fujii, writer

    先日公開したRetinaサポートWebへの第一歩はMacお宝鑑定団Blogでも採り上げていただいたため、開設したばかりの Blog にはもったいないほどの閲覧数となった。感謝! 前回のエントリーでは<img>要素の画像を置き換える方法を説明した。投稿エントリーの画像を置き換えていくにはあの方法が適していると思うが、今回はバックグラウンド画像や Web サイトで何度も登場する固定画像を、スタイルシートを用いて変更する方法を説明する。 今日からこのブログのメニューは Retina 対応のテクスチャーを背景画像として登録している。Retina 対応でない環境で見るとただのグラデーションが表示されるが、 Retina ディスプレイで見ると細かなメッシュパターンがメニューの背景画像として現れる。しかし、こうやって並べると愕然とするね。 [retina normal=”http://blog.taiy

    Retinaサポートその二歩目 – Taiyo Fujii, writer
  • スマートフォンと画面解像度・ピクセル密度

    320 dpi Androidの密度グループ iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。 IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。 ピクセル密度の違いが見た目に影響する さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出て

  • 【Fireworks】Retina対応用にページを分けるFireworksコマンド | バシャログ。

    欧州選手権より睡眠をとるminamiです。今日はサッカー代表戦ですね! 昨日深夜のWWDC 2012基調講演で、Retinaディスプレイ MacBook Proが発表になりましたね!15.4型は2880 x 1800画素ということで、今までのノートパソコンでは考えられない解像度になるようです。 気になるのは、現在iPhone 4S用のサイト制作で行う必要があるRetina対応をPCでもしなければならないのかも・・・ということ。 そんな時にちょっとだけ便利になるかもしれないFireworksのコマンドを作ってみました。バージョンはCS5.1で確認しています。 Retina対応用にページを分けるFireworksコマンド 右クリックなどで保存してお使いください。ご使用は自己責任でお願いします。 原寸表示の2倍でデザインしたファイルを作ります。スライスに名前をつけて設定した状態でコマンドを走らせ

    【Fireworks】Retina対応用にページを分けるFireworksコマンド | バシャログ。