Foundation をはじめましょう

Foundation とは？

Note レスポンシブ Web デザインとは？

レスポンシブ Web デザインとは、小さな携帯電話から大きなデスクトップに至るすべてのデバイス上で、 表示を自動的に調整する web サイトの作成に関するものです。

Foundation はどこで取得できますか ?

web サイトで Foundation を使用するには2つの方法があります。

以下の方法が使用できます：

Foundation のダウンロード

ダウンロードして Foundation を自分でホストする場合には、foundation.zurb.com に行き、そこの指示に従ってください。

Foundation CDN

ダウンロードして、Foundation を自分でホストしたくない場合は、CDN（Content Delivery Network）から、 それをインクルードすることができます。

Cloudflare は、Foundation の CSS と JavaScript のための CDN サポートを提供しています （機能を持つコンポーネントのために jQuery をインクルードすることを忘れないでください）：

Cloudflare:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">

<!-- jQuery library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>

<!-- Latest compiled modernizr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
Note Foundationの CDN を使用する1つの利点：
多くのユーザは、他のサイトを訪問したときに、すでに CloudFlare から Foundation をダウンロードしていると考えられます。 その結果、あなたのサイトを訪問したときにはキャッシュからロードされるので、ロード時間が短縮されることになります。 また、ほとんどの CDN は、ユーザがファイルを要求したときに、ロード時間の短縮のために最も近いサーバから提供される ようにします。

Foundation はなぜ modernizr を使用するのか不思議ですか？
Foundation の一部のコンポーネントは、すべてのブラウザではサポートされていない高度な HTML5 と CSS3 の機能を使用しています。 Modernizr は、すべてのコンポーネントをすべてのブラウザで動作させるために、これを検出してサポートしていないブラウザのためのフォールバック機能を可能にする JavaScript ライブラリです。

Foundation でページを作成する

1. HTML5 doctype を追加する

Foundation は、HTML5 doctype を必要とする HTML 要素と CSS プロパティを使用しています。

次のとおり、ページの先頭に必ず lang 属性と正しい文字セットを持つ HTML5 doctype 指定します：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Foundation 5 はモバイルファースト

Foundation 5 は、モバイルデバイスにレスポンシブになるように設計されています。 モバイルファーストのスタイルは、コアフレームワークの一部です。

<head> 要素の内部に次の <meta> タグを追加し、 適切なレンダリングとタッチズームを確保します：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width の部分は、デバイスによって異なる画面幅に従うようにページの幅を設定します。

initial-scale=1 の部分は、ページが最初にブラウザによってロードされたときの初期のズームレベルを設定します。

3. コンポーネントの初期化

Foundation の一部のコンポーネントを動作するためには jQuery が必要です - これらのコンポーネント（ドロップダウンやモーダルのような）には、以下のスクリプトを追加する必要があります：

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

基本的な Foundation のページ

基本的な Foundation のページの作成方法：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
</head>
<body>

<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation Page</h1>
      <p>Resize this responsive page to see the effect!</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum..</p>
  </div>
</div>

</body>
</html>
Try it Yourself »