You are here
Home > WEB制作 > HTML5フレームワーク「Foundation」の使い方

HTML5フレームワーク「Foundation」の使い方

Foundation 使い方 画像1

今手元に来ている制作案件で「PC、スマホとかで見られるように」、「最近ぽく(アバウトすぎると思いません?)」というのがあります。

私、デザイナー系ではございませんので(じゃあ一体何ができるんだよとか言わないで)「何か使えるフレームワークはないかな~」と探していると、いいのが見つかりましたよ!

そのフレームワークの名は、「Foundation」。

今回は「Foundation」を実際に使いながらご紹介したいと思います。

SPONSERD LINK

(WEB)フレームワークとは?

フレームワークとは、本来「枠組み」という意味を持ちます。
WEBフレームワークとは、WEBサイトを作成する際に必要なレイアウト等を「フレームワーク」を使用することで誰でも簡単に作れるようになります。
レイアウトだけなのか、例えばボタンやフォームなどが実装されているかなどは、使用する「フレームワーク」により異なります。
(下記を実際に見比べていただけると理解しやすいと思います)

Bootstrap
http://getbootstrap.com/
最も有名なWEBフレームワーク。個人的には全体的にファイルが多く重くなりがちなのが難点。
全部込み込みタイプ。
Responsive Grid System
http://responsive.gs/
前者と違い、レスポンシブレイアウトのみの超軽量フレームワーク。
「後は自分で書けるわよ!」というゴリゴリ派人向け。

Foundationとは?

さて、「Foundation」に話を戻します。「Foundation」は前述している「WEBフレームワーク」のひとつです。
特徴としては、「必要なものをカスタマイズしてダウンロードできる機能」や「ページに合わせたテンプレートのダウンロードが可能※要登録」があります。

Foundationの使い方

Foundation 使い方 画像1

まず、「Foundation公式」へ移動し、「Download Foundation 6」(執筆当時)をクリックします。

Foundation 使い方 画像2

随時書き足すのでしばらくお待ちくださいね。

テンプレートのダウンロード方法

「HTML TEMPLATES」をクリックし、テンプレートページへ移動します。

Foundation テンプレート 画像1

「HTML Templates」ページ内の「Sign Up & Download」ボタンをクリックします。

Foundation テンプレート 画像3

下記の画像を参考に、「必要項目に情報を入力」します。
入力したら、「Send me the templates」ボタンをクリック。

Foundation テンプレート 画像4

次に、登録完了画が表示されます。
Foundation テンプレート 画像4

しばらく(結構遅い)すると、登録の際に入力した「メールアドレス」へ、「foundation@zurb.com」からテンプレートファイルのダウンロードURLが書かれたHTMLメールが届きます。5分以上経ってもメールが届かない場合は名前と会社名の欄を「英数字で入力」してみるといいかも知れません。

Foundation テンプレート 画像5
foundation@zurb.comから届いたメール

「Download the Template」をクリックするとテンプレートがダウンロードされます。後は「all-f6-templates」の中にあるHTMLファイルを「Download Foundation 6」の中に放り込んでコピーし、ブラウザ上でご確認下さい。

Foundationテンプレート一覧

「どれがどれだっけ」という(ほぼ自分)のためにテンプレート一覧を掲載しておきます。

Foundation テンプレート確認用画像
Foundation テンプレート一覧

 

0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top