Foundation5の使い方

ZURB Foundation入門

セットアップ

ダウンロード

Foundation5の入門記事です。

本エントリーが参考になった方には下の記事もおすすめです。

パッケージのダウンロードはZURB Foundationのサイトから行います。

http://foundation.zurb.com/develop/download.html

本記事をエントリーした時点では、

foundation-5.1.1.zip

というバージョンのものをダウンロードしました。

インストール

Windows8環境のxampp1.8.3にバーチャルホストを一つ設定してインストールを行う。配置したパスは以下のとおり

C:\xampp\htdocs\vhost\foundation

foundationフォルダの中身は画像の状態となる。

foundation-path

バーチャルホストの設定

foundation.localというURLでアクセスするため以下のようにバーチャルホストを設定してみた。

<VirtualHost *:80>
	ServerName foundation.local
	DocumentRoot "C:/xampp/htdocs/vhost/foundation"
	DirectoryIndex index.php index.html
	AddHandler server-parsed .html

	<Directory "C:/xampp/htdocs/vhost/foundation">
		AllowOverride all
		Require all granted
	</Directory>
</VirtualHost>

名前解決にはWindowsのhostsファイルを利用する。そのため、hostsに以下の一行を追記する。

192.168.0.2	foundation.local

index.htmlにアクセスしてみる

セットアップが完了したので、早速アクセスをしてみようと思う。ZURB foundationのパッケージ内にはサンプル的なindex.htmlが用意されている。そのため、

foundation.local/index.html

にアクセスする。すると、

Welcome to Foundation

の画面が表示される。

welcome-to-foundation

このindex.htmlを調べてみるのもFoundation5の使い方を知るのには有効な手段になっている。index.htmlでは、Foundationの以下の要素が利用されている。

  • grid layout
  • panel
  • form
  • button

などの主要なコンポーネントが利用されている。

Foundation5はレスポンシブなcssのフレームワークなので、幅を狭くした状態の表示も確認してみたい。確認するためには、モバイル端末を利用してもよいが、開発時はブラウザのウィンドウサイズを調整することでモバイル端末での表示を確認することができる。

welcome-to-foundation-mobile

index.htmlを簡略化する

index.htmlをテキストエディタで開くとHTMLのコードが確認できる。このindex.htmlをシンプルな状態に簡略化してレイアウト構造が確認しやすい状態としてみる。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    
    <div class="row">
      <div class="large-12 columns">
        <h1>h1 title</h1>
      </div>
    </div>
    
    <div class="row">
      <div class="large-12 columns">
      	<div class="panel">

      	</div>
      </div>
    </div>

    <div class="row">
      <div class="large-8 medium-8 columns">
      	<div class="callout panel">

      	</div>
      </div>     

      <div class="large-4 medium-4 columns">
      	<div class="panel">

      	</div>
      </div>
    </div>
    
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

上のHTMLをsimple.htmlというファイル名でindex.htmlと同じ階層に作成しアクセスしてみる。

foundation.local/simple.html

にアクセスして表示を確認する。

simple-foundation5

ブラウザのウィンドウ幅を狭くして表示したのが以下の画像の状態

simple-foundation5-mobile

Foundation5を利用すれば効率的にPCとモバイルに対応したレイアウト構造が定義できることが確認できる。

Foundationのレイアウト構造を制御するclass属性

上に載せた簡略化したHTMLでは、Foundation5のgrid layoutを制御するclass属性が定義されている。grid layoutに限らないがより深くgridについて知るためには公式サイトのドキュメントを確認することになる。

Foundationのdocs

http://foundation.zurb.com/docs/

gridについては以下のページ

http://foundation.zurb.com/docs/components/grid.html

simple.htmlにヘッダーバーを追加

簡略化したsimple.htmlにヘッダーバーを追加してみたい。Foundation5のコンポーネントには

Top Bar

というコンポーネントが用意されており、Grid同様公式ドキュメントに利用方法がマニュアルとして掲載されている。

http://foundation.zurb.com/docs/components/topbar.html

ドキュメントを参考に以下のコードをbody直下に追記した。

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name"><h1><a href="#">My Site</a></h1></li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>
  <section class="top-bar-section"> <!-- Right Nav Section -->
  <ul class="right">
    <li class="active"><a href="#">Right Button Active</a></li>
    <li class="has-dropdown"> <a href="#">Right Button with Dropdown</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul></li>
  </ul> <!-- Left Nav Section -->
  <ul class="left">
    <li><a href="#">Left Nav Button</a></li>
  </ul>
  </section>
</nav>

top barのHTMLを追記すると画像のような表示が確認できる。

top-bar-foundation

モバイル端末では下の画像のような画面になる。

top-bar-foundation-mobile

Foundationにはcssだけでなくjavascriptに依存するコンポーネントも存在する

上で掲載したTop Barを追加したモバイル端末の表示であるが、[MENU]という部分をクリック(タップ)すると以下の表示となる。

top-bar-foundation-mobile-js

モバイル端末では、グローバルメニューの項目がスライドして表示されるようになっていて、階層毎の項目を見やすくしている。FoundationのTop Barコンポーネントでは、アニメーションっぽい見せ方をするためにcssだけでなくjavascriptが利用されている。

上の方で載せた、

index.html
simple.html

双方ともに

<script src="js/foundation.min.js"></script>

の部分でFoundation5で用意されているjavascriptコンポーネントが利用可能な状態になっている。すべてではなく、Top barのみを利用したい場合には上に載せたjsの読み込みを以下のよう個別に行うように置き換える。

<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>

Foundation5には、Javascriptに依存するコンポーネントがある点をおぼえておきたい。

Foundation5を利用すれば、レイアウトの構造化からその構造上で表現するhtmlパーツまで効率的に組むことができる。

参考
Bootstrap3 Sassの使い方
Bootstrap3 Lessの使い方

Webエンジニアブログにコメント

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

Foundation5の使い方の記事にコメントを投稿