960 グリッドシステムの基本原理と使用法

960 グリッドシステムの基本原理

960.cssを編集しないでください

960.css ファイルを編集しないでください。変更すると、将来フレームワークを更新できなくなります。

読書グリッド

外部ファイルの CSS コードを使用する前に、まず HTML ファイル内でそれらを呼び出す必要があります。次のように呼び出します:

<link rel=”スタイルシート” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”スタイルシート” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”スタイルシート” type=”text/css” media=”all” href=”path/to/960/text.css” />

これらを呼び出した後、独自の CSS ファイルを呼び出す必要があります。たとえば、CSS ファイルに style.css や site.css などの名前を付けることができます。次のように呼び出します:

<link rel=”スタイルシート” type=”text/css” media=”all” href=”path/to/style.css” />

コンテナ

960 フレームワークでは、クラス名 .container_12 と .container_16 の 2 つのコンテナーから選択できます。どちらのコンテナーも幅は 960 ピクセルです (そのため、960 グリッドと呼ばれます) が、含まれる列の数が異なります。名前が示すように、.container_12 のコンテナーは 12 列に分割され、.container_16 は 16 列に分割されます。両方の 960 ピクセル幅のコンテナーが水平方向に中央揃えされます。

グリッド/列

選択できる列幅の組み合わせは多数ありますが、2 つのコンテナー間で異なります。 960.css を開くとこれらの幅がわかりますが、Web サイトのデザインには必要ありません。フレームワークの使用を簡単にする便利なトリックを紹介します。

たとえば、コンテナー (メイン コンテンツ領域/サイドバー) で 2 つの列のみを使用する場合は、次のようにします。

<div class="container_12">
<div class="grid_4">サイドバー</div>
<div class="grid_8">メインコンテンツ</div>
</div>

上記のコードを見て理解できたかもしれませんが、それでも説明したいと思います。これは、コンテナーcontainer_12内の列grid_4とgrid_8が使用され、4+8 が 12 になることを意味します。わかりますか？グリッド システムを使用する利点の 1 つは、各列の幅を計算する必要がないため、計算量が大幅に削減されることです。

4 列レイアウトの書き方を見てみましょう。

<div class="container_12">
<div class="grid_2">サイドバー</div>
<div class="grid_6″>メインコンテンツ</div>
<div class="grid_2">写真</div>
<div class="grid_2">広告</div>
</div>

ご覧のとおり、このシステムは非常にうまく機能します。ブラウザを使って彼の言葉を読もうとすると、何かがおかしいことに気づくでしょう。しかし、それは問題ではありません。まさにそれが次に議論する内容です。

マージン

デフォルトでは、各列の間にはいくらかの余白があります。各 grid_(ここに値を挿入) クラスには、10 px の左余白と右余白があります。つまり、2 つの列間の余白値は 20 px です。

20 ピクセルの余白により、レイアウトで適切な空白が維持され、よりスムーズに見えるようになります。これが、私が 960 グリッド システムを気に入っている理由の 1 つです。

上記の例では、ブラウザからの読み取りに問題があったので、それを修正しましょう。

問題は、各列に左余白と右余白が含まれているものの、左端の列には左余白がなく、右端の列には右余白がないことです。解決策は次のとおりです。

<div class="container_12">
<div class="grid_2 alpha">サイドバー</div>
<div class="grid_6″>メインコンテンツ</div>
<div class="grid_2">写真</div>
<div class="grid_2 omega">広告</div>
</div>

左余白を削除するにはalphaクラスを追加し、右余白を削除するにはomegaクラスを追加するだけです。これで、ブラウザ内でレイアウトが完全に整列しました。 (はい、IE6 も含みます)

スタイリング

実際、960 フレームワークを使用して基本的なグリッド レイアウトを作成する方法はすでに学習しました。ただし、レイアウトに何らかのスタイルを追加したい場合もあります。

<div class="container_12">
<div id="sidebar" class="grid_2 alpha">サイドバー</div>
<div id=”content” class=”grid_6″>メインコンテンツ</div>
<div id=”photos” class=”grid_2″>写真</div>
<div id=”advertisements” class=”grid_2 omega”>広告</div>
</div>

CSS はスタイルの解釈方法を決定するために優先順位形式を使用するため、id は class よりも優先順位が高くなります。この方法では、個別の CSS ファイルで ID セレクターを使用してカスタマイズされたスタイルを作成できます。 960 と同じだが値が異なるスタイル属性がある場合、ブラウザはCSS ファイル内のスタイルを優先します。