ハッピーな毎日のためにがんばろう。

web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3Webデザイン, 忘れないmemo
Webデザイン, 忘れないmemo ,

960grid systemまとめ

960grid_03

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>–>

 

 ※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 class=”grid_4″ id=”sidebar”>

  ここはサイドバー

</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 は左にオフセットしたいカラム数

Category : Webデザイン, 忘れないmemo

コメントを残す





ブログ一覧へ戻る