Zurb Foundation
Zurb Foundation CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Zurb Foundationを使って作っています。
ただし、見やすさを考慮してHTMLコードに関しては、シンタックスハイライター hilights.js も使用しています。
CSSフレームワーク
Foundation v6.7.4
| モジュール | サイズ |
|---|
| foundation.min.css |
154KB |
| foundation.min.js |
524KB |
| jquery.js |
281KB |
| what-input.js |
14.4KB |
使い方とサンプル
テンプレート
Zurb Foundation を使うときのテンプレートは次のとおり。
<!DOCTYPE html>
<html class="no-js">
<head>
<link rel="stylesheet" href="/css/foundation.min.css" />
</head>
<body>
<!-- content -->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Zurb Foundation は jQuery を利用するので、jQuery のライブラリもインポートする。
CDN
Zurb Foundation を CDN (Contents Delivery Network) を通じて導入するテンプレートを示す。
<!DOCTYPE html>
<html>
<head>
<!-- Foundation CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Foundation JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<!-- content -->
</body>
</html>
.badge
Zurb Foundation でバッジを作成するには、badge クラスを指定する。
<span class="badge">1</span>
1
.secondary
Zurb Foundation で副次バッジを作成するには、secondary クラスを指定する。
<span class="secondary badge">2</span>
2
.success
Zurb Foundation で成功バッジを作成するには、success クラスを指定する。
<span class="success badge">3</span>
3
.alert
Zurb Foundation で注意バッジを作成するには、alert クラスを指定する。
<span class="alert badge">4</span>
4
.warning
Zurb Foundation で警告バッジを作成するには、warning クラスを指定する。
<span class="warning badge">5</span>
5
.breadcrumbs
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li>
<span class="show-for-sr">Current:</span> Zurb Foundation
</li>
</ul>
</nav>
Zurb Foundation でボタンを作成するには、button クラスを指定する。
<button type="button" class="button">Button</button>
<a class="button" href="#">Link</a>
<input class="button" type="submit">
Link
Zurb Foundation で副次ボタンを作成するには、secondary クラスを指定する。
<button class="secondary button" type="button">Button</button>
<a class="secondary button" href="#">Link</a>
<input class="secondary button" type="submit">
Link
Zurb Foundation で成功ボタンを作成するには、success クラスを指定する。
<button class="success button" type="button">Button</button>
<a class="success button" href="#">Link</a>
<input class="success button" type="submit">
Link
Zurb Foundation で注意ボタンを作成するには、alert クラスを指定する。
<button class="alert button" type="button">Button</button>
<a class="alert button" href="#">Link</a>
<input class="alert button" type="submit">
Link
Zurb Foundation で警告ボタンを作成するには、warning クラスを指定する。
<button class="warning button" type="button">Button</button>
<a class="warning button" href="#">Link</a>
<input class="warning button" type="submit">
Link
Zurb Foundation で極小ボタンを作成するには、tiny クラスを指定する。
<button type="button" class="tiny button">Button</button>
<a href="#" class="tiny button">Link</a>
<input class="warning button" type="submit">
Link
Zurb Foundation で小さいボタンを作成するには、small クラスを指定する。
<button class="small button" type="button">Button</button>
<a class="small button" href="#">Link</a>
<input class="small button" type="submit">
Link
Zurb Foundation で大きいボタンを作成するには、large クラスを指定する。
<button class="large button" type="button">Button</button>
<a class="large button" href="#">Link</a>
<input class="large button" type="submit">
Link
Zurb Foundation でブロック・レベルのボタンを作成するには、expanded クラスを指定する。
<button class="expanded button" type="button">Button</button>
<a class="expanded button" href="#">Link</a>
<input class="expanded button" type="submit">
Link
<div class="small secondary button-group">
<a class="button">1</a>
<a class="button">2</a>
</div>
.hollow
<div class="button-group hollow">
<a class="button">1</a>
<a class="button">2</a>
</div>
.clear
<div class="button-group clear">
<a class="button">1</a>
<a class="button">2</a>
</div>
.no-gaps
<div class="button-group no-gaps">
<a class="button">1</a>
<a class="button">2</a>
</div>
.stacked-for-small
ボタングループにstacked-for-smallクラスを指定すると、画面幅が小さいときにボタンが縦（垂直方向）並ぶ。
<div class="stacked-for-small button-group">
<a class="button">1</a>
<a class="button">2</a>
</div>
.arrow-only
<div class="button-group">
<a class="button">1</a>
<a class="dropdown button arrow-only">
<span class="show-for-sr">Show menu</span>
</a>
</div>
<div class="button-group align-center">
<a class="button">1</a>
<a class="button">2</a>
</div>
<div class="button-group align-right">
<a class="button">1</a>
<a class="button">2</a>
</div>
<div class="button-group align-spaced">
<a class="button">1</a>
<a class="button">2</a>
</div>
<div class="button-group align-justify">
<a class="button">1</a>
<a class="button">2</a>
</div>
.card
Zurb Foundation でカードを作成するには、card クラスを指定する。
<div class="card" style="width: 300px;">
<img src="avatar.jpg">
<div class="card-section">
<h4>tsuka</h4>
<p>元システムエンジニアのファイナンシャルプランナーです。</p>
</div>
</div>
Tsukamoto H.
元システムエンジニアのファイナンシャルプランナーです。
.card-divider
Zurb Foundation のカードにヘッダやフッタを付けるには、card-divider クラスを指定する。
<div class="card" style="width: 300px;">
<div class="card-divider">
プロフィール
</div>
<img src="avatar.jpg">
<div class="card-section">
<h4>tsuka</h4>
<p>
元システムエンジニアのファイナンシャルプランナーです。
</p>
</div>
</div>
プロフィール
Tsukamoto H.
元システムエンジニアのファイナンシャルプランナーです。
<div class="input-group">
<input class="input-group-field" type="text">
</div>
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number">
</div>
$
<div class="input-group">
<input class="input-group-field" type="text">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
<ul class="menu">
<li>
<a href="/css/bootstrap/">Bootstrap</a>
</li>
<li>
<a href="/css/bulma/">Bulma</a>
</li>
</ul>
.hover
<table class="hover">
メディアクエリ
| メディア |
寸法 |
| small |
< 40em |
| medium |
≥ 40em |
| large |
≥ 64em |
.unstriped
<table class="unstriped">
Zurb Foundationのtableクラス
| クラス | 説明 |
|---|
| hover |
マウスカーソルを乗せた行の色を変える |
| unstriped |
1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll |
水平方向にスクロールできるテーブル |
.stack
<table class="stack">
Zurb Foundationのtableクラス
| クラス | 説明 |
|---|
| hover |
マウスカーソルを乗せた行の色を変える |
| unstriped |
1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll |
水平方向にスクロールできるテーブル |
<table class="table-scroll">
.top-bar
Zurb Foundation でトップ・バーを作成するには、top-bar クラスを指定する。
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">SE学院</li>
<li class="menu-text">
<a href="#">お問い合わせ</a>
</li>
</ul>
</div>
</div>
.top-bar-right
Zurb Foundation でトップ・バーを右寄せにするには、top-bar-right クラスを指定する。
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">SE学院</li>
</ul>
<li class="menu-text">
<a href="#">お問い合わせ</a>
</li>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search" name="q" placeholder="Search">
</li>
<li>
<input type="submit" name="sa" value="Search" class="button">
</li>
</ul>
</div>
</div>
.dropdown
Zurb Foundation でトップ・バー内にドロップダウン・メニューを作成するには、dropdown クラスを指定する。
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">SE学院</li>
<li>
<a href="#">フレームワーク</a>
<ul class="menu vertical">
<li>
<a href="/css/bootstrap/">Bootstrap</a>
</li>
<li>
<a href="/css/bulma/">Bulma</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
No-bullet list
<ul class="no-bullet">
<li>first</li>
<li>second</li>
</ul>
Disc list
<ul class="list-disc">
<li>first</li>
<li>second</li>
</ul>
Decimal list
<ol class="list-decimal">
<li>first</li>
<li>second</li>
</ol>
- first
- second
Right aligned menu
<ul class="menu align-right">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Center aligned menu
<ul class="menu align-center">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Expanded menu
<ul class="menu expanded">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Vertical menu
<ul class="vertical menu">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Right aligned vertical menu
<ul class="vertical menu align-right">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Center aligned vertical menu
<ul class="vertical menu align-center">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul>
Dropdown menu
<head>
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/foundation.min.js"></script>
<script src="/js/foundation.core.js"></script>
<script src="/js/foundation.util.keyboard.js"></script>
<script src="/js/foundation.util.box.js"></script>
<script src="/js/foundation.util.nest.js"></script>
<script src="/js/foundation.util.touch.js"></script>
<script src="/js/foundation.dropdownMenu.js"></script>
</head>
<body>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#"li>Framework</a>
<ul class="menu">
<li>
<a href="/css/bootstrap/">Bootstrap</a>
</li>
<li>
<a href="/css/bulma/">Bulma</a>
</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
Right aligned text
<p class="text-right">
text-right
</p>
text-right
Center aligned text
<p class="text-center">
text-center
</p>
text-center
Justified text
<p class="text-justify">
text-justify
</p>
text-justify
Lead Paragraph
<p class="lead">
lead
</p>
lead
.grid-x
Zurb Foundation CSSフレームワークで水平方向のレイアウトを指定するには、grid-x クラスを指定したコンテナを用意して、その中に cell クラスを指定した要素を配置する。
コンテナ内の要素の横幅は、とくにサイズを指定しなければ、親要素の幅と同じになる。
<div class="grid-x">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
.small-1
Zurb Foundation は横幅を12分割したレイアウトを指定できる。
ウェブブラウザ画面の横幅に応じてスタイルを変えることができる。
Media Queries
| Class prefix | 画面の横幅 |
|---|
| small | すべて |
| medium | 640px 以上 |
| large | 1024px 以上 |
<div class="grid-x">
<div class="cell small-1">1</div>
<div class="cell small-1">2</div>
<div class="cell small-1">3</div>
<div class="cell small-1">4</div>
<div class="cell small-1">5</div>
<div class="cell small-1">6</div>
<div class="cell small-1">7</div>
<div class="cell small-1">8</div>
<div class="cell small-1">9</div>
<div class="cell small-1">10</div>
<div class="cell small-1">11</div>
<div class="cell small-1">12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.small-2
Foundationのグリッドレイアウトシステムにおいて横幅を12分の2にするには、small-2 クラスを指定する。
<div class="grid-x">
<div class="cell small-2">2/12</div>
<div class="cell small-2">2/12</div>
<div class="cell small-2">2/12</div>
<div class="cell small-2">2/12</div>
<div class="cell small-2">2/12</div>
<div class="cell small-2">2/12</div>
</div>
2/12
2/12
2/12
2/12
2/12
2/12
.small-3
Foundationのグリッドレイアウトシステムにおいて横幅を12分の3にするには、small-3 クラスを指定する。
<div class="grid-x">
<div class="cell small-3">3/12</div>
<div class="cell small-3">3/12</div>
<div class="cell small-3">3/12</div>
<div class="cell small-3">3/12</div>
</div>
.small-4
Foundationのグリッドレイアウトシステムにおいて横幅を12分の4にするには、small-4 クラスを指定する。
<div class="grid-x">
<div class="cell small-4">4/12</div>
<div class="cell small-4">4/12</div>
<div class="cell small-4">4/12</div>
</div>
.small-5
Foundationのグリッドレイアウトシステムにおいて横幅を12分の5にするには、small-5 クラスを指定する。
<div class="grid-x">
<div class="cell small-5">5/12</div>
<div class="cell small-7">7/12</div>
</div>
.small-6
Foundationのグリッドレイアウトシステムにおいて横幅を12分の6にするには、small-6 クラスを指定する。
<div class="grid-x">
<div class="cell small-6">6/12</div>
<div class="cell small-6">6/12</div>
</div>
.small-7
Foundationのグリッドレイアウトシステムにおいて横幅を12分の7にするには、small-7 クラスを指定する。
<div class="grid-x">
<div class="cell small-7">7/12</div>
<div class="cell small-5">5/12</div>
</div>
.small-8
Foundationのグリッドレイアウトシステムにおいて横幅を12分の8にするには、small-8 クラスを指定する。
<div class="grid-x">
<div class="cell small-8">8/12</div>
<div class="cell small-4">4/12</div>
</div>
.small-9
Foundationのグリッドレイアウトシステムにおいて横幅を12分の9にするには、small-9 クラスを指定する。
<div class="grid-x">
<div class="cell small-9">9/12</div>
<div class="cell small-3">3/12</div>
</div>
.small-10
Foundationのグリッドレイアウトシステムにおいて横幅を12分の10にするには、small-10 クラスを指定する。
<div class="grid-x">
<div class="cell small-10">10/12</div>
<div class="cell small-2">2/12</div>
</div>
.small-11
Foundationのグリッドレイアウトシステムにおいて横幅を12分の11にするには、small-11 クラスを指定する。
<div class="grid-x">
<div class="cell small-11">11/12</div>
<div class="cell small-1">1/12</div>
</div>
.small-12
Foundationのグリッドレイアウトシステムにおいて横幅を12分の12にするには、small-12 クラスを指定する。
<div class="grid-x">
<div class="cell small-12">12/12</div>
</div>
.medium-1
画面幅が640px以上のときに、要素の幅を1/12にするには、medium-1 クラスを指定する。
<div class="grid-x">
<div class="cell medium-1">1</div>
<div class="cell medium-11">2</div>
</div>
.medium-2
画面幅が640px以上のときに、要素の幅を2/12にするには、medium-2 クラスを指定する。
<div class="grid-x">
<div class="cell medium-2">1</div>
<div class="cell medium-10">2</div>
</div>
.medium-3
画面幅が640px以上のときに、要素の幅を3/12にするには、medium-3 クラスを指定する。
<div class="grid-x">
<div class="cell medium-3">1</div>
<div class="cell medium-9">2</div>
</div>
.medium-4
画面幅が640px以上のときに、要素の幅を4/12にするには、medium-4 クラスを指定する。
<div class="grid-x">
<div class="cell medium-4">1</div>
<div class="cell medium-8">2</div>
</div>
.medium-5
画面幅が640px以上のときに、要素の幅を5/12にするには、medium-5 クラスを指定する。
<div class="grid-x">
<div class="cell medium-5">1</div>
<div class="cell medium-7">2</div>
</div>
.medium-6
画面幅が640px以上のときに、要素の幅を6/12にするには、medium-6 クラスを指定する。
<div class="grid-x">
<div class="cell medium-6">1</div>
<div class="cell medium-6">2</div>
</div>
.medium-7
画面幅が640px以上のときに、要素の幅を7/12にするには、medium-7 クラスを指定する。
<div class="grid-x">
<div class="cell medium-7">1</div>
<div class="cell medium-5">2</div>
</div>
.medium-8
画面幅が640px以上のときに、要素の幅を8/12にするには、medium-8 クラスを指定する。
<div class="grid-x">
<div class="cell medium-8">1</div>
<div class="cell medium-4">2</div>
</div>
.medium-9
画面幅が640px以上のときに、要素の幅を9/12にするには、medium-9 クラスを指定する。
<div class="grid-x">
<div class="cell medium-9">1</div>
<div class="cell medium-3">2</div>
</div>
.medium-10
画面幅が640px以上のときに、要素の幅を10/12にするには、medium-10 クラスを指定する。
<div class="grid-x">
<div class="cell medium-10">1</div>
<div class="cell medium-2">2</div>
</div>
.medium-11
画面幅が640px以上のときに、要素の幅を11/12にするには、medium-11 クラスを指定する。
<div class="grid-x">
<div class="cell medium-11">1</div>
<div class="cell medium-1">2</div>
</div>
.medium-12
画面幅が640px以上のときに、要素の幅を12/12にするには、medium-12 クラスを指定する。
<div class="grid-x">
<div class="cell medium-12">1</div>
<div class="cell medium-12">2</div>
</div>
.large-1
画面幅が1024px以上のときに、要素の幅を1/12にするには、large-1 クラスを指定する。
<div class="grid-x">
<div class="cell large-1">1</div>
<div class="cell large-2">2</div>
</div>
.large-2
画面幅が1024px以上のときに、要素の幅を2/12にするには、large-2 クラスを指定する。
<div class="grid-x">
<div class="cell large-2">1</div>
<div class="cell large-10">2</div>
</div>
.large-3
画面幅が1024px以上のときに、要素の幅を3/12にするには、large-3 クラスを指定する。
<div class="grid-x">
<div class="cell large-3">1</div>
<div class="cell large-9">2</div>
</div>
.large-4
画面幅が1024px以上のときに、要素の幅を4/12にするには、large-4 クラスを指定する。
<div class="grid-x">
<div class="cell large-4">1</div>
<div class="cell large-8">2</div>
</div>
.large-5
画面幅が1024px以上のときに、要素の幅を5/12にするには、large-5 クラスを指定する。
<div class="grid-x">
<div class="cell large-5">1</div>
<div class="cell large-7">2</div>
</div>
.large-6
画面幅が1024px以上のときに、要素の幅を6/12にするには、large-6 クラスを指定する。
<div class="grid-x">
<div class="cell large-6">1</div>
<div class="cell large-6">2</div>
</div>
.large-7
画面幅が1024px以上のときに、要素の幅を7/12にするには、large-7 クラスを指定する。
<div class="grid-x">
<div class="cell large-7">1</div>
<div class="cell large-5">2</div>
</div>
.large-8
画面幅が1024px以上のときに、要素の幅を8/12にするには、large-8 クラスを指定する。
<div class="grid-x">
<div class="cell large-8">1</div>
<div class="cell large-4">2</div>
</div>
.large-9
画面幅が1024px以上のときに、要素の幅を9/12にするには、large-9 クラスを指定する。
<div class="grid-x">
<div class="cell large-9">1</div>
<div class="cell large-3">2</div>
</div>
.large-10
画面幅が1024px以上のときに、要素の幅を10/12にするには、large-10 クラスを指定する。
<div class="grid-x">
<div class="cell large-10">1</div>
<div class="cell large-2">2</div>
</div>
.large-11
画面幅が1024px以上のときに、要素の幅を11/12にするには、large-11 クラスを指定する。
<div class="grid-x">
<div class="cell large-11">1</div>
<div class="cell large-1">2</div>
</div>
.large-12
画面幅が1024px以上のときに、要素の幅を12/12にするには、large-12 クラスを指定する。
<div class="grid-x">
<div class="cell large-12">1</div>
<div class="cell large-12">2</div>
</div>
.auto
コンテナ内の要素のうち、ひとつ以外のすべての幅を指定すれば、残りひとつの要素については、auto クラスを指定することで、残りの幅となる。
<div class="grid-x">
<div class="cell small-3 medium-3 large-3">1</div>
<div class="cell small-3 medium-3 large-3">2</div>
<div class="cell auto">3</div>
</div>
<div class="grid-x">
<div class="cell auto">1</div>
<div class="cell small-3 medium-3 large-3">2</div>
<div class="cell small-3 medium-3 large-3">3</div>
</div>
.grid-container
Zurb Foundation CSSフレームワークは、コンテナを提供している。コンテナとは、コンテンツを適切な横幅を保ち、コンテンツの左右に適切な余白を持たせるレイアウトである。
<div class="grid-container">
<div class="grid-x grid-margin-x">
コンテナを使うと、画面サイズに応じて、コンテンツの最大幅が決められます。
パソコンなど画面が大きいデバイスでは、コンテンツの左右に大きな余白ができます。
スマホなど画面が小さいデバイスでは、画面の横幅いっぱいにコンテンツが表示されます。
</div>
</div>
コンテナを使うと、画面サイズに応じて、コンテンツの最大幅が決められます。
パソコンなど画面が大きいデバイスでは、コンテンツの左右に大きな余白ができます。
スマホなど画面が小さいデバイスでは、画面の横幅いっぱいにコンテンツが表示されます。
.fluid
コンテナの幅を可能な限り広げるには、fluid クラスを指定する。
<div class="grid-container fluid">
<div class="grid-x grid-margin-x">
コンテナを使うと、画面サイズに応じて、コンテンツの最大幅が決められます。
パソコンなど画面が大きいデバイスでは、コンテンツの左右に大きな余白ができます。
スマホなど画面が小さいデバイスでは、画面の横幅いっぱいにコンテンツが表示されます。
</div>
</div>
コンテナを使うと、画面サイズに応じて、コンテンツの最大幅が決められます。
パソコンなど画面が大きいデバイスでは、コンテンツの左右に大きな余白ができます。
スマホなど画面が小さいデバイスでは、画面の横幅いっぱいにコンテンツが表示されます。