• WEB

レスポンシブレイアウトが手軽に実装できる「Foundation 5」 | CSS フレームワーク

  • えーちゃん
    えーちゃん デザインちーむ
  • このエントリーをはてなブックマークに追加
「Foundation」を利用したカラムレイアウト

CSSフレームワークとは?

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

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

「Foundation 5」導入のメリット

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

「Foundation 5」のその他の機能

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

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

foundation_function

「Foundation」のファイル構成

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

index.html – サンプルのhtmlファイル
cssフォルダ
foundation.css
├foundation.min.css
└normalize.css
imgフォルダ
jsフォルダ
├foundationフォルダ
│ └foundation.js
├vendorフォルダ
│ ├fastclick.js
│ ├jquery.cookie.js
│ ├jquery.js
│ ├modernizr.js
│ └placeholder.js
foundation.min.js
humans
robots

「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>

「Foundation」を利用したカラムレイアウト
また「small」を指定しない場合は、スマートフォンでは以下のように表示されます。

Foundation5_03

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

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

このエントリーをはてなブックマークに追加

えーちゃんが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ