Zurb Foundation
Zurb Foundation CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Zurb Foundationを使って作っています。
ただし、見やすさを考慮してHTMLコードに関しては、シンタックスハイライター hilights.js も使用しています。
Zurb Foundation CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Zurb Foundationを使って作っています。
ただし、見やすさを考慮してHTMLコードに関しては、シンタックスハイライター hilights.js も使用しています。
| 公式サイト | https://foundation.zurb.com/ |
| 開発者 | ZURB |
| ライセンス | MIT |
| グリッド | 12列 |
| GitHub stars | 28.9k |
| @ZURBfoundation |
| モジュール | サイズ |
|---|---|
| foundation.min.css | 129KB |
| foundation.min.js | 177KB |
| foundation.core.js | 44.3KB |
<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><button type="button" class="button">Button</button><a href="#" class="button">Link</a><button type="button" class="secondary button">Button</button>
<a href="#" class="secondary button">Link</a><button type="button" class="success button">Button</button>
<a href="#" class="success button">Link</a><div class="small secondary button-group">
<a class="button">1</a>
<a class="button">2</a>
</div><div class="button-group hollow">
<a class="button">1</a>
<a class="button">2</a>
</div><div class="button-group clear">
<a class="button">1</a>
<a class="button">2</a>
</div><div class="button-group no-gaps">
<a class="button">1</a>
<a class="button">2</a>
</div>ボタングループにstacked-for-smallクラスを指定すると、画面幅が小さいときにボタンが縦（垂直方向）並ぶ。
<div class="stacked-for-small button-group">
<a class="button">1</a>
<a class="button">2</a>
</div><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><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><table class="hover">| クラス | 説明 |
|---|---|
| hover | マウスカーソルを乗せた行の色を変える |
| unstriped | 1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll | 水平方向にスクロールできるテーブル |
<table class="unstriped">| クラス | 説明 |
|---|---|
| hover | マウスカーソルを乗せた行の色を変える |
| unstriped | 1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll | 水平方向にスクロールできるテーブル |
<table class="stack">| クラス | 説明 |
|---|---|
| hover | マウスカーソルを乗せた行の色を変える |
| unstriped | 1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll | 水平方向にスクロールできるテーブル |
<table class="table-scroll">| クラス | 説明 |
|---|---|
| hover | マウスカーソルを乗せた行の色を変える |
| unstriped | 1行おきに行の色を変えない |
| stack | スタック可能 |
| table-scroll | 水平方向にスクロールできるテーブル |
<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><span class="badge">1</span>1
<span class="secondary badge">2</span>2
<span class="success badge">3</span>3
<span class="alert badge">4</span>4
<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 type="button" class="alert button">Button</button>
<a href="#" class="alert button">Link</a><button type="button" class="warning button">Button</button>
<a href="#" class="warning button">Link</a><button type="button" class="tiny button">Button</button>
<a href="#" class="tiny button">Link</a><button type="button" class="small button">Button</button>
<a href="#" class="small button">Link</a><button type="button" class="large button">Button</button>
<a href="#" class="large button">Link</a><button type="button" class="expanded button">Button</button>
<a href="#" class="expanded button">Link</a><ul class="no-bullet">
<li>first</li>
<li>second</li>
</ul><ul class="list-disc">
<li>first</li>
<li>second</li>
</ul><ol class="list-decimal">
<li>first</li>
<li>second</li>
</ol><ul class="menu align-right">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><ul class="menu align-center">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><ul class="menu expanded">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><ul class="vertical menu">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><ul class="vertical menu align-right">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><ul class="vertical menu align-center">
<li>
<a href="#MENU">Menu</a>
</li>
<li>
<a href="#">Button</a>
</li>
</ul><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><p class="text-right">
text-right
</p>text-right
<p class="text-center">
text-center
</p>text-center
<p class="text-justify">
text-justify
</p>text-justify
<p class="lead">
lead
</p>lead
<div class="grid-x">
<div class="cell">1</div>
<div class="cell">2</div>
</div>Zurb Foundation は横幅を12分割したレイアウトを指定できる。
ウェブブラウザ画面の横幅に応じてスタイルを変えることができる。
| 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>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>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>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>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>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>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>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>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>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>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>Foundationのグリッドレイアウトシステムにおいて横幅を12分の12にするには、small-12 クラスを指定する。
<div class="grid-x">
<div class="cell small-12">12/12</div>
</div><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><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><div class="grid-x">
<div class="cell small-6 medium-4 large-3">1</div>
<div class="cell auto">2</div>
</div><div class="grid-container"">
<div class="grid-x grid-margin-x">1</div>
</div>