Pico.css を最大限活用するためのヒント

2026年2月5日

Pico.css とは

Pico.css はクラスレスな CSS フレームワークです。HTML の意味的な構造（セマンティクス）に基づいてスタイルを適用するため、クラス名を一切書かずに整ったデザインを実現できます。

クラスレスとは？ 通常の CSS フレームワーク（Bootstrap や Tailwind）では要素にクラス名を付けてスタイルを制御しますが、Pico.css は <article>、<nav>、<table> などの HTML 要素自体にスタイルを適用します。

<form>
  <label>
    メールアドレス
    <input type="email" placeholder="you@example.com" />
  </label>
  <button type="submit">送信</button>
</form>

これだけで美しいフォームが完成します。

機能	Pico.css	Tailwind	Bootstrap
ファイルサイズ	10KB	300KB+	160KB+
クラス名	不要	必須	必須
カスタマイズ	CSS 変数	設定ファイル	Sass 変数
学習コスト	低	中	中

Pico.css はダークモードを自動的にサポートしています。OS の設定に応じてテーマが切り替わります。

CSS カスタム変数を上書きするだけでテーマを調整できます:

:root {
  --pico-font-family: system-ui, sans-serif;
  --pico-border-radius: 0.5rem;
}

Pico.css の変数は全て --pico- プレフィックスが付いているため、他のスタイルと衝突しません。