[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System

チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。

Child Selector System

[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%}

条件付きコメントの利用には、下記ページを参照ください。

• IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法

[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
ベーシックなレイアウトの例