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. CSS Dig

    Web Information

    CSSをプロパティから解析してくれるChrome拡張機能「CSS Dig」

    CSS DigというChrome拡張機能を使ってみました。今まであまり…

  2. Web Information

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

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

  3. Web Information

    Gmailでゴミ箱に捨てたメールを元に戻す(復元)やり方

    ちょっと分かりづらかったのでメモしときます。Gmailでゴミ箱に捨てた…

  4. Web Information

    MacのCyberduckで.htaccessファイルなどの非表示ファイルを表示させるやり方

    MacのFTPクライアントはCyberduckを使っているんですが、先…

  5. Web Information

    Google検索で日付や期間指定をして検索結果を表示する方法

    Googleで調べたいものを検索した時に「どうも古い情報しか出てこない…

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

    Web Information

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

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

コメント

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

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

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP