話題の記事

CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた

野中 龍一

2013.03.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさまこんにちわ。
Webサイト高速化やSCSSの連載を書いている野中です。

そういえばGoogle Readerが終了するとのことでとても残念ですね。
読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。

そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。
とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。

本題

それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。
個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。

ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。
最初はProfound Gridを試して解説記事を書こうと思ったのですが、あまりにも多いので何が良さそうなのか目星をつけるために今回はレイアウト系CSSフレームワークについてまとめてみました。

1，レイアウト系CSSフレームワークとは

主にグリッドに分割してそれを目安にレイアウトのサイズを制御するものが多いです。
タイポグラフィ関係の制御まで含まれているフレームワークもあります。

参考にProfound Gridのサイト。
グリッドのラインに揃えられた要素によりまとまりが出て美しいですね。

Profound Grid - A grid system for fixed and fluid layouts

2，レイアウト系CSSフレームワーク一覧

今回はCSSのみのものも含めまとめてみました。
Sass/SCSSまたはLessに○が付いているものはメタ言語での利用が可能なものです。

名前 可変 レスポンシブ Sass/SCSS Less IEサポート 補足
960 Grid System × × × × IE7+ 960px 12 and 16 columns
EZ-CSS ○ × × × IE5.5+ flexible table less layout
Less Framework 4 ○ ○ × × IE6+ single grid, composed of 68 px columns with 24 px gutters.
Foundation ○ ○ × × IE9+ Flexible, efficient layout.
Skeleton ○ ○ × × IE7+ 960 grid base flexible layout
Amazium ○ ○ × × IE7+ width over 960px max 1200px grid
Fluid baseline grid ○ ○ × × IE6+ fluid-column layouts, baseline grids and mobile-first responsive
Columnal ○ ○ × × IE9+(IE6-8) 1140px wide, fluid layout
1140 CSS GRID ○ ○ × × IE7+ 12 columns fluid grid
BluCSS ○ ○ × × IE7+
Gridless ○ ○ × × IE6+ mobile first responsive
YAML　CSS Framework ○ ○ × × IE6+ Bulletproof flexible grid system
YUI CSS Grids ○ ○ × × IE6+ -
Toast ○ ○ × × IE8+ 4 columns simple grid
TitanTHEMES　A CSS framework ○ ○ × × IE7+ 960.gs互換 Responsive 12 and 16 columns
The Goldilocks Approach ○ ○ × × IE7+ Responsive
Simple Grid ○ ○ × × IE8+ 1140px 12 clumns
Proportional Grids ○ ○ × × IE7+ fixed and fluid columns
Kube　CSS-framework × × × ○ IE8+ simple grid
rwdgrid ○ ○ × × IE7+ max 1200px 12colums and 16colums. 960gs互換
One% CSS Grid ○ ○ × × IE7+ 12 column fluid CSS grid system
BlueTrip × × × × IE6+ 12 column fluid CSS grid system
xy.css ○ ○ × × ×(IE10?) esponsive liquid matrix. 少し異色で縦軸のグリッドにも対応。
BASE ○ ○ × ○ IE7+ 12 column fluid grid
Blueprint CSS Framework ○ × △ × IE7+ easy-to-use grid. Compassで利用可能
Bourbon Neat ○ ○ ○ × IE8+ Bourbonが必要。
FRAMELESS ○ ○ ○ ○ IE9+(EI6-8) fluid grids
unsemantic ○ ○ × × IE7+ Sassで構築されているのでカスタマイズ可能
inuit.css ○ ○ ○ × IE7+ -
320 and Up ○ ○ ○ ○ IE9+ 480, 600, 768, 992 and 1382px
Golden Grid System ○ ○ ○ ○ IE9+(IE6-8) 18 even columns
Semantic ○ ○ ○ ○ IE6+
Profound Grid ○ ○ ○ × IE9+ 自由度が高いがIE9以上
MUELLER GRID SYSTEM ○ ○ ○ × IE7+ IEのサポートも含め一番使い勝手が良いかもしれない
Bootstrap ○ ○ ○ ○ IE7+ gridも含まれていますがかなり装飾されているので例外ですが紹介。

IEの対応は調査不足の部分もあるので目安程度としてください。

2.1，古いIE（6,7,8）の対応

古いIEは@mediaが使えないのでこの点はRespond.jsなどで対処します。
また、IE9以上となっているフレームワークでもCSS3の疑似要素を使っているためでありIE9jsなどを読み込めば利用できるフレームワークもあります。

3，個人的に良いかもと思ったフレームワーク

良さそうだなと思ったフレームワークはこの5つ。
どれもSass/SCSS前提のものですが自由度も高く使い方を理解すればとても便利なフレームワークだと思います。

名前 可変 レスポンシブ Sass/SCSS Less IEサポート 補足
Profound Grid ○ ○ ○ × IE9+ 自由度が高いがIE9以上
Bourbon Neat ○ ○ ○ × IE8+ Bourbonが必要。
Semantic ○ ○ ○ ○ IE6+
Golden Grid System ○ ○ ○ ○ IE9+(IE6-8) 18 even columns
MUELLER GRID SYSTEM ○ ○ ○ × IE7+ IEのサポートも含め一番使い勝手が良いかもしれない

まとめ

ある程度は候補を絞り込めましたがあとは使ってみないとわかりませんね。
次回上記に上げた良さそうなものから1つ選んで解説してみたいと思います。

候補にあげたもの、またはそれ以外でオススメのフレームワークがあれば紹介していただけるとうれしいです。
それではまた次回。

customer-story-analytics