PitaCSSを使う前に

PitaCSSのターゲット層や合う合わない人、メリット、デメリットです。

✅ PitaCSSが合う人

📚 ドキュメント作成者

技術文書・マニュアルを書く人
Wikiを運営する人

🎯 シンプル志向の開発者

複雑なデザインシステムにうんざりしている
HTMLを書くだけで見やすくシンプルなドキュメントサイトが欲しい
カスタマイズは最小限で済ませたい

🚀 素早くプロトタイプを作りたい人

<!-- これだけで見やすいドキュメントページができる -->
<h1>見出し</h1>
<p>説明文</p>
<ul>
  <li>リスト</li>
</ul>

🌏 日本語コンテンツ重視

日本語の読みやすさを重視する
縦書き・行間にこだわりがある

❌ PitaCSSが合わない人

🎨 デザイン重視の開発者

/* PitaCSSの限界例 */
.custom-card {
  /* 独自のカードコンポーネントを作りたい! */
  /* → PitaCSSにはハイレベルClassがほぼない */
}

🏢 大規模アプリケーション開発

複雑なレイアウトが必要
多数のUIコンポーネントが必要
デザインシステムの統一が重要

🎯 メリット

1. 学習コストはほとんどない

HTMLの知識だけで見やすいドキュメントサイトができる

<h1>タイトル</h1>
<p>本文</p>
<details>
  <summary>詳細</summary>
  <p>内容</p>
</details>

2. メンテナンス性

CSSフレームワークの更新に振り回されない
HTMLの構造がシンプル
var.cssでテーマ変更が簡単

3. 日本語最適化

/* 日本語に配慮された設定 */
line-height: 2.2; /* 読みやすい行間 */
--font-family: "Noto Sans JP", "Yu Gothic Medium" "etc...";

4. 軽量・高速

依存関係なし
必要最小限のCSS/JS
CDN不要

⚠️ デメリット

1. デザインの制約

/* できること */
h1 { /* ブランドカラーのアクセント */ }
.alert.success { /* 基本的なアラート */ }

/* できないこと */
.complex-dashboard { /* 複雑なダッシュボード */ }
.animated-hero { /* 派手なヒーローセクション */ }

2. シンプルなドキュメント用なため、アプリなどは作れない

モーダルなし
ドロップダウンなし
タブなし
カルーセルなし

3. カスタマイズの限界

/* 変更できるもの (var.css 変数) */
:root {
  --brand-primary: #your-color; /* ブランドカラー */
  --text-base: 20px; /* フォントサイズ */
}

/* 変更しにくいもの */
h1 {
  /* レイアウト構造は固定 */
  border-left: 4px solid var(--brand-secondary);
}

4. エコシステムの小ささ(自虐)

コミュニティが小さい
プラグインや拡張が少ない
サンプル・テンプレートが限定的

🎯 結論: PitaCSSを選ぶべき人

「見やすいドキュメントを素早く作りたいが、学習やデザインにそこまで時間をかけたくない人」

具体例：

技術文書を書くエンジニア
シンプルなwikiを作りたい
プロトタイプのドキュメンテーションを作る

逆に避けるべき人：

複雑なダッシュボードが必要
独自のデザインシステムを構築したい

目次

PitaCSSを使う前に