テーマに沿った背景とテキストの色をコンテナに適用するための CSS のみの Tailwind CSS サーフェス。すべてのカラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
サーフェス コンポーネントは、階層化されたビジュアル階層とコンテンツ コンテナを作成する多用途のレイアウト プリミティブです。セマンティック HTML で構築されたサーフェスは、柔軟な深さとスタイルのオプションを提供します。 Frutjam サーフェス システムは、複数のサイズ、形状、レイヤーをサポートしており、代替カード、コンテンツ ブロック、ネストされたレイアウトに最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| surface | ベース | 底面コンテナ |
| surface-1 | スタイル | 標高レベル 1 (微妙) |
| surface-2 | スタイル | 標高レベル 2 |
| surface-outline | スタイル | 境界線が見える透明な塗りつぶし |
| surface-dashed | スタイル | 破線の境界線スタイル |
| surface-rounded | スタイル | 適度に丸みを帯びた角 |
| surface-xs | サイズ | 極小のパッド |
| surface-sm | サイズ | 小さなパッド |
| surface-md | サイズ | 中程度のパディング (デフォルト) |
| surface-lg | サイズ | 大きなパッド |
| surface-xl | サイズ | 特大のパッド |
基本的な使い方
Surface Container
Content displayed on a surface
1 2 3 4 | <div class="surface p-6"> <h2>Surface Container</h2> <p>Content displayed on a surface</p> </div> |
1 2 3 4 | <div className="surface p-6"> <h2>Surface Container</h2> <p>Content displayed on a surface</p> </div> |
表層
surface-1 と surface-2 を使用して、基本色と前景色を混合して深度階層を作成します。
1 2 3 | <div class="surface p-4">Base</div> <div class="surface surface-1 p-4">Surface 1 — subtle lift</div> <div class="surface surface-2 p-4">Surface 2 — more contrast</div> |
表面形状
1 2 | <div class="surface surface-md">Default (square)</div> <div class="surface surface-md surface-rounded">Rounded</div> |
境界線のスタイル
境界線で定義された透明なコンテナには、surface-outline または surface-dashed を使用します。背景が明示的に透明であるため、これらは色付きレイヤー内にネストされている場合に正しく機能します。
Surface 1 (colored parent)
1 2 3 4 5 6 7 | <div class="surface surface-1 surface-rounded surface-md"> <p class="mb-3 font-medium">Surface 1 (colored parent)</p> <div class="flex gap-3"> <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div> <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div> </div> </div> |
表面サイズ
サイズ ユーティリティは、--surface--padding を介して内部パディングを設定します。 Tailwind p-* ユーティリティと組み合わせないでください。これらのユーティリティは変数をオーバーライドし、サイズ クラスを無効にします。
1 2 3 4 5 | <div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div> <div class="surface surface-sm surface-rounded">Small (1rem)</div> <div class="surface surface-md surface-rounded">Medium (1.5rem)</div> <div class="surface surface-lg surface-rounded">Large (2rem)</div> <div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div> |
ネストされたサーフェス
Outer Surface
Inner Surface
1 2 3 4 5 6 | <div class="surface surface-1 p-6 rounded-lg"> <h3>Outer Surface</h3> <div class="surface surface-2 p-4 rounded mt-4"> <p>Inner Surface</p> </div> </div> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な 表面 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。