ゼロから作られた、外部依存のない完全なデザインシステム
Cerne は自己完結型の CSS + JS フレームワークです —— CDN なし、jQuery なし、 本番環境での必須ビルドもありません。同一の トークンとコンポーネントのシステムで複数のドメインに対応できるよう設計されています：管理ダッシュボード、 学習環境、管理システム、部屋予約、ブログなど。
現代の Web 開発時代のための強力なツール
Cerne は現在バージョン 0.1 —— ゼロから構築された完全なデザインシステムであり、 目的はシンプルです。誰にでも速く、堅牢で、無料な基盤を提供し、 システムを紙の上からインターネット上へと運ぶこと。CDN への依存もライセンスも、 ベンダーロックインもペイウォールもありません。オープンソースで、誰もが利用できる、永遠に。
v0.1 ですでに揃っているもの
- 40 以上の本番対応コンポーネント —— アプリシェル、データテーブル、カレンダー、チャート、チャット、動画プレーヤー、モーダル、高度なフォームなど。
- そのままコピーできる43 個の完全なサンプル：ダッシュボード、EC、ストリーミング、ウェブメール、ソーシャルネットワーク、ニュースポータル、LLM チャット、スマート TV……
- 外部依存ゼロ —— jQuery なし、CDN なし、本番環境での必須ビルドなし。HTML をダブルクリックするだけで開けます。
- ネイティブダークモード、
prefers-reduced-motion/prefers-color-schemeを自動的に尊重。
- 論理プロパティによる本物の RTL 対応 —— ミラーリングのハックではありません。
- すべてのインタラクティブなコンポーネントでデフォルトのWCAG 2.1 AA アクセシビリティ。
- 本物の国際化対応 —— UI だけでなく、168 個のサンプルページが CJK、アラビア語、ヒンディー語、ロシア語に翻訳済み。
- 本物のモダン CSS —— コンテナクエリ、カスケードレイヤー、
color-mix()、clamp()、data-densityによる密度設定。
v0.1 なのは制約ではなく選択です。コアはすでに堅牢で、上記の 43 個のサンプルで実際に使われていますが、プロジェクトは公開の場で進化し続けています —— 新しい バージョンごとに、既存のものを壊すことなく、より多くの基礎機能、言語、コンポーネントが追加されていきます。
インストール
dist/ にあるコンパイル済みファイルをプロジェクトにコピーし、直接参照するだけです。フレームワークを利用するのにビルドは不要です。
<link rel="stylesheet" href="dist/css/cerne.css">
<!-- body の末尾に、window.Cerne を公開するためのクラシックスクリプト（type="module" にしないこと） -->
<script src="dist/js/cerne.js"></script>
JS が読み込まれる前に誤ったテーマがちらつくのを防ぐには、<head> の
CSS より前にこのコードを追加してください：
<script>
var t = localStorage.getItem('cerne-theme');
if (t) document.documentElement.setAttribute('data-theme', t);
</script>カラー
11 段階のプリミティブパレット + セマンティックレイヤー（--cerne-color-primary、
-hover、-active、-subtle……）で、ライト/ダーク
テーマ間で自動的に値が切り替わります。以下の値は
コンパイル済みの CSS からリアルタイムに読み込まれています —— このドキュメントと決してズレることはありません。
スペーシング
4px 単位のスケールで、--cerne-space-* と p-*、m-*、gap-* ユーティリティとして公開されています。
タイポグラフィ
約 1.25 のモジュラースケール、デフォルトフォントはシステムフォントスタック（ネットワークリクエストゼロ）。独自のセルフホストフォントを使うには --cerne-font-sans を上書きしてください。
角丸と影
ライト/ダークで異なるレシピを持つエレベーション —— 暗い影が暗い背景の上で消えることはありません。
Radius
影
グリッド
CSS Grid 上に構築されたクラシックな .row/.col-* API に加え、レスポンシブな接頭辞 md:、lg: 付きの .grid-cols-* / .col-span-* ユーティリティ。
<div class="row">
<div class="col-12 col-md-4">...</div>
<div class="col-12 col-md-4">...</div>
<div class="col-12 col-md-4">...</div>
</div>アプリシェル
ダッシュボードのための中心的な基礎コンポーネント：grid-template-areas によるサイドバー + トップバー + メイン、lg 未満でオフキャンバスに折りたたまれます。このページ自体も .app-shell を使用しています。
<div class="app-shell" id="app-shell">
<div class="app-shell__backdrop"></div>
<aside class="app-shell__sidebar">...</aside>
<header class="app-shell__topbar">...</header>
<main class="app-shell__main">...</main>
</div>ボタン
各セマンティックカラーにソリッド、アウトライン、ゴーストの各バリアント、さらにサイズとローディング状態。
<button class="btn btn-primary">プライマリ</button>
<button class="btn btn-outline-primary">アウトライン</button>
<button class="btn btn-ghost-primary">ゴースト</button>フォーム
スタイリングされたネイティブコントロール、data-cerne-validate（Constraint Validation API）によるバリデーション、属性でカスタマイズ可能なエラーメッセージ。
<form data-cerne-validate novalidate>
<div class="form-group">
<label class="form-label" for="email">メールアドレス</label>
<input class="form-control" type="email" id="email" required
data-error-required="メールアドレスを入力してください。">
<span class="form-error"></span>
</div>
</form>その他のフォーム
フローティングラベル、強度/表示切替付きパスワード、OTP コード、クリア機能付き検索、スライダー、タグ、コンボボックス、選択可能カード、セグメントコントロール、ドラッグアップロード、文字数カウンター —— ログインからチェックアウトまで、あらゆるフローに対応。
<mark> でハイライトされます。
<div class="form-floating">
<input class="form-control" placeholder=" " id="name">
<label for="name">氏名</label>
</div>
<div class="otp-input" data-cerne-otp>
<input class="otp-digit"> <input class="otp-digit"> ...
</div>
<div class="tags-input" data-cerne-tags-input>
<input type="text" placeholder="タグを追加...">
</div>
<div class="segmented" role="tablist" data-cerne-segmented>
<button type="button" class="segmented-item is-active" role="tab">30 日間</button>
<!-- ... -->
</div>
<div class="file-drop" data-cerne-file-upload data-cerne-file-list="#file-list">
<input type="file" multiple>
<span>ここにファイルをドラッグ、またはクリックして選択</span>
</div>
<div class="file-list" id="file-list"></div>カード
メディア
.carousel（1 枚ずつのスライド、ドット、オプションの自動再生）と .shelf（横スクロール、RTL 対応の行）—— それぞれ組織ポータルのヒーローセクションと、ストリーミング風のカタログ向け。
カルーセル（data-cerne-carousel-autoplay）
シェルフ（マウスを乗せると矢印が表示されます）
<div class="carousel" data-cerne-carousel data-cerne-carousel-autoplay="5000">
<div class="carousel-track">
<div class="carousel-slide">...</div>
</div>
<button data-cerne-carousel-prev>‹</button>
<button data-cerne-carousel-next>›</button>
<div class="carousel-dots"></div>
</div>
<div class="shelf" data-cerne-shelf>
<button data-cerne-shelf-prev>‹</button>
<div class="shelf-track">
<div class="shelf-item"><img src="poster.jpg" alt="..." /></div>
</div>
<button data-cerne-shelf-next>›</button>
</div>動画
Cerne.VideoPlayer —— 既存の動画マークアップに対するプログレッシブ
エンハンスメント（独自の HTML を強制しません）：再生/一時停止、クリックでのシーク、音量、速度制御。
本物の <video> がない場合（下記のように）は「シミュレートされた時計」で動作し、
[data-video-element] を渡した場合はネイティブの <video>（MP4、hls.js 経由の
HLS など）をミラーリングします —— 本物のアダプティブストリーミング配信は
実装者の責任であり、CSS/JS フレームワークの範囲外です。
<div class="player" id="player" data-duration="196">
<button data-video-toggle>▶</button>
<div class="player-controls">
<div class="progress" data-video-seek><div class="progress-bar" data-video-fill></div></div>
<button data-video-mute-toggle>🔊</button>
<input type="range" data-video-volume min="0" max="1" step="0.05" value="1">
<span data-video-time>0:00 / 0:00</span>
<button data-video-speed="1.5">1.5x</button>
</div>
</div>
<script>
new Cerne.VideoPlayer(document.getElementById("player"), { duration: 196 });
</script>
完全なサンプル：WebVTT 字幕付き動画、
「次のエピソード」付きストリーミング、
live: true 配信、
D パッド操作のスマート TV。
テーブルとデータテーブル
.table は静的なテーブル向け。[data-cerne-datatable] は依存なしでクライアントサイドのソート、検索、ページネーションを追加します。
| 名前 | コース | 進捗 |
|---|---|---|
| Marina Silva | コンピュータネットワーク | 92% |
| Diego Souza | データベース | 78% |
| Ana Beatriz | アルゴリズム | 65% |
| Lucas Pereira | コンピュータネットワーク | 40% |
| Juliana Melo | オペレーティングシステム | 88% |
| Rafael Costa | データベース | 55% |
エディトリアルコンテンツ
段組み、強調ボックス、説明ノート付きテキストマーカー、読了進捗バー —— ブログ、ニュースポータル、.prose 内のあらゆる長文向け。ちなみに画面の上部を見てください：メニューの上にある細いカラーバーが .reading-progress で、このドキュメントページ自体のスクロールを追跡しています。
強調ボックス（.callout）
<mark> マークされた用語の説明ノート —— ニュースポータルの「用語集」/「AI が解説」スタイル。
テキストマーカー（<mark data-cerne-reveal="mark">）+ 用語集ボックス —— 用語が画面に入ると、
ハイライトカラーが最初から表示されるのではなく、左から右へ（dir="rtl" では逆方向に）
「塗られていき」ます。
報告者は、新しい規制枠組みが本会議での承認手続きを変更すると強調した。
テキストの段組み（.columns-2 / .columns-3、.prose 内）
1 列目：テキストは縦方向に流れ、次の列に折り返されます。
2 列目：短いハイライトリスト、用語集、引用に便利です —— md 未満では 1 列に折りたたまれます。
<p>新しい <mark data-cerne-reveal="mark">規制枠組み</mark> が承認手続きを変更する。</p>
<div class="callout callout-glossary">
<svg class="callout-icon"><use href="sprite.svg#icon-search"></use></svg>
<div class="callout-body"><strong>規制枠組み</strong>とは……</div>
</div>
<div class="columns-2"><p>...</p><p>...</p></div>
<div class="reading-progress"><div class="reading-progress-bar"></div></div>実際の文脈での完全なサンプルはブログ記事または ニュースポータルの記事をご覧ください。
モーダルとオフキャンバス
操作の確認
これはフォーカストラップ（Tab キーで外に出られない）を持つモーダルで、Esc、外側クリック、ボタンで閉じられます。
サイドパネル
ページを離れることなく、フィルター、カート、簡易詳細表示などに使用します。
アラートとトースト
カレンダーと予約
部屋予約のための週間スケジュールグリッド —— 完全なサンプルは予約をご覧ください。
チャート
依存ゼロのミニ SVG チャート（Cerne.Chart.bar/line/donut）。
その他のコンポーネント
リストグループ、スピナー、評価、ヒーロー、料金表 —— ショップ、組織ポータル、マーケティングページ、カタログ向け。
<div class="rating">
<svg class="is-filled"><use href="sprite.svg#icon-star"></use></svg>
<!-- ... -->
<span class="rating-count">4.2 (128)</span>
</div>画像
トリミング（object-fit/aspect-ratio）、CSS フィルター
（grayscale、blur-*、brightness-*……）、
加工レシピ（ホバーズーム、キャプション用スクリム、デュオトーン、有機的な
切り抜き）—— すべて純粋な CSS で、画像処理ライブラリは不要です。この
ページの写真は自作の SVG イラストで、ドキュメントが 100% 自己完結型で
あり続けるためのものです。
トリミングとアスペクト比
.aspect-video/.aspect-square/.aspect-portrait
はコンテナのアスペクト比を固定し、.object-cover は歪ませずに埋めます。
aspect-video
aspect-square
aspect-portrait
<img class="aspect-video object-cover rounded-md" src="foto.jpg" alt="..." />フィルター
アトミックで組み合わせ可能なクラス（class="grayscale contrast-125"）—— それぞれが
単一の filter プロパティを制御します。
フィルターなし
grayscale
sepia
blur-sm
brightness-50
brightness-150
contrast-150
saturate-0
saturate-200
hue-rotate-90
invert
grayscale contrast-125
<img class="grayscale" src="foto.jpg" alt="..." />
<img class="sepia" src="foto.jpg" alt="..." />
<img class="blur-sm" src="foto.jpg" alt="..." />
<img class="brightness-150 contrast-125" src="foto.jpg" alt="..." />加工効果
写真付きカードでよくあるパターン向けの、レシピクラス（.bg-aurora のように、それぞれ複数のプロパティを持つ）。
<div class="img-hover-zoom rounded-lg aspect-video">
<img src="foto.jpg" alt="..." />
</div>
<div class="img-scrim rounded-lg aspect-video">
<img src="foto.jpg" alt="..." />
<div class="img-scrim-caption"><strong>渓谷の小道</strong></div>
</div>
<div class="img-duotone aspect-square"><img src="foto.jpg" alt="..." /></div>
<div class="img-blob aspect-square"><img src="foto.jpg" alt="..." /></div>モダントレンド
ベントーグリッド、スポットライトカード、グラデーションボーダー、グロー、グレイン/ノイズ、オーロラ、マーキー、FAB、読了進捗バー —— 今どきのビジュアルテクニックが、どんなアプリケーションでもすぐに使えます。
マーキー（ホバーで一時停止）
data-cerne-reveal を使用しています —— ページをスクロールしてアニメーションを確認してください。<div class="bento-grid">
<div class="bento-item bento-span-2 card-spotlight">...</div>
<div class="bento-item">...</div>
</div>
<div data-cerne-reveal="up">スクロール時に表示</div>
<span data-cerne-count-up="1284" data-cerne-count-up-format>0</span>ユーティリティバリアントと地域対応
色/影/不透明度系ユーティリティの前に付けられる hover:、focus:、focus-visible:、active:、disabled:、focus-within:、
dark:、さらに純粋な CSS で実装された group-hover:/peer-checked:
（JS 不要 —— .group/.peer は単なるマーカー）、コンテナクエリ（.cq + cq-md:）、
そしてフレームワークをどの地域の UI パターンにも対応可能にする基礎機能 —— 欧米だけではありません。
隣のボタンは group-hover:opacity-100 を使用しています —— 親要素（.group）がホバー状態のときだけ表示されます。
<html> に data-density="compact" を設定すると、間隔スケール全体が一括で変更されます —— 東アジアの
ポータルサイトや EC サイトによく見られる高密度な情報表示に近づきます。.break-keep と .write-vertical は
CJK の改行と縦書きをカバーし、--cerne-line-height-base は
:lang(ar|he|hi|bn|ta|te|th) で自動的により余裕を持ちます。9 個のサンプルページ（ショップ/ニュース/ダッシュボード × CJK/RTL/南アジア）は
サンプルを見るをご覧ください。
<div class="group card">
<button class="opacity-25 group-hover:opacity-100 hover:bg-primary">...</button>
</div>
<div class="cq">
<div class="flex-col cq-md:flex-row">...</div> <!-- reage ao espaço do .cq, não do viewport -->
</div>
<html data-density="compact"> <!-- ou "spacious" -->アイコン
87 個の自作アイコンが、単一の SVG スプライト（dist/icons/sprite.svg）内に収められ、<use> で参照されています。
アクセシビリティ
目標はWCAG 2.1 レベル AA —— 国や言語に関わらない国際標準であり、特定の地域固有のツールや認証マークではありません。
- すべてのインタラクティブなコンポーネントは、可視の
:focus-visible状態とキーボード操作（タブ/メニューでの矢印キー、Esc で閉じる、モーダル内でのフォーカストラップ、タブでの roving tabindex）を備えています。 prefers-reduced-motionとprefers-color-schemeは、追加設定なしに自動的に尊重されます。- ソリッドな背景の上のテキストカラーは AA 基準に合わせて選ばれています —— 特に
warning/infoでは、白では十分なコントラストが得られないため、暗い色のテキストを使用しています。 - フォームはラベル（
for/id）、エラー、aria-invalidを関連付けます。エラー状態が色だけに依存することはありません。 - アクティブなナビゲーションリンクには
aria-current="page"が付与されます。ランドマーク（main、nav、aside）とページごとの単一の<h1>が、スクリーンリーダーのためにドキュメントの構造を作ります。 -
画像/グラフィックの説明的な代替テキストは、フレームワークを使う人の責任です —— Cerne があなたの代わりにそれを生成することはできません。
ブラジルの慣習である #PraCegoVer（キャプション/alt 内で画像を説明する）は良い習慣ですが、本当に重要なのは —
画像を説明する
altを書き、自明なことを繰り返さないこと —— これはどの言語でも通用します。 - VLibras や手話翻訳ツールについて：これらは意図的に組み込まれていません。外部 スクリプト（サードパーティ CDN）に依存し、特定の言語/国に限定されるためです —— これは「外部依存ゼロ」にも「国際化 フレームワーク」にも反します。正しく普遍的な基盤は、適切に構成されたセマンティック HTML + ARIA であり、世界中のあらゆる支援技術がすでに解釈できるものです。 特定の翻訳ウィジェットは、意味がある場合にプロジェクトごとに上に追加できます。
-
本物の RTL 対応：コンポーネントは固定の
left/rightではなく論理プロパティ（inset-inline-start、margin-inline-end、text-align: start……）を使用しているため、<html>にdir="rtl"を設定するだけで、サイドバー、ドロップダウン、タブ、フォーム、ナビゲーションがミラーリングされます —— 追加の CSS は不要です。実際に確認してみましょう：
ボーダーはテキストの開始位置に追従し、固定された一辺ではありません。
<html lang="ar" dir="rtl">
<!-- サイドバー、ドロップダウン、タブ、フォーム……すべて自動的にミラーリングされます -->プライバシーと同意
汎用の Cookie/同意バナー —— GDPR（EU）、LGPD（ブラジル）、CCPA （カリフォルニア州）と同じ「必須 / 分析 / マーケティング」パターンを、サードパーティの同意管理プラットフォームに頼らずに実現。
<div class="consent-banner" data-cerne-consent hidden role="region" aria-label="Cookie の通知">
<p class="consent-banner-text">必須の Cookie を使用しています...</p>
<div class="consent-banner-actions">
<button data-cerne-consent-customize
data-cerne-toggle="modal" data-cerne-target="#consent-preferences">カスタマイズ</button>
<button data-cerne-consent-reject>必須以外を拒否</button>
<button data-cerne-consent-accept>すべて許可</button>
</div>
</div>
<!-- Cerne.Consent.get() / .set({analytics, marketing}) / .reset() -->
選択結果は localStorage（キー cerne-consent）に保存され、サードパーティの Cookie に保存されることは一切なく、どこにも送信
されません —— Cerne.Consent.get() の結果をバックエンドでどう扱うかはあなた次第です。バナーは、ページに
[data-cerne-consent] 要素が含まれる場合にのみ自動的に表示されます。このドキュメントでは邪魔にならないよう意図的に省略しています —— 完全な
サンプルはブログ、ショップ、
組織ポータルをご覧ください。
プライバシー設定
完全なサンプル
Cerne だけで構築された 42 ページ。管理ダッシュボード、教育、管理、予約、コンテンツ、ニュースポータル、EC、組織サイト、動画、ソーシャルネットワーク、ストリーミング、対話型アシスタント、ポートフォリオをカバーし、それぞれに CJK、RTL、南アジア、ロシアの独自バリアントがあり、UI が完全に翻訳されています（168 の地域ページ、合計約 210 ページ）。各サンプル上部の「地域バリアント」バーからアクセスできます。
地域バリアント（CJK、RTL、南アジア、ロシア）
上記の各サンプルの各ページには、CJK、RTL、南アジア、ロシアの 4 つのバリアントがあります —— 合計 168 の
地域ページ —— どれでも開いて、上部の「地域バリアント」バーで切り替えられます。CJK、RTL、南アジアは
バリアントと地域対応で説明されている基礎機能を使用します ——
data-density、.break-keep/.write-vertical、dir="rtl"、
言語ごとの --cerne-line-height-base。ロシアバリアントは、元のサンプルと同じ LTR 構造の上で
lang="ru" によるロシア語テキストを使用します（ロシア語はポルトガル語と同様にこれらの
追加の論理プロパティを必要としないため）。168 ページすべてが完全に翻訳されています —— UI
（ナビゲーション、ボタン、フォーム、ラベル、空状態）だけでなく、動的なコンテンツも：商品名と説明、
サンプルメール（件名と本文）、検索結果、動画/シリーズのタイトルとあらすじ、
アシスタントのサンプル会話、長文記事/投稿の本文まで、各ドメインが言語ごとに独自の
サンプルデータのコピーを持っています（例：store-data.cjk.browser.js / store-data.ru.browser.js）。
Cookie バナーも翻訳済みです。バリアント自体を説明する小さなフッター注記（および人物の
固有名詞）のみポルトガル語のままです。これらはソースコードを読む人のための
ドキュメント的なテキストであり、アプリのコンテンツではないためです。
| サンプル | CJK | RTL | 南アジア | ロシア |
|---|---|---|---|---|
| 管理ダッシュボード | 開く | 開く | 開く | 開く |
| 学習環境 | 開く | 開く | 開く | 開く |
| 教員ページ | 開く | 開く | 開く | 開く |
| 管理 / CRUD | 開く | 開く | 開く | 開く |
| 部屋予約 | 開く | 開く | 開く | 開く |
| ブログ | 開く | 開く | 開く | 開く |
| ブログ — 記事 | 開く | 開く | 開く | 開く |
| ニュースポータル | 開く | 開く | 開く | 開く |
| ニュースポータル — 記事 | 開く | 開く | 開く | 開く |
| EC ショップ | 開く | 開く | 開く | 開く |
| EC ショップ — 商品 | 開く | 開く | 開く | 開く |
| 研究室サイト | 開く | 開く | 開く | 開く |
| 組織ポータル | 開く | 開く | 開く | 開く |
| 研究グループサイト | 開く | 開く | 開く | 開く |
| 認証 — ログイン | 開く | 開く | 開く | 開く |
| 認証 — 登録 | 開く | 開く | 開く | 開く |
| 認証 — OTP 確認 | 開く | 開く | 開く | 開く |
| 404 エラー | 開く | 開く | 開く | 開く |
| 500 エラー | 開く | 開く | 開く | 開く |
| 動画プラットフォーム | 開く | 開く | 開く | 開く |
| 動画 — 視聴 | 開く | 開く | 開く | 開く |
| 動画 — プレイリスト | 開く | 開く | 開く | 開く |
| ソーシャルネットワーク（フィード） | 開く | 開く | 開く | 開く |
| ソーシャルネットワーク（プロフィール） | 開く | 開く | 開く | 開く |
| ストリーミング — ログイン | 開く | 開く | 開く | 開く |
| ストリーミング — プロフィール | 開く | 開く | 開く | 開く |
| 動画ストリーミング | 開く | 開く | 開く | 開く |
| ストリーミング — 作品詳細 | 開く | 開く | 開く | 開く |
| ストリーミング — 視聴 | 開く | 開く | 開く | 開く |
| ストリーミング — 探す | 開く | 開く | 開く | 開く |
| ストリーミング — ライブ | 開く | 開く | 開く | 開く |
| 対話型アシスタント（LLM） | 開く | 開く | 開く | 開く |
| ポートフォリオ（ベントーグリッド） | 開く | 開く | 開く | 開く |
| アナリティクスダッシュボード | 開く | 開く | 開く | 開く |
| ウェブメール（Gmail スタイル） | 開く | 開く | 開く | 開く |
| ウェブメール（Outlook スタイル） | 開く | 開く | 開く | 開く |
| 検索エンジン（ミニマル） | 開く | 開く | 開く | 開く |
| 検索エンジン（ミニマル）— 結果 | 開く | 開く | 開く | 開く |
| 検索エンジン（高密度ポータル） | 開く | 開く | 開く | 開く |
| 検索エンジン（高密度ポータル）— 結果 | 開く | 開く | 開く | 開く |
| スマート TV インターフェース | 開く | 開く | 開く | 開く |
| スマート TV — プレーヤー | 開く | 開く | 開く | 開く |
| 国際対応の適応型登録フォーム （すでに JS で国ごとに自動対応 —— 静的なバリアントはありません） | — | — | — | — |