web-dev-qa-db-ja.com

さまざまなデザイングリッドのすべてが水平間隔を無視するのはなぜですか?

960grid、Fluid、または9/12/16/20カラムグリッドシステム...これらはすべて、垂直方向の間隔を考慮しますが、水平方向の間隔は考慮しません。サイトを上から下に表示するので、必ずしも高さを制限するように設計する必要はありませんが、適切な水平方向の間隔を確実に適用し、垂直方向のサウンドのデザインを補完する方法を知りたいと思います。水平グリッドにはどのようなリソースが利用できますか?

5
acconrad

あなたが言ったように、サイトは一般に垂直方向に表示されます。そのため、今日人気のあるグリッドシステムに焦点が当てられています。

水平方向の間隔の問題は、実際に制御できるものが限られていることです。ブラウザを使用すると、ユーザーは簡単にズームイン/ズームアウトして、テキストやその他の要素を大きくすることができます。その場合、コンテンツは構成されたグリッドシステム内にとどまりますが、ページの高さは低くなります。

1
SubTypical

Webデザイングリッドは、ブラウザレンダリングの性質のため、垂直グリッドに焦点を合わせています。コンテンツもテキストサイズも不明であるため、任意のテキストが消費するスペースは不明です。これは、ブラウザーのレンダリングで、最初に右にテキストを流し、コンテナーの右端に到達すると、垂直方向に下向きに新しい行に達することで処理されます。これは、垂直方向が柔軟で制約のない方向でなければならないことを意味します。すべてのピクセルが何であるかがわからない限り、両方の寸法を制限することはできません。その場合、htmlテキストの代わりに、希望する正確なレイアウトで画像を送信できます。

1
mgkrebbs

テキストのベースラインを試してください。これにより、グリッドシステムと連携して、探しているものをほとんど得ることができる、本当に素敵な垂直リズムが得られます。

開始するためのリンクがいくつかあります。

http://baselinecss.com/ http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/- http://www.smashingmagazine.com/2008/04/23/5-principles-and-ideas-of-setting-type-on-the-web/

アップデートとして:Smashing Magazineには ウェブ上のタイポグラフィに関する多くの情報を含む投稿 があり、そこに情報があります約 垂直リズムとベースライングリッド

1
Digital Essence