Zurb Foundationの使い方 | CSSフレームワーク入門

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

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

使い方

Zurb Foundation
Item	Description
URL	https://foundation.zurb.com/
License	MIT
Twitter	@ZURBfoundation

Foundation v6.6.3
Modules	Size
foundation.min.css	129KB
foundation.min.js	177KB
foundation.core.js	44.3KB

テンプレート

<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>
  </body>
</html>

CDN

<head>
  <!-- Compressed 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>
  <!-- Compressed JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"
    integrity="sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM="
    crossorigin="anonymous"></script>

Badge

<span class="badge">1</span>

Secondary badge

<span class="secondary badge">2</span>

Success badge

<span class="success badge">3</span>

Alert badge

<span class="alert badge">4</span>

Warning badge

<span class="warning badge">5</span>

Breadcrumb

<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

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

Link

Secondary button

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

Link

Success button

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

Link

Alert button

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

Link

Warning button

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

Link

Tiny button

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

Link

Small button

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

Link

Large button

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

Link

Expanded button

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

Link

No-bullet list

<ul class="no-bullet">
  <li>first</li>
  <li>second</li>
</ul>

first
second

Disc list

<ul class="list-disc">
  <li>first</li>
  <li>second</li>
</ul>

first
second

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>

Hover table

<table class="hover">

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

Unstriped table

<table class="unstriped">

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

Stackable table

<table class="stack">

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

Scrollable table

<table class="table-scroll">

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

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