基礎-インストール

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

財団をダウンロードする

リンクfoundation.zurb.comを開くと、次のような画面が表示されます-

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

ここに4つのボタンがあります-

Download Everything −バニラCSSやJSなど、すべてをフレームワークに入れたい場合は、このバージョンのFoundationをダウンロードできます。
Download Essentials −グリッド、ボタン、タイポグラフィなどを含むシンプルなバージョンをダウンロードします。
Custom Download −これにより、Foundationのカスタムライブラリがダウンロードされます。これには要素が含まれ、列のサイズ、フォントサイズ、色などが定義されます。
Install via SCSS −これにより、Foundation forsitesをインストールするためのドキュメントページにリダイレクトされます。

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

ファイル構造

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

ご覧のとおり、コンパイルされた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は、HTML5Doctypeの使用を必要とする特定のHTML要素とCSSプロパティで構成されています。したがって、Foundationを使用するすべてのプロジェクトの最初に、HTML5Doctypeの次のコードを含める必要があります。

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

モバイルファースト

モバイルデバイスに対応するのに役立ちます。あなたは含める必要がありますviewport meta tag <head>要素に追加して、モバイルデバイスで適切なレンダリングとタッチズームを確保します。

<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コードを保存します firstexample.html ファイル。
このHTMLファイルをブラウザで開くと、以下のような出力が表示されます。