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. 拡大・縮小させるChromeのショートカットキー

    Web Information

    ページ画面のサイズを拡大・縮小するChromeのショートカットキー

    ページ画面のサイズを拡大したり縮小したりするChromeのショートカッ…

  2. Amazon.co.jpのほしい物リストに追加

    Web Information

    Amazon以外のサイトからでもAmazonのほしい物リストに追加できるChrome拡張機能

    ちょっと便利そうだったのでインストールしてみました。普段Chromeを…

  3. Web Information

    タイポグラフィを向上させるjQueryプラグイン15

    テキストやタイポグラフィに関する機能を向上させてくれる15のjQuer…

  4. Web Information

    TumblrにiPhoneからブックマークレットを使って簡単に投稿できるようにしてみる

    TumblrにiPhoneから簡単に投稿できたりするブックマークレット…

  5. Web Information

    はてなブックマークでブクマした時に自動でTwitterへ投稿する連携方法

    はてなブックマークで好きな記事をブクマした時に自動でTwitterへ投…

コメント

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

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

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP