Web Information

かなり便利なCSSフレームワーク「960 Grid System」を使ってみた

ちょっと前から気になっていたCSSフレームワーク「960 Grid System」を試してみました。かなり自由に自分の好きなグリッドにすることができるのでとても便利です。上下左右の余白なんかもこれを使えば楽に統一することができそうです。

[ads_center]

使い方

まずはこちらのサイトからファイルをダウンロードします。

ダウンロードしたフォルダの中には色々なファイル入ってますが使用するのはcodeというフォルダです。codeフォルダの中にはdemo.htmlというファイルがあるのでこれを参考にしながら試してみました。ちなみにdemoを開くとこんな感じです。

960gridsystem-demo

実際に見たい場合は以下のページをどうぞ

CSSクラスを指定する

基本的には12カラムの場合1カラム60pxになり左右10pxずつのmarginが設定されており、余白も含めると1カラム80pxで、12カラムあるので全部で960pxになるといった寸法です。使う場合はhead内に以下を読み込みます。

<link href="css/960.css" rel="stylesheet" type="text/css">

必要があればreset.cssファイルも読み込みます。上記の12カラムを基準にして構築したい場合はbody以下コンテンツをcontainer_12というクラスで括ります。

<body>
<div class="container_12">
<!-- コンテンツ -->
</div>
</body>

あとはコンテンツに応じてお好きなカラムに分割していきます。カラムを指定する場合はgrid_(カラム数)クラスで指定します。メインコンテンツエリアが8カラム分でサイドバーが4カラム分にしたい場合はメインコンテンツにgrid_8、サイドバーにgrid_4と指定します。両方のカラムを足して12になるように分割していきます。

入れ子にしたい場合

入れ子にする場合は入れ子にしたボックスのmarginによってレイアウトがずれるのでそれををなくすクラスを指定します。例えば1つのボックスに2つのボックスを入れた場合、左側のボックスにはalphaクラスを指定して右側のボックスにはomegaクラスを指定してあげます。alphaはmargin-leftが0に設定されておりomegaはmargin-rightを0に設定されてます。なので少し注意が必要です。まだまだ色々便利なクラスが設定されています。例えば左右に1カラム分の余白をつけたい場合はprefix_1とsuffix_1というクラスをつけます。prefixは左の余白でsuffixは右の余白をとってくれます。後ろにほしい余白分のカラム数をつけることでその分の余白をとることができます。

色々と使ってみて

自分が思ってた以上に自由度が効きとても気に入りました。これからはこのフレームワークがないとやっていけませんっていうくらいCSS組むのが楽になりました。

関連記事

  1. iPad Airのテンプレート素材(PSD)

    Web Information

    デザインやモックアップに役立ちそうなiPad Airのテンプレート素材(PSD)

    iPad Airのテンプレート素材(PSD)がとてもよかったのでメモが…

  2. Web Information

    【要ブクマ】いろんなアイコンセットが集まる「IconStore」

    IconStoreはいろんなアイコンセットが集まる便利なサイトです。無…

  3. YouTube動画をループ再生する方法

    Web Information

    YouTube動画をカンタンにループ再生(リピート)する方法

    YouTubeでお気に入りの動画などを見ているときに、ループ(リピート…

  4. SVG Loaders
  5. Animated SVG Image Slider
  6. Web Information

    いい感じのiPhone6・iPhone6 PlusのPSDモックアップ素材集(フリー)

    いよいよiPhone6・iPhone6 Plusの発売日となりましたね…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP