「CSSフレームワークは重い」を過去にした、Pure CSSという3.5KBの選択肢

はじめに

「Bootstrapを入れたら、使わないコンポーネントのCSSまでごっそり付いてきた」——そんな経験はないでしょうか。管理画面の一部だけ、ランディングページの1セクションだけを整えたいのに、フレームワーク丸ごと読み込むのはやりすぎに感じることがあります。

Pure CSSは、この悩みに真正面から答えるライブラリです。グリッド・ボタン・フォーム・テーブル・メニューといった最小限のモジュールだけを、ミニファイ・gzip圧縮後で合計3.5KBという軽さで提供します。全部読み込んでも軽いですし、必要なモジュールだけを選んで読み込むこともできます。

とはいえ、読むより触った方が早いと思います。CSSを1行も書かずにレスポンシブなレイアウトが組めるので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Pure CSSとは

Pure CSSは、Yahoo!が開発した「あらゆるWebプロジェクトで使える、小さくレスポンシブなCSSモジュール集」です。Normalize.cssをベースに、必要最小限のスタイルだけを提供し、上から自分のスタイルを重ねやすい設計になっています。

主な特徴

極めて軽量 - 全モジュール込みでミニファイ・gzip後3.5KB。BootstrapやBulmaと比べても圧倒的に小さい
モジュール単位で使える - Base・Grids・Forms・Buttons・Tables・Menusをそれぞれ個別に読み込める
オーバーライドしやすい - 独自デザインを強制せず、素のHTML要素に近い見た目を保つため、自社デザインを上に被せやすい
モバイルファーストのレスポンシブグリッド - pure-u-*クラスにブレークポイントの接尾辞を付けるだけでレイアウトが切り替わる

インストール

npmでインストールする場合は以下の通りです。

npm install purecss

CDNから直接読み込むこともできます。ビルド環境を用意せず、とりあえず試したい場合はこちらが手軽です。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css">

Pure CSSのサンプルを動かす

Pure CSSの核となるのが、pure-g（グリッドコンテナ）とpure-u-*（グリッド子要素）によるレイアウトです。下のサンプルはセレクトボックスでカラム数を切り替えられるようになっています。選ぶとpure-u-1-2・pure-u-1-3・pure-u-1-4のクラスがJavaScriptで付け替わり、グリッドの分割数がその場で変わります。

まずは骨格となる書き方です。pure-gの中にpure-u-1-3（3分割の1つ分）を並べるだけでカラムが組めます。

<div class="pure-g">
  <div class="pure-u-1-3">
    <p>カラム1</p>
  </div>
  <div class="pure-u-1-3">
    <p>カラム2</p>
  </div>
  <div class="pure-u-1-3">
    <p>カラム3</p>
  </div>
</div>

実際に動かせるものが下です。セレクトボックスでカラム数を変更してみてください。

pure-u-1-2にすると2分割、pure-u-1-4にすると4分割になり、はみ出した要素は自動で折り返されます。クラス名の分子-分母という数字がそのまま幅の割合になっている点が、Pure CSSのグリッドの分かりやすさです。

基本的な使い方

Pure CSSはCSSファイルを読み込むだけで使い始められます。JavaScriptは一切不要で、クラス名を要素に付けるだけでスタイルが適用されます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css">

<button class="pure-button">通常のボタン</button>
<button class="pure-button pure-button-primary">プライマリボタン</button>

<div class="pure-g">
  <div class="pure-u-1-1">
    <p>全幅の要素</p>
  </div>
</div>

pure-buttonにクラスを重ねるだけでボタンの見た目が変わり、pure-gとpure-u-*を組み合わせるだけでレイアウトが組める——この「クラスを付けるだけ」というシンプルさが、Pure CSSの基本の使い方です。

実践的なユースケース

Pure CSSのフォームレイアウト

問い合わせフォームや設定画面では、ラベルと入力欄をインライン表示するか、縦に積むかで印象が大きく変わります。Pure CSSはpure-formにpure-form-stackedやpure-form-alignedを追加するだけで、この2パターンを切り替えられます。

<form class="pure-form pure-form-stacked">
  <label for="name">名前</label>
  <input id="name" type="text" placeholder="山田太郎">

  <label for="email">メールアドレス</label>
  <input id="email" type="email" placeholder="you@example.com">

  <button type="submit" class="pure-button pure-button-primary">送信</button>
</form>

実際に動かせるものが下です。セレクトボックスでpure-form単体（インライン）・pure-form-stacked（縦積み）・pure-form-aligned（ラベル横並び）を切り替え、フォームの見た目が変わる様子を確認できます。

pure-form-alignedを選ぶと、labelとinputが横並びになり管理画面のような見た目に変わります。フォームの用途に応じてクラス1つを差し替えるだけで印象を切り替えられるのが、Pure CSSのフォームコンポーネントの強みです。

Pure CSSのメニューとボタンの状態管理

ナビゲーションメニューでは「今どの項目が選択されているか」を視覚的に示す必要があります。Pure CSSのpure-menuはpure-menu-selectedクラスを付けた項目だけをハイライトでき、pure-buttonはpure-button-disabledで非活性状態を表現できます。

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">ホーム</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">設定</a>
    </li>
  </ul>
</div>

実際に動かせるものが下です。メニュー項目をクリックするとpure-menu-selectedが付け替わり、ボタンをクリックするとpure-button-disabledのオン・オフが切り替わります。

クリックのたびにclassListを書き換えているだけで、見た目の切り替えはすべてpure-menu-selectedやpure-button-disabledというクラスの有無に委ねられています。JavaScriptは「状態をクラス名に反映する」役目に徹し、デザインの計算は一切していない点がPure CSSらしいところです。

Pure CSSのテーブル装飾

データ量が多い一覧表示では、行の区切りが分かりにくいと読みづらくなります。Pure CSSはpure-tableにpure-table-striped（縞模様）やpure-table-bordered（罫線）、pure-table-horizontal（横線のみ）を組み合わせるだけで、テーブルの見やすさを調整できます。

<table class="pure-table pure-table-striped">
  <thead>
    <tr><th>商品名</th><th>在庫</th></tr>
  </thead>
  <tbody>
    <tr><td>ノートPC</td><td>12</td></tr>
    <tr><td>マウス</td><td>48</td></tr>
  </tbody>
</table>

実際に動かせるものが下です。チェックボックスでpure-table-stripedとpure-table-borderedをオン・オフし、テーブルの見た目が即座に変わる様子を確認できます。

pure-table-stripedとpure-table-borderedは同時に付けても競合せず、見た目が重なって適用されます。用途に応じてクラスを足し引きするだけで、テーブルの装飾を段階的に調整できるのがPure CSSの設計思想です。

まとめ

Pure CSSは、グリッド・ボタン・フォーム・テーブル・メニューという最小限のモジュールを、3.5KBという圧倒的な軽さで提供するCSSフレームワークです。pure-gとpure-u-*によるレスポンシブグリッド、pure-form-*によるフォームレイアウトの切り替え、pure-menu-selectedやpure-button-disabledによるクラスベースの状態表現など、どれも「クラス名を付け替えるだけ」で完結するシンプルさが魅力でした。

デザインを強く主張しないぶん、自社のデザインシステムを上に重ねやすく、既存プロジェクトの一部だけを整えたいケースにも向いています。まずはpure-min.cssをCDNから読み込んで、既存のページの1コンポーネントにpure-buttonやpure-gを試してみてはいかがでしょうか。