Clever Geek Handbook

グリッドデザインまたはグリッドを使用したレイアウト。

約1年前にグリッドの手法に注目しました。 そして、この手法は、非常に表面的な研究の後、役に立たず非常に実験的であるように思われ、実装には追加のマークアップを作成する必要があるという事実を反発しました。 しかし、今では、グリッド上に構築されたWebサイトの数、およびそれに関する記事やレッスンの数に気付かないことが難しくなっています。 後者のおかげで、原則と概念の研究と理解がはるかに簡単になり、実際の結論を多かれ少なかれ引き出しています。 1年後の私の結論は、「これはWebページのレイアウト用に作成されたシンプルで便利なソリューションであり、自尊心のあるWebデザイナーなら誰でも知っているはずです。」



グラフィックエディター（Photoshop、Fireworks、Gimpなど）で作業したことのある誰もが知っているグリッドであり、もちろんデザインを作成する必要性を認識しています。 しかし、グリッドをWebに実装する方法は？ 実際、 表レイアウトはグリッドを備えた実際のWebページデザインであり、間違いなく非常に便利です。 しかし、 テーブル要素の誤用は恐ろしいものでした。

幸いなことに、近年成長し続けているWeb標準の大人気と、最新のブラウザーによるサポートにより、ほとんど論理的なマークアップのない多機能ページを作成する機会が与えられました。 このレイアウトはBlockと呼ばれます 。 しかし、 ブロッキーレイアウトには弱点もありました。 さまざまなサイズおよび意味の要素の巨大なセットでページを作成する場合、そのようなページのマークアップは非常に困難なタスクになり、複数の人がマークアップに取り組んでいる場合、そのような作業は悪夢になります。

そして、ここにグリッドを使用した救助装置が登場しました。 この手法は、 ブロックレイアウトとテーブルレイアウトのハイブリッドです。 その使用は私達に与える：



これらすべての料金は、わずかに追加のマークアップです。 最近、人の時計の価格が鉄や生産性よりもはるかに高いため、体重計が傾いている方向を推測するのは簡単だと思います。



グリッドレイアウトとは まず第一に、これは概念です。 多くの設計面とその実装のための非常に少数のルールを含む概念。 これにより、完全な自由が得られ、実行の標準化は行われません。 さらに言いますが、同じグリッドをさまざまな方法で実装できます。 グリッドについてすでに読んだことがある場合、各作成者は新しい視点から始まり、詳細を深く掘り下げて、少し混乱させることに気付くかもしれません。 幸いなことに、 グリッドシステム - グリッドを操作するためのCSSライブラリ-が登場し始めました。 また、彼らの例では、この手法の基本原理を非常にすばやく習得できます。



グリッドのすべての側面について書くことは意味がないと思います;インターネットで簡単にそれに関する情報を見つけることができます。 シンプルなグリッドシステムを作成することを提案します。



最初に、グリッドは列とそれらの間のスペースで構成されていることを理解する必要があります。 3つの主要な値は、グリッドの幅、列の幅、および列間のギャップの幅です。 列の幅は、その数によって異なります。



10ピクセル間隔で16列に950ピクセル幅のグリッドを作成してみましょう。1列の幅は50ピクセルにする必要があります。 すべての値を理解したら、グラフィカルに既知のエディターを開き、レイアウトを作成します。 また、左と右からグリッドにパディングを追加することもできます（たとえば、それぞれ20ピクセル）。これにより、幅が990ピクセルのレイアウトになります。 ここに私の例を見ることができます 。



これで、ライブラリの作成を開始できます。 ほとんどのCSSライブラリと同様にグローバルリセットが必要であるため、 Eric MayerからCSSリセットを提案し、 reset.cssを保存して、floatingブロックを含むコンテナをクリーニングするメソッドをすぐに追加できるgrid.cssを作成します-Clear Fix 最初に必要なのは、すべての列を含むコンテナのルールです。 各コンテナの幅は、グリッドの幅と同じです。

.container {

マージン：0自動;

幅：950px;

}


これで、列にルールを追加できます;これには幅とインデントが含まれます。 インデントは、列間の溝として機能します。

.column {

float：左;

マージン右：10px;

オーバーフロー：非表示。

幅：50px;

}


最後の列にはインデントは必要ありません。このため、ルールも追加します。

.last {マージン右：0; }


コンテナには列があり、列はフローティングブロックなので、洗浄する必要があります。 マークアップで不要な.clearfixを回避するために、コンテナにこのルールを適用できます。

.clearfix：after、 .container：after {

内容： "。";

ディスプレイ：ブロック;

高さ：0;

クリア：両方;

可視性：非表示;

}



.clearfix、 .container {display：inline-block; }



/ * IE-macから非表示\ * /

* html .clearfix、 * html .container {高さ：1％;}

.clearfix、 .container {display：block;}

/ * IE-macからの非表示を終了* /


これで、列に進むことができます。 列の幅は2〜3枚などです。 これを行うには、次のルールを適用できます。

.span-1 {width：50px; }

.span-2 {width：110px; }

.span-3 {幅：170ピクセル; }

.span-4 {width：230px; }

.span-5 {幅：290px; }

.span-6 {width：350px; }

.span-7 {width：410px; }

.span-8 {幅：470px; }

.span-9 {width：530px; }

.span-10 {幅：590px; }

.span-11 {幅：650px; }

.span-12 {幅：710px; }

.span-13 {幅：770px; }

.span-14 {幅：830px; }

.span-15 {幅：890px; }

.span-16 {width：950px; マージン右：0; }



原則として、これがグリッドの実装に必要なすべてです;レイアウトでグリッドを表示するためにラッパーとクラスを追加することもできます。 main.cssを作成して追加します。

.wrapper {

マージン：0自動;

幅：990px​​;

}

.overlay {

背景：透明なURL（overlay.png）左上に繰り返しyスクロール;

}


レイアウトは次のようになります。 

  <div class = "ラッパーオーバーレイ">
	 <div class = "container">
		 <div class = "column"> </ div>
		 <div class = "column span-4"> </ div>
		 <div class = "column span-11 last"> </ div>
	 </ div>
 </ div>




最初はこれで十分だと思います。

私の例はここで見るか、 ここからダウンロードできます 。



以下に、グリッドに関する優れたリソースをいくつか示します。

マークバルトンのページと彼のグリッドシステム設計の5つの簡単なステップ

Koya Vinと彼のグリッドコンピューティングのページ...とデザイン 、そしてグリッドは良いです 。

Design By Grid Gridを使用したレイアウト専用のWebサイト。


More articles:


All Articles