タグ : レイアウト

目の動きに合わせてデザインを。デザインの視線誘導。

デザインを作るときはZ型の視線移動を意識して作るように!と言っているのですが、配置だけでなく色でも視線誘導が出来るということで、実例が紹介されているサイトを見つけました。

続きを読む

Webページの表示範囲をシミュレーション。「Browser Size」

以前ほど厳しく言われなくなったような気がする、Web ページをスクロールなしで表示する範囲内でのコンテンツ配置。しかしながら、この最初の画面で何を表示するかはまだまだ重要な要素と言っても良いでしょう。じゃあいったいどれくらいのユーザがどれくらいのサイズの画面で Web サイトを見ているかと言うと、なかなかそのデータを集めるのは大変です。

そんなニーズに答えるのがGoogleの「Browser Size」サービスです。

続きを読む

迂闊に触るとヤケドする!marginの相殺を理解する。

コーディングである程度の経験を積んでいても見落としてしまいがちなのがマージンの相殺です。ある程度慣れてmarginも気軽に使っていると意外なところで想定していない余白が現れてびっくりすることも。相殺の基本的な動きを理解していてもネガティブマージンを使いだすとまた注意点も増えてきます。そんなmarginの相殺をわかりやすく説明してくれているサイトを紹介。

続きを読む

Webならではの表現な可変グリッドレイアウトが面白い

これまでのWebデザインではあらかじめ横幅が決まっているか、リキッドレイアウトでコンテンツの配置は固定されつつも横幅がブラウザ枠によって変化するものが主流でした。しかし最近では横幅だけでなくコンテンツの配置まで変わるといったWebならではの表現が可能になっています。使いどころは難しいかもしれませんが、一度試してみる価値はありそうですよ。

続きを読む

positionプロパティでレイアウト自由自在:表示位置の調整(position)〜CSSテクニック〜

スタイルシートでレイアウトを組むときに重要なプロパティとして float と position があります。それぞれ使い勝手に特徴があり得手不得手もあるのですが、今回は特にpositionプロパティについて分かりやすく解説してくれているサイトをご紹介します。

表示位置の調整(position)〜CSSテクニック〜

続きを読む