レスポンシブ対応を後回しにしない、Foundationのグリッド設計

はじめに

「スマホ・タブレット・PCそれぞれで崩れないレイアウトを、毎回ゼロから組むのは正直つらい」—— レスポンシブ対応をしていると、一度はそう感じたことがあるのではないでしょうか。ブレークポイントの数値を揃え、グリッドの計算を合わせ、モーダルやアコーディオンのようなUIパーツにもアクセシビリティを配慮する。これを毎回手作業でやるのは時間がかかりますし、ミスも起きやすくなります。

Foundationは、この課題に長年向き合ってきたCSSフレームワークです。グリッドシステム、タイポグラフィ、ボタンやカードといったコンポーネントに加えて、モーダル（Reveal）やアコーディオンのようなJS連携の UIパーツまでを一式で提供し、レスポンシブ対応を「後から気にする作業」から「最初から組み込まれた前提」に変えてくれます。

まずは動かして雰囲気をつかみたい方は、こちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Foundationとは

Foundationは、ZURB社（現在はFoundationコミュニティ）が開発しているオープンソースのフロントエンドフレームワークです。公式サイトでは「the most advanced responsive front-end framework in the world」と謳われており、Bootstrapと並んでレスポンシブ対応CSSフレームワークの代表格として知られています。 CSSのグリッド・タイポグラフィ・ユーティリティクラスに加え、jQueryと連携するJSプラグイン（モーダル、アコーディオン、ドロップダウン、オフキャンバスメニューなど）を備えているのが特徴です。

主な特徴

柔軟なグリッドシステム - floatベースの標準グリッドに加え、Flexboxベースの「XY Grid」を選べる
モバイルファースト設計 - デフォルトの記述順がそのままスマホ向けになり、大きい画面ほど後から上書きする
セマンティックなSassミックスイン - クラスを増やさずグリッドやコンポーネントの挙動をCSS側で再現できる
アクセシビリティへの配慮 - Reveal（モーダル）やAccordionなどのJSプラグインがARIA属性を自動で付与する
必要な部分だけ読み込める設計 - Sassのモジュール単位で読み込むコンポーネントを絞り、CSSサイズを抑えられる

インストール

npmでプロジェクトに導入する場合は以下のコマンドを実行します。

npm install foundation-sites

yarnを使う場合は次のとおりです。

yarn add foundation-sites

手早く試したいだけであれば、CDN経由でCSSとJSを読み込むだけでも使えます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/js/foundation.min.js"></script>

Foundationのサンプルを動かす

下のサンプルは、Foundationのgrid-x / cellによるグリッドと、button・calloutコンポーネントを組み合わせたものです。ボタンをクリックすると、calloutクラスを持つ要素の色クラスがJavaScriptで切り替わる仕組みになっています。

Foundationのグリッドは、親要素にgrid-x、子要素にcellを付けるだけで成立します。small-12 medium-6のようにブレークポイント名（small / medium / large）とカラム数を組み合わせたクラスを末尾に足すことで、画面幅ごとに異なる幅を指定できます。

<div class="grid-x grid-margin-x">
  <div class="small-12 medium-6 cell">
    <button class="button primary">Primary</button>
  </div>
  <div class="small-12 medium-6 cell">
    <div class="callout success">
      <p>成功したときのメッセージ表示に使うcalloutです。</p>
    </div>
  </div>
</div>

実際に動かせるものが下です。ボタンを押すとcalloutの色クラス（success / alert / warning）がその場で切り替わります。

grid-xとcellの組み合わせだけでレイアウトが成立し、色や状態の変化はcalloutのクラス名を書き換えるだけで表現できることが分かります。ブラウザの表示幅を狭めると、medium-6の指定によって 2カラムが自動的に縦積みへ変わる点も確認してみてください。

基本的な使い方

Foundationのボタンはbuttonクラスにprimaryやalertといった色バリエーション、hollowや roundedといった形状バリエーションを重ねがけするだけで見た目が完成します。タイポグラフィも h1〜h6やリスト、テーブルにデフォルトで整ったスタイルが当たるため、追加のクラス指定なしで読みやすい見た目になります。

<button class="button primary">Primary</button>
<button class="button success hollow">Success (hollow)</button>
<button class="button alert rounded">Alert (rounded)</button>
<button class="button large secondary">Large</button>

<ul>
  <li>Foundationはデフォルトのリストにも整ったスタイルを与える</li>
  <li>クラスを付けなくても最低限の見た目が整う</li>
</ul>

グリッドと組み合わせれば、この時点で最低限のレスポンシブなページ骨格が作れます。次の節では、より実践的なコンポーネントの使い方をパターンごとに見ていきます。

実践的なユースケース

FoundationのXY Grid（Flexboxグリッド）でカードレイアウトを組む

標準グリッドがfloatベースなのに対し、XY Gridはdisplay: flexをベースにした新しいグリッドシステムです。 grid-xの子要素の高さを揃えたい場合や、縦方向（Y軸）の配置も制御したい場合はこちらが向いています。 autoクラスを付けると、指定したcellの残り幅を均等に分け合う挙動になります。

<div class="grid-x grid-margin-x">
  <div class="auto cell"><div class="callout">カード1</div></div>
  <div class="auto cell"><div class="callout">カード2</div></div>
  <div class="auto cell"><div class="callout">カード3</div></div>
</div>

autoクラスをsmall-4のような固定幅クラスに置き換えると、残り幅を分け合う挙動から固定カラム幅の指定に変わります。テキストの長さが違うカードでも高さが揃っているのは、XY GridがFlexboxの align-items: stretchを活かしているためです。

FoundationのReveal（モーダル）をJSプラグインとして初期化する

FoundationのJSプラグインはjQueryに依存しており、data-toggle属性でトリガーとダイアログを紐付けたうえで$(document).foundation()を呼び出すことで初期化されます。モーダルの開閉、フォーカスの制御、 aria-hiddenの切り替えまでプラグイン側が面倒を見てくれます。

<button class="button" data-open="my-modal">モーダルを開く</button>

<div class="reveal" id="my-modal" data-reveal>
  <h3>Revealモーダル</h3>
  <p>これはFoundationのReveal.jsプラグインで開閉しています。</p>
  <button class="close-button" data-close aria-label="閉じる">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<script>$(document).foundation();</script>

このサンプルのdata-open="demo-modal"とid="demo-modal"を書き換えれば、1ページの中に複数のモーダルを用意して使い分けることもできます。$(document).foundation()を呼ぶだけで、ページ内のすべてのFoundationプラグイン（Reveal・Dropdown・Accordionなど）がまとめて初期化される点も覚えておくと便利です。

FoundationのAccordionでFAQ欄を作る

data-accordionを付けた要素の中にaccordion-itemを並べるだけで、開閉式のFAQやドキュメント一覧が作れます。Accordionプラグインも初期化時にキーボード操作用の属性を自動付与するため、矢印キーでの項目移動にも対応します。

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">質問1</a>
    <div class="accordion-content" data-tab-content>回答1</div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">質問2</a>
    <div class="accordion-content" data-tab-content>回答2</div>
  </li>
</ul>

data-allow-all-closed="true"を外すと、常にどれか1項目が開いた状態になる挙動に変わります。 FAQのように「すべて閉じてもよい」場合と、目次のように「必ず1項目は見せておきたい」場合とで、この属性の有無を使い分けると使い勝手が変わります。

まとめ

Foundationは、グリッドシステムからモーダル・アコーディオンといったインタラクティブなコンポーネントまでを一貫した設計で提供するCSSフレームワークです。標準のgrid-xグリッドに加えて Flexboxベースの「XY Grid」を選べる柔軟さ、そして$(document).foundation()一発でJSプラグインがまとめて初期化される手軽さは、レスポンシブ対応のコストを大きく下げてくれます。今回紹介したグリッド・Reveal・Accordionのサンプルを書き換えながら、自分のプロジェクトに必要なコンポーネントを探してみてください。