[B! layout] s-e-iのブックマーク

Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。このうち「2カラ

s-e-i 2007/05/04

この方法論は知ってたけどそんな名前がついてるのは知らなかった

リンク

Particletree » Dynamic Resolution Dependent Layouts

We design and development any game with all your requi rment and needs, with all our experiences and profesional team we can make all your imagination come true! Dont hesitate to contact us and discuss all your needs. GK8 Net will give the best design base on your imagination or even we can help you to find new idea to bring all your fantasy into a canvas that ready to develop as a new game. We alw

s-e-i 2007/05/04

ブラウザのウィンドウサイズによってCSSを切り替えるJavascript。デモでは750px、950px、それ以上でレイアウトを切り替えてる。面白いけど用意するのはなかなか大変ね。

リンク

一行あたりの文字数を制限するリキッドレイアウト - 2xup.org

2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl

s-e-i 2007/05/04

"ちゃんとCSSするためのスタイルガイド入門"にもあったem単位で指定するやり方とかとか

リンク

miniturbo::Blog ネガティブマージンによるレイアウト

「マイナスマージン」や「ネガティブマージン」で組み立てるレイアウトです。てんぽさんの記事にあるように、floatにより発生するカラム落ちは、親のボックスが内包するこのボックスのwidthに原因があるのではなく、そのマージン辺に原因があります。とりあえず、以下をご覧ください。たとえば固定幅の2カラムの段組を作るときは、 <div id="content"> <div id="main"> <p>メイン的なやつ</p> </div> <div id="utilities"> <p>サブ的なやつ</p> </div> </div> こんな感じの構造になります。これに当てこむスタイルは div#content { width: 700px; margin: 0 auto; } div#content div#main { float: left; width: 100%; } div#co

s-e-i 2007/05/04

ネガティブマージンレイアウトの使い方考え方

リンク

レイアウトの基本となる画面サイズ色々

現在標準といわれている表示解像度は、XGA（1024×768ドット）だ。現在の標準的なPCがこの解像度を使っており、比較的古いタイプのPCでもこの程度のサイズをカバーしている。古いラップトップパソコンを使っているユーザーであれば表示解像度はSVGAの可能性があるが、PCの最小表示サイズVGAモード同様、新型のOSが対応するPCではあまり日常的に使われてはいないと考えてよい。また現在ではSXGA（1280×1024ドット）の解像度も優勢で、WindowsXPやMacOS X世代のOS対応機はこの環境に対応するものがほとんどだ。サイトのレイアウトに使える標準的なスペースは、ターゲットモニターの表示解像度からこれらを差し引いた大きさ、ということになる。実際のレイアウトサイズの目安には基準があり、最も低い環境に配慮した SVGAサイズなら760×420ピクセルが、標準的なサイズのXGAなら95