【やじうまWatch】月を1ピクセルとして太陽系を再現したウェブページ、サイズや距離を実感しやすいと評判 -INTERNET Watch

2015/07/26 70 users やじうまWatch ウェブページ 天体 地球 太陽

やじうまWatch 月を1ピクセルとして太陽系を再現したウェブページ、サイズや距離を実感しやすいと評判 （2015/7/27 06:00） 地球や月、太陽など、天体の大きさを実感するのはなかなか難しい。各天体の大きさの違いともなればなおさらだ。この週末にネットで話題になっていたのが、月（直径3474.8km）を1ピクセルとした場合に、その他の太陽系内の天体がどのくらいのサイズになるか、またそれぞれ... 続きを読む

1ピクセルの月を中心に太陽系のすさまじい距離感とスケールを体感できる「If the Moon Was Only 1 Pixel」 - GIGAZINE

2014/03/05 215 users GIGAZINE 海王星 冥王星 天王星 Pixel

水星・金星・地球・火星・木星・土星・天王星・海王星・冥王星という太陽系の星々の距離やスケールを限りのある紙面上で実際に比較するのは難しく、多くの場合、距離や大きさが略されたものになるのですが、月を1ピクセルと仮定し、ひたすらブラウザをスクロールしていくことで、その距離感や大きさを体感できるのが「If the Moon Was Only 1 Pixel」です。 If the Moon Was Onl... 続きを読む

jQueryでRetinaディスプレイを判別して処理を変える方法 | BlackFlag

2012/08/29 170 users iPhone jQuery BlackFlag ディスプレイ

iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方... 続きを読む

むちゃくちゃ綺麗なHiDPIモードを有効にする | Macの手書き説明書

2012/03/18 53 users HiDPIモード Mac Retina 手書き説明書 網膜

次世代ディスプレイのためのHiDPIモード世間では新しいiPadやiPhone 4SのRetina(網膜)ディスプレイが話題になっていますが、実はMacにもそういった画面解像度が高いディスプレイのためのHiDPIモードがもう搭載されています。HiDPIモードとは画面サイズはそのままで画面解像度が高くなると1ピクセルの幅が小さくなるため、1ピクセルを縦・横二倍の4ピクセルで表示させ、大きく綺麗に表示... 続きを読む

ウェブデザインにおける「1ピクセルのこだわり」に関するエントリーいろいろ | IDEA*IDEA

2011/10/11 268 users IDEA レイヤ ウェブデザイン Photoshop ウロコ

なんかいつも検索しているような気がするのでメモ的にエントリー・・・。 さて「1ピクセルへのこだわり」に関するエントリーいろいろです。神は細部に宿るので参考にしたいところです。 Webデザインにおける、1pxへのこだわり « Parkn Park グラデーションの開始色と終了色でピクセルラインつくるってところが目からウロコでしたよ。必読。 Webデザインの1pxを作るためのPhotoshopのレイヤ... 続きを読む

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

2011/05/04 105 users URLバー スマホサイト制作 方法 気配り Japan

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさ... 続きを読む

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

2011/05/04 105 users URLバー スマホサイト制作 方法 気配り Japan

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさ... 続きを読む

１ピクのラインにこだわったデザインスタディ | コリス

2008/12/17 339 users コリス ヘッダ エントリー 背景 1ピク

Spoonfed Designのエントリーから、ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディを紹介します。 続きを読む

1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル

2008/02/08 523 users エンタープライズ プロ Webデザイナ 涙ぐましい努力 CSS

CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロ... 続きを読む

photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン　BLOG

2007/03/31 435 users 両者 原寸 Photoshop 立体感 ライン

下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。 続きを読む