Pure.cssとは
Pure.cssは、Yahoo社が開発した軽量なCSSフレームワークです。わずか3.5KB（ミニファイ・gzip圧縮時）というサイズながら、以下の機能を提供します：
- レスポンシブグリッドシステム
- フォームスタイリング
- ボタン
- テーブル
- メニュー
Pure.cssの特徴は以下の通りです：
- 超軽量 – 3.5KBという小さなサイズで高速に読み込み可能
- モジュラー式 – 必要なモジュールだけを使用可能
- レスポンシブ – モバイルファーストの設計
- カスタマイズ性 – 最小限のスタイルで簡単にカスタマイズ可能
Pure.cssを導入する
Pure.cssは、以下のCDNリンクを使用して簡単に導入できます：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css">
レスポンシブグリッドを使用する場合は、以下も追加します：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
グリッドシステム
Pure.cssのグリッドシステムは非常にシンプルで使いやすいです。pure-gクラスで行を作成し、pure-u-*クラスで列を定義します。
基本的なグリッド例
1/3
このカラムは大きい画面では1/3の幅を占め、小さい画面では全幅になります。
1/3
Pure.cssのグリッドは、画面サイズに応じて自動的に調整されます。
1/3
レスポンシブデザインを簡単に実現できるのがPure.cssの魅力です。
複雑なレイアウト例
メインコンテンツ
このカラムは大きい画面では2/3の幅を占め、中サイズの画面では1/2、小さい画面では全幅になります。
Pure.cssのグリッドシステムは、5分の1単位と24分の1単位の両方をサポートしているため、様々なレイアウトが可能です。
サイドバー
このカラムは大きい画面では1/3の幅を占め、中サイズの画面では1/2、小さい画面では全幅になります。
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-2-3">
メインコンテンツ
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
サイドバー
</div>
</div>
フォーム
Pure.cssは、美しくスタイリングされたフォームを簡単に作成できます。
基本的なフォーム
スタック型フォーム
整列型フォーム
レスポンシブデザイン
Pure.cssは、モバイルファーストのレスポンシブデザインを簡単に実現できます。以下は、異なる画面サイズで自動的に調整されるレイアウトの例です。
レスポンシブな特徴紹介セクション
軽量
Pure.cssは、わずか3.5KBというサイズで、ページ読み込み時間を短縮します。
レスポンシブ
モバイルファーストの設計で、すべてのデバイスで美しく表示されます。
モジュラー
必要なモジュールだけを使用して、ページサイズを最小限に抑えられます。
カスタマイズ
最小限のスタイルで、簡単にカスタマイズしてオリジナルのデザインを作成できます。
レスポンシブな料金表
スタンダード
¥1,980 月額
- 5GB ストレージ
- 1 ドメイン
- 10 プロジェクト
- 基本サポート
プロフェッショナル
¥3,980 月額
- 15GB ストレージ
- 3 ドメイン
- 無制限 プロジェクト
- 優先サポート
エンタープライズ
¥9,800 月額
- 50GB ストレージ
- 無制限 ドメイン
- 無制限 プロジェクト
- 24時間サポート
実装のポイント
レスポンシブグリッドの使い方
Pure.cssのレスポンシブグリッドを使用するには、以下のブレークポイントを考慮します：
pure-u-*– すべての画面サイズpure-u-sm-*– 568px以上pure-u-md-*– 768px以上pure-u-lg-*– 1024px以上pure-u-xl-*– 1280px以上
これらのクラスを組み合わせることで、異なる画面サイズで最適なレイアウトを実現できます。
レスポンシブな画像
画像をレスポンシブにするには、pure-imgクラスを使用します：
<img class="pure-img" src="image.jpg" alt="レスポンシブ画像">
このクラスは、画像の最大幅を親要素に合わせ、アスペクト比を維持します。
異なる端末での表示をテストするには、ブラウザのサイズを変更してみてください。このページのレイアウトが自動的に調整されることが確認できます。
まとめ
Pure.cssは、軽量でシンプルなCSSフレームワークながら、以下のような優れた機能を備えています：
- わずか3.5KBのファイルサイズで高速な読み込み
- シンプルで使いやすいグリッドシステム
- きれいなフォームスタイリング
- 様々なボタンスタイル
- モバイルファーストのレスポンシブデザイン
Pure.cssは、特に以下のケースに最適です：
- 小規模なプロジェクト
- 高速に読み込む必要があるウェブサイト
- 最小限のCSS構造が望ましい場合
- 独自のデザインを適用したい場合
Pure.cssは学習曲線が緩やかで、必要最小限のCSS構造を提供するため、初心者から上級者まで幅広く利用できます。