Foundationを用いたWeb制作実践ガイド

Foundationフレームワークとは

Foundation（正式名称: ZURB Foundation）は、レスポンシブなウェブデザインを構築するための高度なフロントエンドフレームワークです。モバイルファーストのアプローチを採用し、さまざまなデバイスで美しく表示されるウェブサイト、アプリ、Eメールを簡単に設計できます。

主な特徴:

レスポンシブデザイン対応
モバイルファーストのアプローチ
柔軟なグリッドシステム
多数のUIコンポーネント
Sassによるカスタマイズのしやすさ
セマンティックなHTML構造

Foundation公式サイト

Foundationのインストール方法

Foundationを始めるには、いくつかの方法があります：

1. CSSのダウンロード（最も簡単な方法）

Foundation公式サイトからCSSファイルをダウンロード
プロジェクトフォルダにファイルを配置
HTMLファイルでリンク

<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>

2. CDNを使用

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

3. パッケージマネージャーを使用（推奨）

# npmの場合
npm install foundation-sites

# yarnの場合
yarn add foundation-sites

Foundationの基本的な使い方

グリッドシステムの利用

Foundationのグリッドシステムは12カラム構成で、レスポンシブなレイアウトを簡単に作成できます。

基本的なグリッドの例

<div class="row">
  <div class="columns small-12 medium-6 large-4">
    <!-- コンテンツ -->
  </div>
  <div class="columns small-12 medium-6 large-4">
    <!-- コンテンツ -->
  </div>
  <div class="columns small-12 large-4">
    <!-- コンテンツ -->
  </div>
</div>

グリッドシステムでは以下のブレークポイントが使用されます：

small- : 小さい画面（モバイル）
medium- : 中間の画面（タブレット）
large- : 大きい画面（デスクトップ）

グリッドのネスト

<div class="row">
  <div class="columns small-12 large-8">
    <div class="row">
      <div class="columns small-6">ネストされたコンテンツ</div>
      <div class="columns small-6">ネストされたコンテンツ</div>
    </div>
  </div>
  <div class="columns small-12 large-4">
    <!-- コンテンツ -->
  </div>
</div>

センタリング

<div class="row">
  <div class="columns small-6 small-centered">
    中央に配置されたコンテンツ
  </div>
</div>

オフセット

<div class="row">
  <div class="columns small-6 large-offset-2">
    オフセットされたコンテンツ
  </div>
</div>

UIコンポーネントの使用

Foundationには多数のUIコンポーネントが用意されています：

ボタン

<a href="#" class="button">デフォルトボタン</a>
<a href="#" class="button primary">プライマリーボタン</a>
<a href="#" class="button secondary">セカンダリーボタン</a>
<a href="#" class="button success">成功ボタン</a>
<a href="#" class="button alert">警告ボタン</a>

ナビゲーションバー

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">サイト名</li>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </div>
</div>

Foundationを使った実際の開発プロセス

1. プロジェクトのセットアップ

まず、Foundationプロジェクトを設定します：

# CLIツールのインストール（初回のみ）
npm install -g foundation-cli

# プロジェクトの作成
foundation new my-project

または、スターターテンプレートを使用することもできます：

Foundation Templatesからテンプレートをダウンロード
プロジェクトフォルダに展開
必要に応じてカスタマイズ

2. Sassでカスタマイズ

Foundationは高度なカスタマイズをSassで行えます。

// カスタム変数の設定
$primary-color: #3498db;
$secondary-color: #2ecc71;

// Foundationのインポート
@import 'foundation';

// 必要なコンポーネントのみインポート
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// 他のコンポーネント...

// カスタムスタイル
.custom-header {
  background-color: $primary-color;
  color: white;
  padding: 2rem 0;
}

3. JavaScriptの初期化

Foundationのコンポーネントを初期化するには、以下のコードをHTMLの末尾に追加します：

<script>
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

実践例：シンプルなウェブサイトの構築

HTML基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundationサンプルサイト</title>
  <link rel="stylesheet" href="css/foundation.min.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <!-- ヘッダー -->
  <header class="top-bar">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">ブランド名</li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">ポートフォリオ</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </div>
  </header>

  <!-- ヒーローセクション -->
  <section class="hero">
    <div class="row">
      <div class="columns small-12 text-center">
        <h1>Foundationで作るモダンウェブサイト</h1>
        <p>レスポンシブデザインの力で、あらゆるデバイスに最適化されたウェブサイトを構築しましょう</p>
        <a href="#" class="button large primary">詳細を見る</a>
      </div>
    </div>
  </section>

  <!-- 特徴セクション -->
  <section class="features padding-vertical-2">
    <div class="row">
      <div class="columns small-12 medium-4">
        <div class="card">
          <div class="card-divider">
            <h4>レスポンシブデザイン</h4>
          </div>
          <div class="card-section">
            <p>すべてのデバイスで美しく表示されるウェブサイトを構築できます。</p>
          </div>
        </div>
      </div>
      <div class="columns small-12 medium-4">
        <div class="card">
          <div class="card-divider">
            <h4>使いやすいコンポーネント</h4>
          </div>
          <div class="card-section">
            <p>数多くのUIコンポーネントを使って、効率的に開発できます。</p>
          </div>
        </div>
      </div>
      <div class="columns small-12 medium-4">
        <div class="card">
          <div class="card-divider">
            <h4>カスタマイズ自在</h4>
          </div>
          <div class="card-section">
            <p>Sassを使って、ブランドに合わせたデザインにカスタマイズできます。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- フッター -->
  <footer class="footer">
    <div class="row">
      <div class="columns small-12 text-center">
        <p>&copy; 2025 サンプルサイト</p>
      </div>
    </div>
  </footer>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

カスタムCSS（app.css）

/* カスタムスタイル */
.hero {
  background-color: #f0f0f0;
  padding: 4rem 0;
  margin-bottom: 2rem;
}

.features {
  margin: 2rem 0;
}

.padding-vertical-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer {
  background-color: #333;
  color: white;
  padding: 2rem 0;
  margin-top: 2rem;
}

.card {
  border: 1px solid #e6e6e6;
  margin-bottom: 1rem;
}

.card-divider {
  background-color: #f0f0f0;
  padding: 1rem;
}

.card-section {
  padding: 1rem;
}

FoundationとBootstrapの違い

Foundationは、Bootstrapと並んで人気のあるフロントエンドフレームワークですが、いくつかの重要な違いがあります：

特徴	Foundation	Bootstrap
カスタマイズ性	より高い柔軟性、Sassベース	デフォルトデザインが統一的
学習曲線	やや急（より高度）	比較的緩やか（初心者向け）
デフォルトデザイン	シンプルで最小限	よりスタイリッシュ
グリッドシステム	REMベース（より柔軟）	ピクセルベース
コミュニティ	小～中規模	非常に大きい
ユースケース	独自性の高いプロジェクト向け	迅速な開発向け

Foundationは特に以下のようなケースに適しています：

高度にカスタマイズされたデザインが必要な場合
クリエイティブな自由度を重視する場合
エンタープライズレベルのアプリケーション

Foundationのベストプラクティス

モバイルファーストで設計する：小さい画面サイズから始めて、徐々に大きなサイズに対応させる
必要なコンポーネントだけを使う：パフォーマンスのために、不要なコンポーネントは除外する
Sassを活用する：変数やミックスインを使ってDRYなコードを書く
セマンティックなマークアップを心がける：アクセシビリティとSEOのために重要
テンプレートを活用する：ゼロから始める代わりに、既存のテンプレートをカスタマイズする

まとめ

Foundationは、モダンで柔軟性の高いウェブサイトを構築するための強力なフレームワークです。モバイルファーストのアプローチ、レスポンシブグリッドシステム、豊富なUIコンポーネントにより、あらゆるデバイスに最適化されたウェブサイトを効率的に開発できます。

高度なカスタマイズが可能なため、ブランドの個性を反映したユニークなデザインを実現できる点が大きな特長です。

初心者にはやや学習曲線が急かもしれませんが、その柔軟性と機能性は学ぶ価値があります。公式ドキュメントやチュートリアルを活用して、段階的に技術を習得していくことをお勧めします。

参考リソース

この実践ガイドを参考に、Foundationを使った素晴らしいウェブプロジェクトを開発してください！

Foundationを用いたWeb制作実践ガイド

投稿者: ocha 投稿日: 2025年4月11日2025年4月11日

Foundationフレームワークとは

Foundationのインストール方法

1. CSSのダウンロード（最も簡単な方法）

2. CDNを使用

3. パッケージマネージャーを使用（推奨）

Foundationの基本的な使い方

グリッドシステムの利用

基本的なグリッドの例

グリッドのネスト

センタリング

オフセット

UIコンポーネントの使用

ボタン

ナビゲーションバー

Foundationを使った実際の開発プロセス

1. プロジェクトのセットアップ

2. Sassでカスタマイズ

3. JavaScriptの初期化

実践例：シンプルなウェブサイトの構築

HTML基本構造

カスタムCSS（app.css）

FoundationとBootstrapの違い

Foundationのベストプラクティス

まとめ

参考リソース

Milligramを用いたWeb制作実践ガイド

機械学習の種類

Foundationを用いたWeb制作実践ガイド

投稿者: ocha 投稿日: 2025年4月11日2025年4月11日

Foundationフレームワークとは

Foundationのインストール方法

1. CSSのダウンロード（最も簡単な方法）

2. CDNを使用

3. パッケージマネージャーを使用（推奨）

Foundationの基本的な使い方

グリッドシステムの利用

基本的なグリッドの例

グリッドのネスト

センタリング

オフセット

UIコンポーネントの使用

ボタン

ナビゲーションバー

Foundationを使った実際の開発プロセス

1. プロジェクトのセットアップ

2. Sassでカスタマイズ

3. JavaScriptの初期化

実践例：シンプルなウェブサイトの構築

HTML基本構造

カスタムCSS（app.css）

FoundationとBootstrapの違い

Foundationのベストプラクティス

まとめ

参考リソース

関連投稿

Milligramを用いたWeb制作実践ガイド

機械学習の種類