さて、前回までは、Foundation 6を使ったサイト制作の下準備と、実際にスタイルを記述すると
ころまで説明してきました。
- Zurb Foundation 導入前の予備知識
- Zurb Foundation 6 SassバージョンのCLIインストールとサイト制作までの準備
- Zurb Foundation 6 Sassバージョンを使用する上で、理解すべき2つのscssファイル
今回は、実際のサイト制作に必要な諸々の機能が、Foundationにはどのように備わっているのかを確認していきます。
--
コンポーネントとは?
Foundationでは、Foundationが用意している機能や見た目のことをComponents(コンポーネント)と呼称しています。
コンポーネントは、ドキュメントで詳しく解説されています(ただし英語)ので、そちらを参照してください。
とはいっても、Foundation独自の用語で命名されていたりするので、ここでは日本のサイト制作においてわかりやすい日本語に置き換えて説明します。
Foundation コンポーネント一覧
記述順は、ドキュメントの並びに基づきます。
GENERAL
基本的なサイト制作に必要な機能です
Grid
グリッドレイアウト。段組の表現。レスポンシブに対応し、以下の機能に対応しています。
- ネスト(入れ子)
- 左右の入れ替え(Source Ordering)
- パディング幅の調整、非表示
- 分割数の調整(デフォルトは12。任意で設定可能)
- ブロックグリッド(均等幅に並べる。5や7といった素数で割ることも可能)
もっと詳しく
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)を理解し実用する(基本編)
- Zurb Foundation 6のGrid(レスポンシブ対応段組機能)について、小ネタとTips編
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)で左右のカラムを入れ替えてみる
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)でカラムを中央揃えにしてみる
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)でカラムに枠線をつけたい
- Zurb Foundation 6で、Grid(レスポンシブ対応段組機能)を使って、アイテムリストを作る(Block Grid)
- Zurb Foundation 6のGrid(レスポンシブ対応段組機能)を使って、サイト背景に色がついてるアイテムリストを作りたい
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
ナビゲーション系
Menu
いわゆるメニュー系
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大好き派なので、今後これを使うことはまずないでしょうね…