Zurb Foundation

Zurb Foundation CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Zurb Foundationを使って作っています。

ただし、見やすさを考慮してHTMLコードに関しては、シンタックスハイライター hilights.js も使用しています。

CSSフレームワーク

Zurb Foundation
公式サイト https://foundation.zurb.com/
開発者 ZURB
ライセンス MIT
グリッド 12列
GitHub stars 28.9k
Twitter @ZURBfoundation
Foundation v6.6.3
モジュールサイズ
foundation.min.css 129KB
foundation.min.js 177KB
foundation.core.js 44.3KB

使い方とサンプル

テンプレート

Zurb Foundation を使うときのテンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="/css/foundation.min.css">
    <!-- jQuery -->
    <script src="/js/jquery-3.4.1.min.js"></script>
    <!-- Compressed JavaScript -->
    <script src="/js/foundation.min.js"></script>
  </head>
  <body>
    <!-- content -->
  </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.6.3/dist/css/foundation.min.css"
      integrity="sha256-Q2fXBbKhtsyhYrSLa7hXCNV+FdhbQhyrjks8Kic0u/U="
      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.6.3/dist/js/foundation.min.js"
      integrity="sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM="
      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

<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> Foundation
    </li>
  </ul>
</nav>

.button

Zurb Foundation でボタンを作成するには、button クラスを指定する。

<button type="button" class="button">Button</button>
<a class="button" href="#">Link</a>
<input class="button" type="submit">

Link

.secondary

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

.success

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

.alert

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

.warning

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

.tiny

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

.small

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

.large

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

.expanded

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

.button-group

<div class="small secondary button-group">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.hollow

<div class="button-group hollow">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.clear

<div class="button-group clear">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.no-gaps

<div class="button-group no-gaps">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.stacked-for-small

ボタングループにstacked-for-smallクラスを指定すると、画面幅が小さいときにボタンが縦（垂直方向）並ぶ。

<div class="stacked-for-small button-group">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.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>
1 Show menu

.align-center

<div class="button-group align-center">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.align-right

<div class="button-group align-right">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.align-spaced

<div class="button-group align-spaced">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.align-justify

<div class="button-group align-justify">
  <a class="button">1</a>
  <a class="button">2</a>
</div>
1 2

.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>
avatar

tsuka

元システムエンジニアのファイナンシャルプランナーです。

.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>
プロフィール
avatar

tsuka

元システムエンジニアのファイナンシャルプランナーです。

.input-group-field

<div class="input-group">
  <input class="input-group-field" type="text">
</div>

.input-group-label

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
</div>
$

.input-group-button

<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">
Zurb Foundationのtableクラス
クラス説明
hover マウスカーソルを乗せた行の色を変える
unstriped 1行おきに行の色を変えない
stackスタック可能
table-scroll 水平方向にスクロールできるテーブル

.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-scroll

<table class="table-scroll">
Zurb Foundationのtableクラス
クラス説明
hover マウスカーソルを乗せた行の色を変える
unstriped 1行おきに行の色を変えない
stackスタック可能
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>
  1. first
  2. 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>

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

<div class="grid-x">
  <div class="cell">1</div>
  <div class="cell">2</div>
</div>
1
2

.small-1

Zurb Foundation は横幅を12分割したレイアウトを指定できる。

ウェブブラウザ画面の横幅に応じてスタイルを変えることができる。

Media Queries
Class prefix画面の横幅
smallすべて
medium640px 以上
large1024px 以上
 
<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>
3/12
3/12
3/12
3/12

.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>
4/12
4/12
4/12

.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>
5/12
7/12

.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>
6/12
6/12

.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>
7/12
5/12

.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>
8/12
4/12

.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>
9/12
3/12

.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>
10/12
2/12

.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>
11/12
1/12

.small-12

Foundationのグリッドレイアウトシステムにおいて横幅を12分の12にするには、small-12 クラスを指定する。

<div class="grid-x">
  <div class="cell small-12">12/12</div>
</div>
12/12

.medium-{n}

<div class="grid-x">
  <div class="cell small-6 medium-4">1</div>
  <div class="cell small-6 medium-4">2</div>
  <div class="cell small-6 medium-4">3</div>
</div>
1
2
3

.large-{n}

<div class="grid-x">
  <div class="cell small-6 medium-4 large-3">1</div>
  <div class="cell small-6 medium-4 large-3">2</div>
  <div class="cell small-6 medium-4 large-3">3</div>
  <div class="cell small-6 medium-4 large-3">4</div>
</div>
1
2
3
4

.auto

<div class="grid-x">
  <div class="cell small-6 medium-4 large-3">1</div>
  <div class="cell auto">2</div>
</div>
1
2

.grid-container

<div class="grid-container"">
  <div class="grid-x grid-margin-x">1</div>
</div>
1