ZURB Foundation入門
セットアップ
ダウンロード
Foundation5の入門記事です。
本エントリーが参考になった方には下の記事もおすすめです。
パッケージのダウンロードはZURB Foundationのサイトから行います。
http://foundation.zurb.com/downloads/foundation-5.5.3.zip
本記事をエントリーした時点では、
foundation-5.1.1.zip
というバージョンのものをダウンロードしました。
インストール
Windows8環境のxampp1.8.3にバーチャルホストを一つ設定してインストールを行う。配置したパスは以下のとおり
C:\xampp\htdocs\vhost\foundation
foundationフォルダの中身は画像の状態となる。
バーチャルホストの設定
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
の画面が表示される。
このindex.htmlを調べてみるのもFoundation5の使い方を知るのには有効な手段になっている。index.htmlでは、Foundationの以下の要素が利用されている。
- grid layout
- panel
- form
- button
などの主要なコンポーネントが利用されている。
Foundation5はレスポンシブなcssのフレームワークなので、幅を狭くした状態の表示も確認してみたい。確認するためには、モバイル端末を利用してもよいが、開発時はブラウザのウィンドウサイズを調整することでモバイル端末での表示を確認することができる。
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
にアクセスして表示を確認する。
ブラウザのウィンドウ幅を狭くして表示したのが以下の画像の状態
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を追記すると画像のような表示が確認できる。
モバイル端末では下の画像のような画面になる。
Foundationにはcssだけでなくjavascriptに依存するコンポーネントも存在する
上で掲載したTop Barを追加したモバイル端末の表示であるが、[MENU]という部分をクリック(タップ)すると以下の表示となる。
モバイル端末では、グローバルメニューの項目がスライドして表示されるようになっていて、階層毎の項目を見やすくしている。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パーツまで効率的に組むことができる。