基本

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

Foundation5を使用するための準備

Foundationを使用するためにまずはサイトからデータをダウンロードします。
※Bootstrapと同様CDNもあるようですが、公式にきちんと掲載されていないのでダウンロードして使用する方法のみを掲載します。

ダウンロードして利用する方法

まずはFoundation本サイトのリンクからデータをまずはダウンロード!

※現在はfoundation5のダウンロードページが無くなったようなのでFoundation6のダウンロードページへのリンクになります。上記リンクページからカスタマイズはできませんがfoundation-5.5.3のダウンロードは可能です。

サイトに訪れると下記画像のようにダウンロードボタンが掲載されています。
下記画像のようにComplete部分からダウンロードしてください。

※Essentialeは機能を限定した軽いデータのダウンロード、Customはページ下部のカスタム設定画面へ行き自分で設定したデータをダウンロードできます、SassはSass(SCSS)のインストール方法の紹介ページになります。

上記画像のようにComplete部分からダウンロードしてください。
※Essentialeは機能を制限した軽いデータのダウンロード、Customは自分でカスタムしたデータのダウンロード、SassはSass(SCSS)のインストール方法の紹介ページになります。

ダウンロードしたファイル(記事作成時の最新版はfoundation-5.5.1.zip)を解凍すると下記のようなファイル構成になります。(一部未掲載)

foundation-5.5.1/
├── css/
│   ├── foundation.css(圧縮なしのCSS)
│   ├── foundation.min.css(圧縮されたCSS)
│   └── normalize.css(圧縮されたCSS)
├── js/
│   ├── foundationフォルダ(標準で用意された個別のjavascriptデータが入っています)
│   ├── foundation.min.js(上記のjavascriptデータ全て含めたものを圧縮したデータ)
│   └── vendorフォルダ(jqueryなどのjavascriptデータが入っています)
└── index.html

上記の中から、必要最低限使用するのはfoundation.min.cssとfoundation.min.jsとvendorフォルダのjquery.jsになります。
※foundationのjavascriptはjQueryがないと動作しないため必要です。minはファイル圧縮(Minify)の略なので圧縮なしのファイルでも構いません。index.htmlを開くとfoundationを利用した簡単なデモページが見れます。

foundation.min.cssをheadタグ内に、jquery.jsとfoundation.min.jsを</body>タグ直前に指定します。そして最後に、foundationで使用されるjavascriptを使用するために$(document).foundation();のスクリプトの記載が必要です。
Bootstrap3では、内部でスクリプトを記載することがないのでちょっとした違いになるかと思います。

htmlソースを全体的に書くと下記の様な形になります。ファイルの場所などは適宜ご自分の環境に合わせて変更して下さい。

			<!DOCTYPE html>
			<html lang="ja">
			<head>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<title>Foundation5の使い方</title>
				<link rel="stylesheet" href="css/foundation.min.css">
			</head>

			<body>


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

こちらで準備完了です。
必要に応じて用意されたブラウザ間の差異を減らすnormalize.cssを読み込んだり、IE8にHTML5を対応させるためvendorフォルダ内のmodernizr.jsを読み込むなどしてください。(検証していないのでfoundation5がサポート外のIE8にどれだけ対応できるかわかりません。)
※ちなみにBootstarp3ではnormalize.cssが別ファイルではなく標準でbootstrap.css内に組み込まれています。

© 2015 foudation5-guide.com