CSSフレームワークとは？

CSSフレームワークとは、WEBサイト制作におけるレイアウトやボタン、フォームのデザインなどが定義されたライブラリです。特定の「id」や「class」を指定するだけで、そのひな形に沿ったサイト制作が可能となります。

有名なCSSフレームワークとしては「Twitter Bootstrap」や「960 Grid System」などもありますが、今回は「Foundation 5」に触れてみたいと思います。

「Foundation 5」導入のメリット

• グリッドシステムを利用したレイアウトが手軽に実装できる
• 柔軟なレスポンシブレイアウトが手軽に実装できる

「Foundation 5」のその他の機能

• ナビゲーション
• ボタンデザイン
• フォームデザイン
• タイポグラフィ
• CSSコンポーネント
• Javascriptコンポーネント

※ダウンロード時に必要に応じた機能のセレクトが可能です

「Foundation」のファイル構成

※サンプルのindex.htmlには太字のファイルのみ読み込まれています

「Foundation」のグリッドレイアウト/レスポンシブレイアウト

今回は【グリッド数12】とします。

※こちらの数値はダウンロードする際にカスタマイズできます

「Foundation」には「large」と「small」の2種類が用意されており、ブレイクポイント以上のサイズで表示させる場合は「large-カラム数」、ブレイクポイント以下のサイズで表示させる場合は「small-カラム数」と指定します。
そして、横に並べる際は<div class=”row”>~</div>で囲んであげます。

例えば、PCサイトでは「幅9カラム」と「幅3カラム」の2カラムレイアウト、そしてスマートフォンサイトでは「幅6カラム」「幅6カラム」の2カラムレイアウトで表示させたい場合は以下のように記述します。

「large」「small」を利用した2カラムレイアウト

<div class=”row”>
　<div class=”large-9 columns small-6 columns”>
　</div>
　<!– 左カラム –>
 
　<div class=”large-3 columns small-6 columns”>
　</div>
　<!– 右カラム –>
</div>

また「small」を指定しない場合は、スマートフォンでは以下のように表示されます。

逆に「small」のみを指定した場合は、PCでもスマートフォンでも同じカラム表示になります。

さらに、入れ子にして表示させることも可能ですので、手軽にレスポンシブレイアウトの実装を行いたいという方は是非触ってみてはいかがでしょうか？