【CSSフレームワーク】Foundationの導入手順(インストール手順)

css

最近流行のCSSフレームワークですが、たくさんと種類が出ていますよね。
ダントツで人気のあるCSSフレームワークは、BootStrapのように感じます。
BootStrapと比べると知名度では低いけど、素晴らしいCSSフレームワークは他にもたくさんあります。

今回は、個人的に大好きなFoundationの導入手順を紹介します。

[スポンサーリンク]

webレスポンシブにも対応していますし、機能的にはBootStrapと比べてもひけをとりません。
デザインもシンプルでGoodです。

BootStrapを使うと、BootStrapを使った感が意外と出ているので、他のCSSフレームワークにするのもひとつの手だと思います。

この章でやること

Foundationのインストール(導入)手順を解説します。

Foundationのメリットってなに?

Foundationをインストール(導入)する前に少し寄り道しましょう。

Foundationの一番の強みは、「グリッド」の表現にあると思います。
「グリッド」の表現方法がシンプルなので、色々なパターンを自分なりに組み合わせて作ることができます。

こちら、Foundationの公式サンプルです。
グリッドがかっこよくて思わずワクワクしてしまいます。

css-foundation-setting2

Foundationをダウンロードする

まずは、こちらのサイトにアクセスして、CSSファイルを取得しましょう。
これでCSSファイルのダウンロードが完了します。
css-foundation-setting3

Foundationを導入する。

先ほどダウンロードしたzipファイルを解凍すると、cssやjsファイルが入っています。

Bootstrap3

Foundationを使うため、index.html(など)へこちらを記述します。
jQueryはGoogle Developersを使いましょう。

<link rel="stylesheet" href="css/foundation.css">

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/vendor/custom.modernizr.js"></script>
・
・
・
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

注意!!

以下はソース中の末尾に入れる必要があります。
末尾でなければ、ナビゲーションが正常に動作しません。

  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>

foundationを使って簡単なページを作ってみる。

簡単なサンプルページを作成してみました。
こちらで実際にサンプルページを表示することが出来ます。

demo

PCで開くとこんな感じに表示されます。

css-foundation-setting1

webレスポンシブにも対応しているので、ブラウザ窓を小さくするとこのように表示されます。

css-foundation-setting2

さいごに

Foundationはいかがだったでしょうか。
FoundationのCSS・JSの導入手順自体は、他のCSSフレームワークと同じ手順です。

私は、BootStrapよりもFoundationのデザインの方が好みです。
BootStrapは少し特徴があるので、BootStrapを使っているサイトは、「BootStrapを使っているな」と見抜かれてしまいそうです。
Foundationは、シンプルなデザインのため、CSSフレームワークを使っている感じがでにくいかなと思います。

今の時代、業務系システムもデザインが大事です。
CSSフレームワークを積極的に使って、オシャレなUIを目指しましょう!
それでは!