This domain may be for sale!
Get every type of asset for any type of project, and access to AI tools From $16.50/m
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、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
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 ↑の絵が何かわかる人いますか？ マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。 とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。 マインクラフトとは わかりやすく解説されているニコニコ大百科を引用。 Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。 レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。 家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways High pixel density screens, such as Apple’s Retina displays, present a challenge for web developers and designers as websites and apps need to be compatible and visually appealing on such screens.
はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてください。 SCSS/Compass CSS Sprite Media Queries 1，サンプルをキャプチャしてみ
In my last post, Designing a responsive, Retina-friendly site, I covered my design process and thoughts behind redesigning this site. I did not cover any aspects of actual development or any Jekyll specifics. This post will mainly cover coding up responsive design and the third and final post will cover retina media queries, responsive images and more. Jekyll + Rack on Heroku I last redesigned my
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates Why is Retina important in Responsive Web Design? The answer to this question is actually very simple: a lot of newest mobile Apple devices have Retina disp
The more products Apple releases, the more widespread Retina displays become. So far we have Retina capable iPhones, iPods, iPads and MacBooks of various sizes, which together make up a pretty substantial audience. Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens. Why support retina displays? I in
CSSスプライトの利用について スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。 ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。 複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。 それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。 方法 1.画像を用意する 非Retina Display用とRetina Display用の画像を2枚用意します。
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. Creating a truly responsive image gallery can be a very tricky and difficult thing. There are so many factors to consider like the layout and the features, and so many choices to make when it comes to delivering
The devil is in the details Detail is probably one of the most important values for a designer, an eye for detail should be in our DNA. As a perfectionist I like my designs to be pixel perfect. I am allergic for “jaggies” and ugly compressed artifacts in icons and images on websites. Apple’s Retina revolution is an interesting evolution that is turning the design world upside down. The Retina disp
レチナ対応機種が無かったのでこれまで避けてきたのですが、今更ながら我が家にiPhone4sがきたので、前々から構想していたレチナ対応をプラグインにしてみました。 追記： iOS6で全般うまく動いて無いみたいなので調査中です(´・ω・`) 追記：同日15時53分 諸々修正いたしました。TLの皆様、ご助力ありがとうございました!! 追記：2012年9月27日10時頃 ご要望をいただいたので、本エントリーの追記、サンプルの改修をしました。 サンプル サンプル－ダウンロード 使い方 HTML＋JavaScript <!-- 画像の幅：data-img-width 画像の高さ：data-img-height 画像のALT：data-img-alt 画像のパス：data-img-path ←追加 --> <a href="img.jpg" class="img-retina" data-img-wid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
