はじめに
「ドキュメントを作ったが、Bootstrapは大げさすぎるし、Tailwind CSSはクラス指定が大変。シンプルなクラスレスCSSだと、結局ページのメインのレイアウトやJSは自分で組まないといけない、それを解決するちょうどいいぐらいの機能のCSSフレームワークはないかな?」
みたいなニーズが私は存在すると思うんですよね。(突然)
なので、そんな感じのニーズを解決できるようなちょうどいいぐらいの機能のCSSフレームワークを作りました。
こんにちは！約2週間前に「PitaCSS」というドキュメント型サイトに特化したOSSのCSSフレームワークをα版としてリリースした、Eita Kobayashiと申します。
最近高校生になりました
今回はこのCSSフレームワークを作ってみた感想やPitaCSSの概要について解説していきたいと思います。
作った理由
私がPitaCSSを作った理由は、自分にニーズがあったのと、「何か一つ成果物を作ってみたいな..」と思ったからですね。
- ドキュメント型サイトに特化型のCSSフレームワークを作ってみたかった(成果物を作ってみたかった)
- 単純に自分のほしい機能を搭載しているCSSフレームワークがなかった
PitaCSSの概要
PitaCSSは、一言でいうと「ドキュメントサイトに最適化された、クラスレス思想がベースのCSSフレームワーク」です。
こんな感じの見やすいシンプルなドキュメント型サイトが作れます。
定義として、この記事の「クラスレス思想」というものはCSSフレームワークのクラスを使わない思想を指します。
一番の特徴は、HTMLのタグに直接スタイルを適用するため、CSSクラスをほとんど意識しなくても見やすい見た目にできます。
また、「段階的採用思想」という思想をベースに作られているため、柔軟性が高く、コードが簡潔になります。
また、軽量(CSS)です。(PitaCSS.css)
| 容量(minify) | gzip容量 |
|---|---|
| 30KB未満 | gzip: 6KB未満 |
特に、シンプル志向の開発者などにかなりフィットすると思います。
中核となる考え、段階的採用思想
すべてHTMLタグ(クラスレス)だけで記述するのは柔軟性に欠けます。そこでPitaCSSは、あくまでクラスレス思想をベースにしつつ、 「クラスレス」→「ユーリティクラス」→「コンポーネントクラス」
の順にクラスを段階的に採用することで、柔軟性がありながらも、コードをシンプルに保てるという思想です！
簡単に言うとトッピングのようなものですね。
必要だったら追加し、いらないなら追加しないのようなものです。
例
「段階的採用思想」は以下のような場面に対応したりします。
- 本文エリア → クラスレス思想で対応: 大量の文章にいちいちクラスを付けず、素のHTMLのままで可読性を担保
- 微調整 → ユーティリティクラスで対応: 「ここに少しだけ余白を付けたいな」といった例外的な要望に対応
- レイアウト等のより高レベルなスタイルが必要になる場面
→ コンポーネントクラスで対応: containerといったクラスで、サイトの骨格を構築。
<!-- ヘッダー -->
<header>
<div class="logo-container hide-max1250">
<!-- ロゴやテキストなど -->
</div>
<div class="logo-container-responsive hide-min1250">
<!-- ロゴやテキストなど -->
</div>
</header>
<!-- メインコンテナ -->
<div class="container">
<button class="nav-toggle">☰</button>
<!-- オーバーレイ（モバイル用） -->
<div class="nav-overlay"></div>
<!-- サイドナビゲーション -->
<aside>
<div class="aside-header">
<h2>ナビゲーション</h2>
</div>
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
</ul>
</aside>
<!-- メインコンテンツエリア -->
<div class="content">
<main class="pT40">
<!-- ドキュメントの内容 -->
<section>
<h1>ページタイトル</h1>
<p>ページの内容をここに記述します。</p>
</section>
<!-- ユーリティクラスの段階的採用の例 -->
<div class="p20 mB20">
<p class="text-xs mB10">text-xs: とても小さいテキスト(13px固定)</p>
<p class="text-sm mB10">text-sm: 小さいテキスト(15px固定)</p>
</div>
</main>
</div>
</div>
<footer>
<div class="content-center">
<p>ライセンス: License</p>
</div>
<small>コピーライト表記</small>
</footer>
ドキュメント型サイトに特化している点
ドキュメントサイトの骨組みをすぐに構築
PitaCSSは単なるクラスレスCSSとは違い、ドキュメントサイトでよく使われるヘッダー、サイドバー、メインコンテンツといったレイアウト構造を簡単なクラス指定で実現できます。これにより、HTMLの骨組みを作るだけでスタートできます。(逆を言えば特化しすぎているので普通のサイトは構築しづらい)
学習コストが低い
ドキュメント型のサイトを作るということに特化しているので、余計なスタイルがなく、学習コストが低い
ドキュメント型サイトに特化したJavaScript付属
CSSのみではなく、ドキュメント型サイトにあったら嬉しい依存関係のないJavaScriptが付属(SPA(CSR)対応)
- ダークモード切り替え(自動モードあり)
- ページのローディングの進捗を伝える、上部に表示されるプログレスバー
- ナビゲーション系(ハンバーガーメニューやドロップダウンなど)
- タブ: ナビゲーション用のタブ付きコンテンツを作成するためのコンポーネント
柔軟性が高く設定されている
PitaCSSにはScoped用があったり、ベース(bodyタグや*のスタイル)と本体のスタイルが分離されているため、逆にTailwind CSSなどが好みであればユーリティクラスだけTailwind CSSで補い、その他はPitaCSSという運用もできるでしょう(やったことはない)
また、値の多くは変数で制御しているため、変数の値を変更するだけでカスタムできます。
ターゲット
「見やすいドキュメントを素早く作りたいが、学習やデザインにそこまで時間をかけたくない人」に向いています
導入方法
npmパッケージとして配布されているので導入できます。
npm i pita-css
pnpm add pita-css
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.css">
</body>タグの直前に配置することを推奨します。
<script src="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.js"></script>
最後に
PitaCSSはかなりドキュメントに力を入れてるので、少しでも気になったらドキュメントだけでも見てね。