Foundation4の導入

久しぶりの更新です。最近は、Laravel4に没頭していたので、「Larvel4初心者講座」の記事が中心でした。

Laravel4初心者講座の中でもご紹介したのですが、CSSフレームワークのFoundationがバージョン4になって、かなり便利になっていますので、Laravelユーザー以外にも、ご紹介したくなりました。私個人としては、Twitter Bootstrapよりも使いやすいのかなと思っています。

Foundation4のダウンロード

まず、Foundation4のダウンロードですが、初心者は、迷わず、Default CSSを選択しましょう。ほとんどの機能はそろっていますので、簡単に利用することができます。

ちょっとカスタマイズしたい人は、CustomCSSを選択すればいいと思います。ダウンロードページの下の方に、カスタマイズの方法が記述されています。カラム数の指定(デフォルトは12)や、余白の指定、カラーの指定、角丸の指定等ある程度の好みでカスタマイズすることができます。

Sassを利用したい方は、Sassの下にあるInstall Foundation SCSSをクリックして、使い方を熟読してください。初心者には、ちょっと敷居が高いと思います。Sassとは、HAMLというマークアップ言語で記述し、CSSにコンパイルするメタ言語です。

慣れるといろいろなことができるのでしょうが、私もまだ勉強をしたことがありませんので、詳しい説明はできません。悪しからず。(^0^)

さて、それでは、下記のサイトからFoundation4のDefault CSSをダウンロードします。

Download Foundation4

foundation001

ダウンロードして解凍したファイルを見てみます。foundation-4.2.2フォルダには、3つのフォルダ(css、img、js)と3つのファイルhumans.txt、index.html、robots.txtがあります。フォルダ構成(フォルダ名)は、Twitter Bootstrapと同じですね。

index.htmlをブラウザで開いてみます。ちょっと修正すればすぐにでも使えそうですね。

foundation002

すぐに使いたい方は、下記のFoundation4のドキュメントページを熟読して(英語ですが)、使用してください。

Foundation4 Documentation

ベーステンプレートの作成

それでは、まず、ベースになるテンプレートを作成したいと思いまので、base.html名で下記のようなファイルを作成します。

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- ここにコンテンツを記述します。 -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>  
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

次に、Foundation4のHTML Templatesページへ行きます。

http://foundation.zurb.com/templates.php

foundation003

下の方にあるレイアウト画像から好みのHTMLを選択して、上記base.htmlのBody部分(<!–ここにコンテンツを記述します–>と書かれた部分)にコピー&ペーストします。

foundation004

後は、中の文章や画像を修正すれば、簡単にページを作成することができます。

本日は、Foundation4の簡単な導入方法のご紹介だけにします。次回から少しずつ使い方をご紹介したいと思います。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ