960grid systemを使用する為のポイントを忘れないようにメモ。
●基本
container_XXでグリッド数を定義しておいて、grid_XXでグリッドを指定しつつdivを書いて、新しい段組みのために最後にclearを指定したdivを呼ぶ。
container_12とcontainer_16
グリッドを12個に分割するか16個に分割するかを指定します。これはページの全体をこのどちらかのクラスを指定しておくということです。16分割のほうが細かく分けることができます。
<!–<head>
<link rel=”stylesheet” href=”css/reset.css” type=”text/css” /><link rel=”stylesheet” href=”css/text.css” type=”text/css” /><link rel=”stylesheet” href=”css/960.css” type=”text/css” />
</head>–>
reset css／CSSはブラウザによってデフォルトの設定がされています。自分でCSSを記述する際に「あれ？表示がおかしい！こんな設定してないのに…」なんてことがあるのはこのせい。
それを回避するために使われるのがリセットCSSです。CSSの最初に記述することで、CSSを初期化してキレイな状態で始めることが出来ます。(必ずcssの一番上に記述すること)
●2カラムを書いてみる
<!–HTML:
<div class=”container_12″>
<h1 class=”grid_12″>2 columns</h1>
<div id=”clear” />
<div id=”left-navi” class=”grid_4″>left navi</div>
<div id=”main” class=”grid_8″>main</div>
</div>–>
ここはサイドバー
</div><!– /sidebar –>
<div id=”clear”></div>–>
＜カラムの左右に空白を作りたい＞
HTML:
<!–<div class=”grid_4 prefix_2″></div>
<div class=”grid_4 suffix_2″>
</div>–>
prefix_2 は、左に 2カラム分のスペース、suffix_2 は、右に 2カラム分
<先に書いたメインカラムを右にしたい>
HTML:
<!–<div class=”grid_8 push_4″></div>
<div class=”grid_4 pull_8″> </div>
<div id=”clear”></div>–>
push は右側にオフセットしたいカラム数、pull は左にオフセットしたいカラム数
