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

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

[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

top of page

©2018 coliss