目の動きに合わせてデザインを。デザインの視線誘導。
- 2011年 6月16日
タグ : レイアウト
以前ほど厳しく言われなくなったような気がする、Web ページをスクロールなしで表示する範囲内でのコンテンツ配置。しかしながら、この最初の画面で何を表示するかはまだまだ重要な要素と言っても良いでしょう。じゃあいったいどれくらいのユーザがどれくらいのサイズの画面で Web サイトを見ているかと言うと、なかなかそのデータを集めるのは大変です。
そんなニーズに答えるのがGoogleの「Browser Size」サービスです。
コーディングである程度の経験を積んでいても見落としてしまいがちなのがマージンの相殺です。ある程度慣れてmarginも気軽に使っていると意外なところで想定していない余白が現れてびっくりすることも。相殺の基本的な動きを理解していてもネガティブマージンを使いだすとまた注意点も増えてきます。そんなmarginの相殺をわかりやすく説明してくれているサイトを紹介。
これまでのWebデザインではあらかじめ横幅が決まっているか、リキッドレイアウトでコンテンツの配置は固定されつつも横幅がブラウザ枠によって変化するものが主流でした。しかし最近では横幅だけでなくコンテンツの配置まで変わるといったWebならではの表現が可能になっています。使いどころは難しいかもしれませんが、一度試してみる価値はありそうですよ。
スタイルシートでレイアウトを組むときに重要なプロパティとして float と position があります。それぞれ使い勝手に特徴があり得手不得手もあるのですが、今回は特にpositionプロパティについて分かりやすく解説してくれているサイトをご紹介します。