基礎-インストール

この章では、WebサイトにFoundationをインストールして使用する方法について説明します。

財団をダウンロードする

あなたがリンクhttps://foundation.zurb.com [foundation.zurb.com]を開くと、以下に示すような画面が表示されます-

*Download Foundation 6* ボタンをクリックすると、別のページにリダイレクトされます。

ここでは、4つのボタンを見ることができます-

Foundation Installation

すべてをダウンロード-フレームワークにすべてのものを入れたい場合は、このバージョンのFoundationをダウンロードできます。バニラCSSとJS。
要点のダウンロード-グリッド、ボタン、タイポグラフィなどを含む簡単なバージョンをダウンロードします。
カスタムダウンロード-Foundationのカスタムライブラリをダウンロードします。これには要素が含まれ、列のサイズ、フォントサイズ、色などを定義します。
* SCSS経由でインストール*-これにより、ドキュメントページにリダイレクトされ、サイトのFoundationがインストールされます。

すべてをダウンロード*ボタンをクリックして、フレームワーク内のすべてを取得できます。 CSSとJS。ファイルはフレームワーク内のすべてのもので構成されているため、個々の機能ごとに個別のファイルを含める必要はありません。このチュートリアルを書いている時点で、最新バージョン（Foundation 6）がダウンロードされました。

ファイル構造

Foundationがダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-

Foundation Installation

ご覧のとおり、コンパイル済みのCSSとJS（foundation。）、およびコンパイル済みの縮小されたCSSとJS（foundation.min。）があります。

このチュートリアルでは、ライブラリのCDNバージョンを使用しています。

HTMLテンプレート

Foundationを使用した基本的なHTMLテンプレートは以下のとおりです-

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

次のセクションでは、上記のコードについて詳しく説明します。

HTML5 doctype

Foundationは、HTML5 Doctypeの使用を必要とする特定のHTML要素とCSSプロパティで構成されています。したがって、Foundationを使用するすべてのプロジェクトの最初に、HTML5 doctypeの次のコードを含める必要があります。

<!DOCTYPE html>
<html>
   ....
</html>

モバイルファースト

モバイルデバイスに応答するのに役立ちます。モバイルデバイスで適切なレンダリングとタッチズームを保証するには、<head>要素に* viewportメタタグ*を含める必要があります。

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

_width_プロパティは、デバイスの幅を制御します。デバイス幅に設定すると、さまざまなデバイス（モバイル、デスクトップ、タブレットなど）で適切にレンダリングされるようになります。
_initial-scale = 1.0_を使用すると、ロード時にWebページが1：1の縮尺でレンダリングされ、すぐにズームが適用されなくなります。

コンポーネントの初期化

jQueryスクリプトは、モーダルやドロップダウンなどのコンポーネントのFoundationで必要です。

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコード firstexamplel ファイルを保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Foundation-installation

目次