Zurb Foundation

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

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

使い方

Zurb Foundation
ItemDescription
URL https://foundation.zurb.com/
License MIT
Twitter @ZURBfoundation
Zurb Foundation v6.6.3
Modules
foundation.min.css
foundation.min.js

Zurb Foundationを使うには、CSSとJavaScriptをインポートします。

Zurb FoundationのJavaScriptはjQueryを使用するので、jQueryもインポートします。

<!-- 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>

CDN (Contents Delivery Network) を利用することもできます。

<!-- 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>
<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>

Code

<code>code</code>

code

複数行にわたるコードの場合、code-blockクラスを指定します。

Zurb Foundationには、メニューを作成するためのクラスが用意されています。

Zurb Foundationのメニュークラス
クラス 説明
menu メニューの基本クラス（水平方向・左寄せ）
align-right メニュー項目を右寄せにする修飾クラス
align-center メニュー項目を中央揃えにする修飾クラス
expanded メニュー項目を均等に並べる修飾クラス
vertical メニュー項目を垂直方向に並べる修飾クラス

Zurb Foundationでメニューを作成するには、ulタグにmenuクラスを指定します。

<ul class="menu">
  <li><a href="#MENU">Menu</a></li>
  <li><a href="#">Button</a></li>
</ul>

.align-right

<ul class="menu align-right">

.align-center

<ul class="menu align-center">

.expanded

<ul class="menu expanded">

.vertical

Zurb Foundationで垂直方向に並ぶメニューを作成するには、menuクラスに加えて、vertical修飾クラスも指定します。

<ul class="vertical menu">

align-rightクラスも指定することで、垂直メニューを右寄せにできます。

<ul class="vertical menu align-right">

align-centerクラスも指定することで、垂直メニューを中央揃えにできます。

<ul class="vertical menu align-center">

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>

ol

.no-bullet

<ol class="no-bullet">
  1. List item
  2. List item

.list-decimal

<ol class="list-decimal">
  1. List item
  2. List item

pre

<pre>pre</pre>
pre

ul

.no-bullet

<ul class="no-bullet">

.list-disc

<ul class="list-disc">