Grid 960は、開発者が設計のプロトタイプをすばやく設計できるようにするCSSフレームワークです。 レイアウトを作成するための優れたツールです。 なんで？ 彼らはあなたのためにすべてのハードワークを行うので、あなたは迅速な結果を得ることができます。
それは素晴らしいように聞こえますが、どのように行われますか？ インターネットには、CSSフレームワークを使用することの長所と短所を宣伝する記事が数多くありますが、経験の浅い読者を助けるものは何もありません。 したがって、本日の記事では、プロトタイププロセスについて説明します。
あなたがデザインを得て、あなたがクライアントのためにそれを補う必要があると想像してください。 この記事では、グリッドの基本、グリッド設計の設計、コーディングのプロトタイプを学びます。 Grid 960のほとんどの機能を使用する非常にシンプルなデザインを使用します。これにより、さらに作業を進めるための基本的な知識ベースを取得できます。 以下の設計に慣れたら、Grid 960の仕組みを調べてみましょう。
グリッド作成
Grid 960は、クラスの継承に基づいて動作します。 このフレームワークは、12列と16列の2つのグリッドを提供します。 メインコンテナの幅は常に960pxです。 番号960を使用すると、列のさまざまな組み合わせのほとんどを使用できますが、列を使用するのは複雑です。 この設計のレイアウトでは、12列のグリッドを使用しますが、12列すべてを使用するわけではありません。 各グリッドセルには、0 10pxのマージンプロパティが割り当てられます。 これにより、20ピクセルのギャップが作成されます。 行を作成すると、すべての要素の幅の合計が960に追加されます。Grid960デモページを見ると、あらゆる種類の組み合わせのグリッドが表示されます。 各グリッドセルには、その幅を決定するクラスがあります。 以下は、12列のグリッドの列幅の内訳です。
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
各幅は、grid_Xの形式で記述されたクラスの名前に対応します。ここで、Xは上記リストのシリアル番号です。 940px幅のブロックが必要な場合は、grid_12クラスを使用します。 Grid 960はどの幅を使用する必要があるかをどのように知るのですか 各grid_Xはcontainer_Y .grid_Xセレクターであり、Y値は12列または16列です。
コード自体を見てみましょう。 12列のコンテナーに2行のグリッドを作成する方法は次のとおりです。 ここでは、最初の行の幅は940ピクセルで、2番目の行には2つの同じ列が含まれています。
< div class ="container_12" >
< div class ="grid_12" >< p > 940px </ p ></ div >
< div class ="clear" ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >
< div class ="clear" ></ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
グリッドに行を作成するときは、すべてのgird_X子番号が、使用している列の数に達することを確認してください。 これにより、正しい幅が確保されます。 grid_6クラスの2つのディーバは合計で12になります。これらの値だけに限定されず、6、4、および2を使用することもできます。これで、グリッドはコンテンツの準備ができました。 Grid 960の仕組みを学習したので、レイアウトの作成方法を見てみましょう。
レイアウト
デザイングリッドの視覚化は非常に簡単です。 見出し画像用の1行、ナビゲーション用の行、見出しとポスター記事用の2列の行、セパレータ、4列、そして3列のフッターがあります。
レンダリング後、レイアウトグリッドの作成方法を理解する必要があります。 上記のリストのクラス名の幅の値を使用して、コードをまとめましょう。 各行の最後にクレンジングdivを追加することを忘れないでください。 Grid 960に含まれているCSSファイルを忘れずに含めてください。
< div class ="container_12" >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >
< div class ="grid_12" ></ div >
< div class ="clear" > </ div >
< div class ="grid_7" ></ div >
< div class ="grid_5" ></ div >
< div class ="clear" ></ div >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="clear" ></ div >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >
< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
スケルトンの準備ができました。 設計を課すときです。 緑のパネルは、背景色と高さのある単なるブロックです。 ナビゲーションバーには高さがありません。 代わりに、内部リンクのサイズによって制御されます。 キャプション画像を忘れずに追加してください。
div.spacer {
background-color: #8FC73E;
height: 1em;
}
div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}
* This source code was highlighted with Source Code Highlighter .
クラスを使用してgrid_12ブロックを調整し、IDを設定する
< div class ="container_12" >
< div class ="grid_12" >< a href ="images/header.png" alt ="" /></ div >
< div class ="clear" ></ div >
< div class ="grid_12" id ="navbar" ></ div >
< div class ="clear" > </ div >
< div class ="grid_7" ></ div >
< div class ="grid_5" ></ div >
< div class ="clear" ></ div >
< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="clear" ></ div >
< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >
< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
センタースピーカーにはエフェクトは必要ありません。 デザインを埋めるためにテキストを追加します。 トップに進む前に、地下室をご覧ください。 スクリーンショットは、均一な色の地下室を示しています。 これを既存のコードで実装することはできません。 これらの3つの列をdivで囲むと問題が解決します。 大丈夫だと思う、divを挿入するだけです。 ただし、Grid 960はスタイルを使用するときに親要素と子要素に基づいているため、このdivはグリッドを壊します（container_12 .grid_4セレクターを思い出してください）。 この場合、Grid 960で使用できるネストされたグリッドが問題の解決に役立ちます。 grid_12ブロックを追加してネストされたグリッドを作成し、grid_4ブロックを内部に配置します。 ネストされたメッシュを使用する場合、子要素には特別なクラスが必要です。 最初の子にはアルファクラスが必要で、最後の子にはオメガクラスが必要です。 レイアウトを編集して、地下室に必要な変更を加えます。
< div class ="grid_12" id ="footer" >
< div class ="grid_4 alpha" ></ div >
< div class ="grid_4" ></ div >
< div class ="grid_4 omega" ></ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
div#footer {
background-color: #e5e5e6;
}
* This source code was highlighted with Source Code Highlighter .
いいね！ これで、地下室の色は均一になり、必要に応じて列の寸法を指定できます。 地下の列にテキストを追加し、ナビゲーションバーに移動します。 ナビゲーションは、単純な箇条書きの形式で行われ、いくつかのリンクと関連スタイルを追加します。
< div class ="grid_12" id ="navbar" ></ div >
< ul >
< li > Articles </ li >
< li > Topics </ li >
< li > About </ li >
< li > Editors </ li >
< li > Contact </ li >
</ ul >
</ div >
* This source code was highlighted with Source Code Highlighter .
div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}
div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}
* This source code was highlighted with Source Code Highlighter .
いいね ページはまもなく準備できます。 必要なのは、上部セクションでブロック効果を作成することだけです。 見た目ほど単純ではありません。 始める前に、Grid 960とCSSフレームワーク全般について理解する必要があります。
CSSフレームワークはすべての問題を解決するわけではありません
気配りのある読者はおそらくすでに何かに気づいているでしょう。 このページには柔軟性がまったくありません。 すべての要素には特定のサイズが与えられており、これらのサイズを変更すると問題が発生したり、設計全体が台無しになったりする可能性があります。 さらに、Grid 960の制限により、デザイナーは自分のアイデアの一部を使用できません。
たとえば、同じデザインの幅が1000ピクセルの場合。 グリッド960は幅960ピクセルのグリッドを作成するため、大きなレイアウトは使用できなくなります。 レイアウトを960ではなく1000ピクセルに拡張したい場合はどうしますか？ いくつかの複雑なコード変更を実装せずにこれを行うことはできないと自信を持って言えます。
このフレームワークは、デザイナーを一連の厳格なルールに制限します。 クライアントがより広いデザイン、またはすでに960ピクセルを望んでいるとしましょう。 デザイナーは、以前に作成したタスクを使用するよりも、新しいタスクを実装するためにゼロからコードを作成する方が簡単です。
別の、まだ特定されていない問題があります-同じ高さの柱です。 センタースピーカーの背景色は同じであるため、高さが同じに見えます。 ブロックを含む地下室では、3つの列の背後に同じ背景色を設定します。 Grid 960は、同じ高さのスピーカーを作成するのに役立ちません。 もちろん、これを自分で実装する方法はありますが、デザインのプロトタイプを作成しているだけなので、サイトの将来の機能で小さな問題を解決するのに時間を浪費しません。 この段階では、アイデア自体を理解する必要があります。
Grid 960には、上のセクションに進む前に考慮すべき別の側面があります。 グリッド960は、正しいサイズの行を作成するときに要素のサイズとインデントに依存します。 フレームまたはパディングを使用すると、レイアウトが壊れます。 したがって、それらを使用する必要がある場合、変更を反映するためにブロックサイズでこれを予測する必要があります。 これは非常に疲れる。 2つの場所で要素のサイズを指定すると、常に混乱が生じます。また、レイアウトの維持がはるかに難しくなります。 以上です。 上のセクションを終了しましょう。
上段
幸いなことに、上部セクションで同じ高さの列を操作できます。 右側の画像には幅と高さが割り当てられているため、もう一方の列のサイズがわかります。 既存のdiv内にフレームを持つ新しいdivを追加して、ブロック効果を作成します。 サイズを指定することを忘れないでください。 ディーバにパディングを割り当てないでください。これにより、ブロックの幅が変わり、グリッドが壊れます。 代わりに、子要素にマージンを指定します。 これは親ブロックの幅を変更しません。 インライン要素にマージンを適用します。 これにより、目的の効果が得られ、テキストは端から後退します。
< div class ="grid_7 topSection" >
< div > </ div >
</ div >
< div class ="grid_5 topSection" >
</ div >
* This source code was highlighted with Source Code Highlighter .
topSectionクラスは両方のブロックに適用されるため、IDではなくクラスを使用します。 これにより、高さの変更も簡単になります。 高さの値を選択して、クラスを作成します。
div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}
div.topSection div p {
margin: 10px;
}
* This source code was highlighted with Source Code Highlighter .
いいね！ 私たちの仕事を見てみましょう。
コンテンツの入力を開始します。 左のブロックに小さなテキストを入力します。 ただ夢中にならないでください。テキストが多すぎる場合、ブロックの端をクロールします。 これにより、潜在的なレイアウトの問題が発生します。 どのくらいのテキストが大きすぎるかをどのように知っていますか？ 生産設計では、この問題を防ぐために、設計者は特定の数の単語を表示する関数を作成する必要があります。
次に、画像を挿入しましょう。 挿入する直前に、寸法を指定します。 あなたが普通の数学者で、箱型モデルを理解しているなら、おそらくどのくらいの大きさであるべきか知っているでしょう。 わからない場合は、Firebugを起動してDOMを見てください。 [検査]ボタンをオンにして、画像を配置するブロックをクリックします。 [レイアウト]タブをクリックします。 Firebugは、選択したブロックのボックスモデルを表示します。
スクリーンショットは、画像360 x 280のサイズを示しています。画像を見つけて、スタイルを作成します。 写真全体をブロック全体に埋めることにしました。 10ピクセルのインデントを作成する場合は、必ず各辺でサイズを20ピクセル縮小してください。
img#poster {
width: 360px;
height: 280px;
}
* This source code was highlighted with Source Code Highlighter .
次のものが必要です。 テキストや画像を自由に変更してください。
制限を忘れないでください
プロトタイプの準備ができたので、完了した作業をまとめましょう。 設計のプロトタイプをすばやく作成する方法を学びました。 Grid 960は私たちのために簡単にグリッドを作成します。 それでは、次は何ですか？ 当然、クライアントを見せ、彼の言うことを聞く必要があります。 ただし、いくつかの注意事項があります。 デザインはIE6およびIE7でテストされていますか？ いや これを行う必要はありますか？ いや これは単なるプロトタイプです。 もちろん、生産の前に、ブラウザのすべての機能が考慮されます。
しかし、顧客がより統合された設計を作成したい場合はどうでしょうか？ この場合、フレームワークの制限をすぐに発見できます。 設計がゴムまたは弾性である必要がある場合はどうなりますか？ フレームワークはこれを支援することはできないため、最初からすべてを行う必要があります。 CSSフレームワークはすべての問題を解決するわけではありませんが、いくつかの問題を解決できる可能性があることに注意してください。 Grid 960および他のフレームワークは、プロトタイプの作成に最適です。
もちろん、Grid 960の概念をさらにコード開発に使用できますが、フレームワークをプロジェクトで完全に使用することはお勧めできません。 CSSフレームワークには、他のツールと同様にファンがいることを忘れないでください。
例付きのアーカイブをダウンロードします 。