基本

Foundationとは何か?使用するための準備、基本のグリッドシステムなどの説明。

Foundationとは?

Foundationは現在Bootstrapについで人気があるZurb社が開発・提供しているCSSフレームワークです。
Bootstrapと同様に豊富なスタイルやコンポーネントが用意されており、グリッドシステムを利用レスポンシブサイトの構築を容易に作成することがも可能です。

Foundation5の特徴

モバイルファースト/レスポンシブデザイン

Foundation5はBootstrap3と同様にモバイルファースト、レスポンシブデザインで開発されています。Bootstrap3と同様にレスポンシブサイトを用意されたスタイルやコンポーネントを利用することで簡単に構築できます。

レスポンシブサイト対応のグリッドシステム

Bootstrap3と同様に標準では横幅を12に分割し、合計12になるようにスタイルを指定するだけでサイトの枠組みを構築できます。

豊富に用意されたCSSやコンポーネントやJavaScript

CSSやコンポーネントやJavaScriptが豊富に用意されておりサイトを作成するのに十分な機能が用意されています。タグやクラスを指定するだけでデザインされたボタンやナビゲーション、スライドショーなどが利用できます。

標準で用意されたオフキャンバスメニュー

オフキャンバスメニュー(ドロワーメニューとも呼ばれるスマホで良く見かける横にスライドするメニュー)が標準で用意されています。スマホなどでもメニューが多いサイトなどに便利なメニューの機能です。

Sassのデータが用意されている

FoundationではSassベースのデータが用意されています。Bootstrap3はLessベースで作成されています(Sassデータも用意されています)が、FoundationではSassベースのデータになります。

充実した公式サイト

Bootstrap同様、公式サイトに充実した説明があります。個人的にはBootstrapの方が分かりやすく感じますが、Foundationのサイトも充実しています。

Bootstrapとの比較

IEのサポートは、IE9以上

Foundation5ではIEのサポートはバージョン9以上になります。
Bootstrap3は、IE8も公式でサポートをうたったいるのでこちらは大きな違いです。(html5shiv.jsとrespond.jsの読み込みは必要。Bootstrapも4ではIE9以上になる予定のようです。)
公式サイトのFAQでIE8に対応したい場合はFoundation 3.2を使用してくださいと書かれています。
仕事で使用するにはまだまだ、IE8も対応したサイトを作成することが多いかと思いますのでご注意を。

グリッドシステムのブレイクポイントの数

Foundation5では2箇所で画面サイズは3種類、Bootstrap3では3箇所で画面サイズは4種類になります。

レスポンシブの表示

Foundation5では常に流動的に表示されますが、Bootstrap3では最小サイズ以外ではレスポンシブ表示ではなく固定サイズでの表示になります。(.containerを使用した場合)

ベースの単位がem,rem

Foundation5はCSSのベースの単位がem,remが使用されています。
多くのブラウザのデフォルトのフォントサイズである16pxを基準とした相対サイズが指定されています。 Bootstrap3のベースの単位はpxです。(Bootstrapも4ではem,remがベースになる予定らしいです。)

Foundation5のみにある機能

Bootstrap3にはなくFoundation5のみにあるものとしては上記にも書いたオフキャンバスメニューや画像の横並びなどを簡単な記述で出来るブロックグリッドなどがあり、逆にないものとしてパネル関連はFoundation5にはない部分になります。(名前としてはpanelとありますがBootstrap3のwellsに近いものになります。)

情報や無料のテーマの量

Foundationの日本語での情報や無料のテーマはBootstrapに比べるとが圧倒的に少ないので作成時に何か困って検索しても情報が見当たらないかもしれません。どちらかというとBootstrapだけがある程度情報があるという感じです。日本語の本もBootstrapだけに関する本は出ていますが、Foundation単独の情報の本はまだ見たことがありません。英語に強い人であれば、公式のフォーラムなどもあるのでそちらなども参考になるかと思います。

© 2015 foudation5-guide.com