[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System
Post on:2011年3月9日
sponsors
チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。
[ad#ad-2]
Child Selector Systemの主な特徴
- 超軽量サイズ（0.31KB）
- 使い方はとても簡単
- 余分なHTMLは最小限
- コンテナはパーソナライズ可能（%, px, em）
- カラムのネストをサポート
- 条件付きコメントを使用すれば、IE5.5にも対応
Child Selector Systemのスタイルシート
スタイルシートは超軽量で、下記のコードで全部です。
CSS
単位で使用している「%」は、「px, em」などに変更して使用することもできます。
div{float:left;width:100%}
.right>div{float:right}
.one>div{width:100%}
.two>div{width:50%}
.three>div{width:33.33%}
.four>div{width:25%}
.five>div{width:20%}
.six>div{width:16.60%}
.seven>div{width:14.28%}
.eight>div{width:12.5%}
.nine>div{width:11.11%}
.ten>div{width:10%}
.twelve>div{width:8.33%}
CSS
IE8未満にも対応させたい場合は、下記のスタイルシートを条件付きコメントで適用させます。
div{float:left;margin-right:-1px;width:100%}
条件付きコメントの利用には、下記ページを参照ください。
[ad#ad-2]
Child Selector Systemの実装
実装は、非常にシンプルで簡単です。
3カラムのグリッドを作成する場合は、下記のようになります。
HTML
<div class="three"> <div>...</div> <div>...</div> <div>...</div> </div>
CSS
.three>div{width:33.33%}
フレームワークでは、oneからtwelveまで用意されています。
Child Selector Systemのデモ
デモでは、数多くのグリッドのパターンから、ベーシックなレイアウトまで揃っています。
デモページ：The System
グリッドのパターン
デモページ：Build with one CSS line
一行のスタイルシートだけで構築したグリッド
デモページ：Example1
ベーシックなレイアウトの例
デモページ：Example2
ベーシックなレイアウトの例
sponsors
