Foundation6を使ってみる。導入編


Foundation6を使ってみよう。導入編

 

Bootstrapに続いて人気の高いCSSフレームワークのZURB社の「Foundation」。
WordpressのテーマにFoundationのフレームワークを使用したものも多数ありますね。

Foundation と Bootstrap どちらが良いのか。
Bootstrap は機能が豊富だし、テーマなんかも結構あります。使い方の説明をされているサイトが多いので、最初に覚えるにはやはり Bootstrap でしょう。
Foundation はよりデザイナー向けとか、グリッドの柔軟性があるとか聞きます。機能も Bootstrap と同じくらいあります。ただ使い方に関しての文献は少ないです。

Foundation 公式サイトを見ると様々な企業が使っているよと宣伝もされていますね。
Bootstrapで cssフレームワークを覚えたなら、次は Foundation も使ってみたいと思いますよね?そうですよね!

ということで「Foundation6(2016/03/05時点)」を使用するための最初のステップ、「ダウンロード」、「エディタへの記述」、「初期画面の確認」の導入編とSassのダウンロードからやってみたいと思います。

Foundation

1.Foundation6のダウンロード

Foundation公式サイト

上記画像のトップページの『Download Foundation 6』のボタンをクリック。

ダウンロードページが表示されたら「Complete」の「Download Everything」から「complete-f6.zip」ファイルをダウンロードします。

  • Complete」:標準フルバージョン
  • Essential」:機能制限した軽量版
  • Custom」:ユーザーが機能を選んでダウンロード出来る。
  • Sass」:Mac用アプリ「Yeti(イエティ)」を使ってコマンドラインでインストールする方法などの説明ページへ。

Foundatio使い方

complete-f6.zip」ファイルをダウンロードし解凍します。
フォルダの構成は下記のようになっていました。
「img」フォルダ内は空となっていました。

この中で使用するファイルは3つ

cssフォルダの「foundation.min.css」、jsフォルダの「foundation.min.js」、venderフォルダの「jquery.min.js」です。

プラス、scriptの簡単な記述が必要

フォルダ構成などご自身の環境に合わせて、htmlファイルへ各種ファイルまでのリンクとscriptを記述をしましょう。

・cssファイルまでのリンクをhead内へ記述。

・jsファイルまでのリンクを/bodyタグ直前に記述。

・scriptの記述を/bodyタグ直前に記述

*CDNを使用した記述も出来ますがここでは割愛します。 詳しくはhttp://foundation.zurb.com/sites/docs/installation.html#cdn-links

最終的にエディタに記述したコードは下記参照。

ブラウザーで表示出来ていれば導入完了です!
Foundation-使い方

Foundationの導入は以上です。

Sassのダウンロード(Windows)

Sassファイルはコマンドプロンプト用いてダウンロードします。

Sassが使える環境であることを元に、簡単に説明。

環境構築がまだの人はこちらを参考にしてみてください。

Sass(SCSS)+Koalaを使ってみよう。導入編

コマンドプロンプトにて以下コマンド実行します。

1、Foundation-Sassのインストール

2、compassのインストール

3、Sassファイルを置くディレクトリに移動。(任意)
ここでは、デスクトップに移動とします。

4、作業フォルダを作り、Sassファイルを展開する

例:FILE-NAMEというフォルダの中にFoundation-Sassを展開する。

ファイルの中身は以下のようになっています。

次回はFoundation6他機能を使っていきたいと思います。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL