Archives Beauty Entertainment Fashion Food Gaming Oddities Tech
Alex Wilson @alxlynnhd

🌙

Moscow (MSK):

Date: Feb. 23, 2026

Time: 01:54:39

🔆

Tokyo (JST):

Date: Feb. 23, 2026

Time: 07:54:39

Latest:

Cosplay in Japan:..What is OpenClaw?..Why Promises Can'..We Tried Bachan's..

Bootstrapのような独自のフレームワークを作る方法

投稿: Dec. 03, 2025

本記事の日本語版は、いくつかの翻訳方法を組み合わせて作成しています。 できる限り英語版の内容やニュアンスに近づけるよう努めていますが、私たちはまだ日本語を学習中のため、不自然な表現や誤りが含まれている場合があります。ご理解とご支援に感謝いたします。

これはアーカイブされた投稿です。この投稿に含まれる情報は、新しい発見に基づいて更新されることはありません。

独自のフロントエンドフレームワークを構築するのは、Bootstrap、Tailwind、Foundation といった既存ツールがある中で、やりすぎに思えるかもしれない。しかし、デザインシステム、パフォーマンス、アーキテクチャを完全にコントロールしたい場合、あるいはエンジニアリングスキルを磨きたい場合、自作フレームワークは十分価値がある。ここでは、軽量で保守しやすい CSS フレームワークをゼロから構築するための、直接的かつ実践的な手順を示す。

1. 目的とスコープを定義する

フレームワークは、無秩序なユーティリティ群であってはならない。何を解決するフレームワークにするのか明確に決める。

一般的なスコープ例:

  • ベーススタイルの正規化
  • グリッドシステム
  • タイポグラフィスケール
  • ユーティリティクラス
  • コンポーネント（ボタン、カード、アラート）
  • レスポンシブブレークポイント
  • テーマ／トークン（色、余白など）

最初から Bootstrap の全機能を複製しようとすると、複雑さに飲み込まれる。まずは小さく始めること。

2. デザイントークンシステムを作る

デザイントークンは、フレームワークの一貫性を保ち、メンテナンス性を高める。

tokens.css または variables.scss のようなファイルを作成:

:root {
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-success: #198754;

  --font-base: 16px;
  --font-family: "Inter", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
}

これらのトークンがフレームワーク全体の基盤となる。

3. ベースレイヤーを構築する

コンポーネントを作る前に、予測可能なデフォルトが必要。

典型的な内容:

  • CSS リセット（例: reboot.css）
  • body のデフォルト設定
  • タイポグラフィ設定
  • リンク、リスト、画像
body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: 1.5;
  margin: 0;
  color: #212529;
}

これにより、すべてがクリーンで一貫した基礎から始まる。

4. グリッドシステムを作る

Bootstrap が人気なのは、主にそのグリッドシステムのおかげだ。再発明する必要はないが、シンプルにすればよい。

CSS Grid を使った例:

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

またはクラシックな Flexbox ベース:

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.col {
  padding: 0 8px;
  flex: 1;
}

必要になるまでは最小限に抑える。

5. ユーティリティクラスを実装する

ユーティリティクラスは、重いコンポーネントを使わず柔軟性を提供できる。

例:

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.text-center { text-align: center; }
.d-flex { display: flex; }

ユーティリティはデザイントークンと整合させる。

6. コアコンポーネントを構築する

まず必要最低限から始める:

  • ボタン
  • カード
  • フォーム
  • アラート

ボタンの例:

.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-secondary {
  background: var(--color-secondary);
  color: #fff;
}

コンポーネントは以下を満たすべき:

  • トークンを使用する
  • レスポンシブ対応
  • アクセシビリティ確保（ARIA、フォーカス状態）

7. レスポンシブ対応

ブレークポイントを最初に定義する:

$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;

一貫して適用する:

@media (min-width: 768px) {
  .grid-cols-2-md {
    grid-template-columns: repeat(2, 1fr);
  }
}

予測可能なレスポンシブ API は不可欠。

8. コードベースをモジュール化する

プロジェクト構成例:

/framework
  /scss
    _tokens.scss
    _base.scss
    _grid.scss
    _utilities.scss
    _buttons.scss
    _forms.scss
  framework.scss
  framework.css (compiled)

モジュール構造は長期的な保守を容易にする。

9. ドキュメントを追加する

ドキュメントのないフレームワークは使い物にならない。

最低限記載すべき内容:

  • インストール方法
  • トークン
  • ユーティリティ
  • コンポーネント
  • 使用例

最初は Markdown だけでも十分。

10. ビルドを自動化する

ビルドツールを使う:

  • Sass コンパイラ
  • PostCSS（autoprefixer）
  • ミニファイ

npm scripts の例:

{
  "scripts": {
    "build": "sass framework.scss framework.css --style=compressed"
  }
}

自動化により、フレームワークを常に本番環境向けに保てる。

11. 公開して改善を続ける

安定したら以下が可能:

  • npm に公開
  • GitHub リポジトリ作成
  • バージョン管理
  • 実際の使用状況に基づいて改善

フレームワークは進化する。製品として育て続けるべきだ。

© 2025 MochiiFeed