TOOLS / KOTOCA UI KIT

Top CSS ベース UI Kit

このページは、top の style.css を元にした再利用可能な UI クラス群を確認するためのサンプルです。

コンポーネントを見る 使い方を見る

Typography

.ui-catch

TOOLS / KOTOCA

.ui-lead

補助説明用のテキスト。読みやすい行幅と色で表示されます。

Components

Badges

Default Success Danger

Alerts

保存に成功しました。
入力内容を確認してください。
送信に失敗しました。

Forms

Input / Select / Textarea

Check

Layout

.ui-card

カード背景・余白・境界線のセットです。

.ui-grid

240px 以上で自動折り返しのレスポンシブグリッドです。

Data display

Tabs + Table

All Open Closed
ToolStatusUpdated
UI KitActive2026-04-02
Web ToolsActive2026-03-20
Median CameraBeta2026-03-15

Usage

以下を任意のHTMLで読み込んで利用できます。

<link rel="stylesheet" href="/ui-kit/ui-kit.css">