こんにちは。景山がお送りします。
CSSフレームワークというと”bootstrap(ブートストラップ)”,”foundation(ファウンデーション)”が2大フレームワークとなっていますね。
他にも、Pure CSS(ピュアcss)やBourbon（バーボン）などがあります。個人的にはBourbon使いになりたい。(名前的な意味で)
ですが、本日は昨年(2015年)の11月にアップデートされた。foundation6について語りたいと思います。
【foundation6〜導入方法〜】
まず、foundation6公式サイトへアクセス。
画面中央のDownload Foundation 6 か、右上のGetting Startedからダウンロードできます。
ダウンロードと導入方法は以下の３つ。
- cssファイルをダウンロードする
- 黒い画面(ターミナル、コマンドプロンプト)からインストールする。
- Yetiアプリをダウンロードする。(開発環境を構築してくれるアプリ)
簡単なのは1番。ファイルをダウンロードするだけです。
ダウンロードオプションは以下の4つ。
- Completeファイル（全機能が入ったファイル）
- Essentialファイル（軽量版、機能を絞ったファイル）
- Customファイル（使いたい機能を選択することができるファイル）
- Sassファイル（Sass版は、コマンドラインを叩いてインストールするかyetiアプリからのみ）
どのように使えるか試すには、さくっとCompleteファイルを落として機能を試してみるのが良いですね。
【基本的な機能①-Gridシステム】
基本的な文法
<div class="row"> <div class="small-12 columns"></div> </div>
クラス名”row”をつけた要素の内側に、クラス名”◯◯-(1〜12までの数字)とcolumns”を指定する。
これだけで、レスポンシブな構造でマークアップすることができます。
※12カラムのグリッドシステムの場合。
（カラム数は設定ファイルから変更できます。）
.rowの内側に指定できるクラスは、”small”、”mideum”、”large”の３つがあり、それぞれスマホ、タブレット、PCといったサイズに対応できます。
（正確には、設定ファイルの幅指定での画面幅の対応となります。）
例えば、以下の様なマークアップ
<div class="row"> <div class="small-12 medium-8 large-6 columns"> small-12 medium-8 large-6 </div> <div class="small-12 medium-4 large-6 columns"> small-12 medium-4 large-6 </div> </div>
See the Pen PZLVre by straysheep (@straysheep-kage3) on CodePen.0
スマホの時には、small-12なので1カラム。
タブレットの時には、medium-8とmedium-4なので、8:4の比率の幅で2カラム。
PCの時には、large-6とlarge-6なので、6:6の比率の幅で2カラム。
（ブログでは、PC時の表示が確認できないかもしれませんので、表示されているサンプルの右上 Edit on CODEPENより御覧ください。)
といった具合に表示を変えることができます。
これが、基本のグリッドシステムとなります。
【基本的な機能②-表示・非表示】
2つ目の機能は、画面幅が◯◯の時に要素を表示させたり、非表示させたりするクラス名について。
まずは、サンプル。
See the Pen foundation6-sample by straysheep (@straysheep-kage3) on CodePen.0
以下、必要なクラス名。
- show-for-medium（ミディアム以上のサイズで表示）
- show-for-large（ラージ以上のサイズで表示）
- show-for-small-only（スモールサイズのみで表示）
- show-for-medium-only（ミディアムサイズのみで表示）
- show-for-large-only(ラージサイズのみで表示）
- hide-for-medium（ミディアム以上のサイズで非表示）
- hide-for-large（ラージ以上のサイズで非表示）
- hide-for-small-only（スモールサイズのみ非表示）
- hide-for-medium-only（ミディアムサイズのみ非表示）
- hide-for-large-only（ラージサイズのみ非表示）
といったように、かなり細かく対応可能です。（まだありますが、割愛）
スマホサイトとPCサイトの情報量の調整は、コンバージョンに深く関わりますが、1ソースでも十分対応可能です。
そう、foundationならね。
今回は、CSSフレームワークである”Foundation”について最も基本となる部分をお話しました。
何はともあれ、触ってみることをオススメします。
ちなみに、この記事でも使用している “CODEPEN“というオンラインエディタですが、Foundationにも対応しています。
NEW PENからさくっとコードを書くことができます。（会員登録しなくても使用可能）
もちろん、無料で使用できます。
NEW PENをクリックしたら、
よければ公式ドキュメントをみながら試してみてください。
公式ドキュメントは英語ですが、非常に読みやすいと思いますのでぜひ一度一読してみてください。
foundation6は、まだあまり情報がありませんので活用法を発信できればと思います。
あっ！いい忘れていましたが、foundationにはレスポンシブに対応した、メールとアプリのフレームワークもあります。こちらも、追って紹介できればと思います。
以上です。