さて、前回までは、Foundation 6を使ったサイト制作の下準備と、実際にスタイルを記述すると
ころまで説明してきました。

今回は、実際のサイト制作に必要な諸々の機能が、Foundationにはどのように備わっているのかを確認していきます。

コンポーネントとは？

Foundationでは、Foundationが用意している機能や見た目のことをComponents（コンポーネント）と呼称しています。

コンポーネントは、ドキュメントで詳しく解説されています（ただし英語）ので、そちらを参照してください。

とはいっても、Foundation独自の用語で命名されていたりするので、ここでは日本のサイト制作においてわかりやすい日本語に置き換えて説明します。

Foundation コンポーネント一覧

記述順は、ドキュメントの並びに基づきます。

GENERAL

基本的なサイト制作に必要な機能です

Grid

グリッドレイアウト。段組の表現。レスポンシブに対応し、以下の機能に対応しています。

ネスト（入れ子）
左右の入れ替え（Source Ordering）
パディング幅の調整、非表示
分割数の調整（デフォルトは12。任意で設定可能）
ブロックグリッド（均等幅に並べる。5や7といった素数で割ることも可能）

もっと詳しく

Flex Grid

CSSのflexboxプロパティを用いた段組機能。

Forms

フォームのスタイル

Visibility Classes

要素の表示・非表示を制御するHTMLクラス。レスポンシブで「スマホの時だけ消したい」みたいな時に使います。

Float Classes

フロートクラス。float: leftみたいなのが、あらかじめ定義されています。clearrixもあるよ！

TYPOGRAPHY

文字に関する機能、設定箇所

Base Styles

見出しの文字サイズやリストの玉（ブレット）、引用（blockquote）などの設定箇所。Foundationでは、スマホサイズの画面では、見出しの大きさをやや小さめにして出力してくれます。

Helper Classes

文字や文章段落を制御する便利なHTMLクラスの紹介。PC表示の時は中央揃えにしたいけど、スマホの時は左揃えにしたい、みたいな時も、ここにあるクラスで対応可能。

CONTROLS

サイト上のボタン関係について

Button

いわゆるボタン。クラス名によって、色を変更したりできます。

Button Group

ボタンが横並びになっているやつ。Even-widthは、CMSで動的にボタンの数が変更になる場合とかに便利。Stackingは、スマホ表示の時に縦並びにしてくれます。

Close Button

いわゆる×ボタン。押したら消えるアレです。消え方のアニメーションも調整できます。

Slider JS

スライダーというと、カルーセルのことかと思う人もいるかもしれませんが、Foundationのスライダーは、フェーダースイッチのことです。

文字サイズの調整とか、地図の拡大率を調整したりするのに使えます。一般的なWebサイトでは、あまり使わないかもしれませんね。

Switch

いわゆるスイッチです。input[type="checkbox"]です。

私は、不動産系サイトで「空室表示のみ絞り込む」のボタンを作るときに実装しました。

NAVIGATION

ナビゲーション系

Dropdown Menu JS

ドロップダウンメニュー。ネストもOK

Drilldown Menu JS

ドリルダルンメニュー。「目的別に探す」みたいなナビを作りたい時に効果を発揮。

Accordion Menu JS

アコーディオンメニュー

Top Bar

ヘッダーにありそうなグロナビを作るのに便利。

Responsive Navigation

画面幅に応じて、メニューのカラム落ちを制御するためのHTMLクラス。

Magellan JS

ページ内リンクとかに使うやつ。

Pagination

いわゆるところのページネーション。

Breadcrumbs

いわゆるところのパンくずナビ。個人的には、パンくず作る時にこれを使うことはあまりないかも。

CONTAINERS

ページ内のコンテンツを効率よく見せるためのパーツ群。

Accordion JS

いわゆるアコーディオン。Bootstrapで言うところのCollapse。

Callout

リード文とかに使うアレ。個人的には、あまり使わない。

Dropdown JS

ドロップダウン。ナビメニューじゃないけど、ドロップダウンさせたい注釈があったりとか、そういう時に。

Media Object

ブログ一覧記事とか、フォーラムのコメント欄とかに使えるやつ。Gridよりも手軽にマークアップできる。

Off-canvas JS

オフキャンバス。画面の外からグワっと入り込んでくるアレ。個人的には、他のオフキャンバスメニューを実装することが多いです。

Reveal JS

いわゆるモーダル。モーダル後の画面も結構いろいろカスタマイズできます。

Table

テーブルについて。レスポンシブ時の挙動を細かく設定できます。thとtdをカラム落ちさせたりとか、横スクロールさせたりとか。

Tabs JS

タブ切り替え。

MEDIA

画像や動画、ちょっとした装飾などを魅せる系

Badge

バッジ。通知アイコンとかに。どっちかというとWebアプリに必要なやつ。

Flex Video

レスポンシブ制作の時にiframeの埋め込みビデオは悩みの種。でも、このflex videoなら、画面幅にあわせて動画をフィットしてくれます。

Label

ブログ記事一覧のカテゴリー表記や著者名など、メタデータ的なやつの表示に最適。

Orbit JS CAROUSEL

いわゆるカルーセル。スライドショー。Foundation 5では非推奨でしたが、6になって帰ってきてくれました。が、個人的にはslickを使うことが多いです。

Progress Bar

いわゆるプログレスバー。サイト制作にはあまり用いないかもですね。

Thumbnail

サムネイル表示用に。うっすら細い白とグレーの枠をつけてくれます。あまり使わないです。（カンプがある時は特に）

Tooltip JS

マウスホバーしたら吹き出しが出てきて注釈が表示されるアレ。タッチ端末の時は、タップで表示してくれます。

PLUGINS

プラグインってなってますが、特に何かを追加する必要はありません。

Abide FORM VALIDATION

フォームバリデーション。結構いろいろできます。

Equalizer COLUMN ALIGNMENT

高さ揃え。個人的に、Foundationが最強のCSS/JSフレームワークだと思っている機能のひとつ。

Foundation 5までは、行ごとの高さ揃えに未対応だったので惜しくも使わずjquery.matchHeight派だったのですが、6から行ごとの高さ揃えに対応したので、諸手を挙げてこちらに移行しました。簡単、便利、最強！！！

Interchange RESPONSIVE CONTENT

画面幅によって、コンテンツ（文章や画像）の出しわけをするJS。CSSレベルでdisplay:noneをすると、HTMLマークアップ上よくなかったり、画像の場合は無駄なリクエストが発生します。

Interchangeは、JSなので、画面幅に応じたコンテンツだけを後読みしてくれるので、そういう無駄がなくなります。

レスポンシブイメージでpicturefillを使ったことがある人はイメージしやすいかもしれません。が、Interchangeは画像だけでなく、外部のhtmlファイルを読み込むことにも対応してます。

これも個人的にFoundationが強いところだな、と思ってます。

Toggler CSS HELPER

いわゆるトグル。表示非表示の際に、アニメーションが設定できます。

Sticky HEADER/SIDEBAR

スクロールしてもついてくるやつ。ヘッダーのグロナビとか、サイドバーの広告の部分とか。ちょっと前はJSゴリゴリ書いて実装してましたが、Foundation 6では、かなりシンプルな記述で実装できます。ページの途中にあるコンテンツが途中からついてくる、とかもカンタン。幸せ。

Motion UI

CSSアニメーション集。

Panini

HTMLプリプロセッサ。解説はまた今度。個人的にはjade大好き派なので、今後これを使うことはまずないでしょうね…

Zurb Foundation 6 コンポーネントの名前と機能一覧