Bootstrapに次ぐ人気のフレームワーク、「Foundation」のはじめ方です。

ほとんどCSSをいじらなくてもそれっぽいサイトが作れてしまうのがフレームワークの魅力ですが、定番の「Bootstrap」が最早定番すぎるので、それ以外のフレームワークも試してみい！という人には、この「Foundation 6」がおすすめです。

 

使い方

今回はwindowsでのやり方を説明します。

 

１、Node.jsのインストール

パッケージ管理にnpm、タスクランナーにgulpを使うので、まずはNode.jsをインストールします。 一番簡単なので、公式サイトから直接ダウンロードしてインストールします。

 

Node.js

 

ダウンロードしたインストーラを起動すれば簡単にインストールできます。 同時にnpmもインストールされているはずです。

確認のため、コマンドプロンプトを開き以下のコマンドを入力してみて下さい。

 

$ node -v

$ npm -v

 

各バージョンが表示されればインストールの成功です。

 

 

２、Foundation CLIのインストール

Foundation CLIを使用すると、プロジェクトの新規作成やSassコンパイルがとても簡単になります。 foundationコマンドをグローバルで使用できるようにするため、以下のコマンドを実行して下さい。

 

$ npm install --global foundation-cli

 

こちらも以下のコマンドでバージョンを確認して、インストールできたか確認してみて下さい。

 

$ foundation -v

 

バージョンが表示されれば成功です。

 

 

３、新規プロジェクトを作成

新規プロジェクトフォルダを作成したい場所へ移動して、以下のfoundationコマンドを実行して下さい。

 

$ foundation new

 

このコマンドを実行すると質問が3つ返ってくるので、以下のように選択、または入力して下さい。

• ? What are you building today? A website (Foundation for Sites)
• ? What’s the project called? (任意のプロジェクト・フォルダ名)
• ? Which template would you like to use? Basic Template: includes a Sass compiler

 

これでFoundationに最低限必要な一式が揃いました。

 

４、Foundationを起動する

先ほど作成したプロジェクトフォルダに移動し、タスクランナーを起動させます。

 

$ cd (プロジェクトフォルダ名)

$ foundation watch

 

これでgulpfile.jsが実行され、Sass/Scssファイルのコンパイルが自動(ファイルが保存されるたび)で実行されるようになりました。 なお、コンパイルを停止するのは Ctrl + C です。

 

 

５、サイトを作成する

あとは、Foundationのフレームワークに沿ってコーディングをしたり、scss/_setting.scssにベースとなるフォントやカラーを設定したり、追加したいスタイルをscss/app.scssなどに追加していくだけです。

 

英語のみですが、以下の公式マニュアルを参考に構築すれば、あっという間に1ページ完成です！

 

Foundation for Sites

 

 

まとめ

 

以上が、とりあえず始めるための最低限の環境構築になります。 とりあえず公式マニュアルを見ながらコーディングしていけば、レスポンシブ対応のサイトが作れちゃいます。特にgridデザインは高さも自動調節してくれるので、Webショップの構築などで威力を発揮します。

 

もっと簡単に使いたい場合は、CDNを利用して以下のコードをheadに追加するだけでもOKです。

 

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.js"></script>

 

ぜひ試してみてください！