Webデザイン, 忘れないmemo 2014.7.31 960grid, フレームワーク

960grid systemまとめ

960grid systemを使用する為のポイントを忘れないようにメモ。

●基本

container_XXでグリッド数を定義しておいて、grid_XXでグリッドを指定しつつdivを書いて、新しい段組みのために最後にclearを指定したdivを呼ぶ。

container_12とcontainer_16

グリッドを12個に分割するか16個に分割するかを指定します。これはページの全体をこのどちらかのクラスを指定しておくということです。16分割のほうが細かく分けることができます。

<!–<head>

</head>–>

reset css／CSSはブラウザによってデフォルトの設定がされています。自分でCSSを記述する際に「あれ？表示がおかしい！こんな設定してないのに…」なんてことがあるのはこのせい。

それを回避するために使われるのがリセットCSSです。CSSの最初に記述することで、CSSを初期化してキレイな状態で始めることが出来ます。(必ずcssの一番上に記述すること)

●2カラムを書いてみる

<!–HTML:

<h1 class=”grid_12″>2 columns</h1>

</div>–>

※clear/新しい段組みを作りたいときに回り込みを解除する。 ●重要な使い方 <カラムを入れ子にする> 子要素の、1番左側にくるカラムには、padding-left を 0 にするクラス、alpha を付けます。逆に 1番右にくるカラムには、padding-right を 0 にするクラス、omega

<!–<div class=”grid_8″ id=”main”>

<div class=”grid_4 alpha”> 子要素 4 columns </div>

<div class=”grid_4 omega”>子要素 4 columns</div>

</div><!– /main

ここはサイドバー

</div><!– /sidebar –>

＜カラムの左右に空白を作りたい＞

HTML:

<!–<div class=”grid_4 prefix_2″></div>

</div>–>

prefix_2 は、左に 2カラム分のスペース、suffix_2 は、右に 2カラム分

<先に書いたメインカラムを右にしたい>