Retina Display Media Query | CSS-Tricks
For including high-res graphics, but only for screens that can make use of them. “Retina” being “2x”: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } Or other highish-res: /* 1.25 dpr */ @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ /* Retina-specific stuff here */ } /* 1.3 dpr */ @media (-webkit-min-device-pixel-
いまさら聞けない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
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
台所の三角コーナーどけた結果ｗｗｗｗｗ : ゴールデンタイムズ
1 ：以下、名無しにかわりましてVIPがお送りします ：2013/04/07(日) 21:21:00.11 ID:TaLgRE4K0 麺がポージングしてたんだが 4 ：以下、名無しにかわりましてVIPがお送りします ：2013/04/07(日) 21:21:40.44 ID:qNhLp9OvP クッソワロタwwwwww 5 ：以下、名無しにかわりましてVIPがお送りします ：2013/04/07(日) 21:21:40.22 ID:a3UMFX5z0 サタデーナイトフィーバー！ 7 ：以下、名無しにかわりましてVIPがお送りします ：2013/04/07(日) 21:22:08.98 ID:YUv/pbtK0 すんげぇえええええええええええええええええ 8 ： 忍法帖【Lv=40,xxxPT】(-1+0：15) ：2013/04/07(日) 21:22:19.95 ID:XH50hADP0
レスポンシブWebデザインは「分けて考えない」でうまくいく
2013年4月7日 著 レスポンシブWebデザインにおけるコーダーの役割という記事を読みました。冒頭、自分では思ってもいないところでリツイートされましたとありますが、何を隠そう僕もリツイートした一人であります。記事に書かれている内容については基本的に賛同できるのですが、これを機に以前から思っていたことを二点ほど、まとめておこうかと（既にTwitter上でつぶやいたことと重複しますが）。 一点目は、レスポンシブWebデザインの場合、スクリーンサイズなりスクリーン幅ごとに「分けて」考えないほうが、うまくデザインできるのではないか？ということ。逆に言えば、分けて考えれば考えるほど、うまくデザインできないように思います。たとえばスマートフォン、タブレット、デスクトップPCそれぞれに完全に「分けて」デザインされたものをメディアクエリーで合体させたところで、それが優れたレスポンシブWebデザインと言え
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
[悪徳商法？支店]: エンジニアのモチベーションを根こそぎ奪う！たった７つの魔法の言葉
１．テスト書かなくていいので、工数減らしてください。 ソフトを作る以上、なんらかのテストは必要です。実行して結果を見るとか、ブラウザで表示するとか。その確認を楽にするためにテストを書くのに、テストを書かないからといって工数が大幅に減るわけではありません。そして、いざバグが発生したりすると、切り分けのために工数が必要になり、「テストが無い部分のチェックの必要」や「不安」がエンジニアのモチベーションを削って行きます。 結局のところ、「バグが発生しないことを前提に」スケジュールが組まれるだけです。 ２．とりあえず動けばいいです。 とりあえず動いたとして、特定の条件で発生する致命的なバグを許してくれるのか許してくれないのか、要求側の胸三寸です。実験レベルと商用レベルでは考慮すべき障害のレベルや影響範囲が異なるのですから、何を求めるのか明確にしないと、ソフトウェアは動きません。なぜなら、コンピュータ
僕がMacのホームディレクトリを削除するに至った経緯と、復元するまでの道のり | CreativeStyle
最初に結論から申し上げますと、僕 @kadoppe はアホです。大馬鹿者です。 この度、仕事にフル活用しているMacBook Proのホームディレクトリ（/Users/＜ユーザ名＞)を削除するという愚行を働いてしまいました。 具体的に何をしたのか。それは、以下のコマンドの実行です。 コマンドにあまり詳しくない人のために説明すると、この短いコマンドをターミナルを開いて実行するだけで、有無を言わさずホームディレクトリの削除が開始されてしまう、恐怖のコマンドです。良い子は危険だから真似しちゃダメだよ！ ではここからは、僕は何故こんなことをしてしまったのか、その経緯を言い訳がましく説明したいと思います。恥ずかしいですが、二度とこんなことを繰り返さないようにするために。 「~」という名前のディレクトリ 通常「~」（チルダ）という記号はホームディレクトリを表します。~/はMacだと実際には/Users
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
