はじめ方
RakuCSSをプロジェクトに追加するには、<link>タグ一行だけで十分です。
セマンティックなHTMLを書けば、あとはRakuCSSがすべてスタイリングします。
CDNから直接読み込む場合：
<link rel="stylesheet" href="https://css.kaylee.jp/style.css" type="text/css">
またはstyle.cssをダウンロードして自前でホストすることもできます。
テーマを設定するには、<html>要素にdata-theme属性を追加します。
利用可能な値：light（ライト）、dark（ダーク）、parchment（懐古）、
chalkboard（黒板）、sakura（桜）、neon（ネオン）、hacker（ハッカー）、forest（夜の森）、
auto（システムのライト/ダーク設定に従う）。
<html data-theme="sakura">
これが最強なCSSフレームワーク？
クラスレスCSS
HTMLをセマンティックに使えば、コードを書くだけでテーマは
RakuCSSに任せられます。article要素は
上品な角丸ボーダー付きで表示されます。基本的なスタイリングには「p」タグと
strong（太字）、em（斜体）などをご利用ください。
RakuCSSのデザインシステムでは、いくつかのクラスが利用可能ですが、任意かつセマンティックです。
あらゆる場面に合うテーマ
RakuCSSには丁寧に設計されたテーマが揃っています。
どれかがご要望に合えば幸いですが、もし合わない場合は
フレームワークの基盤となるCSS変数を上書きして独自テーマを作成できます。すべてが揃います。
以下は順不同の組み込みテーマ一覧です
- ライトは目に優しく、明るい印象です
- ダークは他のダークモードアプリと馴染み、バランスの取れたコントラストを保ちます
- 懐古は温かみのあるデザインとセリフフォントが、過去のウェブサイトに追いやられる必要はないことを示しています
- 黒板は懐古の温かみを保ちながら、チョークで書いたような趣きをダークモードで表現します
- さくらの優雅な魅力がユーザーを虜にします。
- ネオンは夢見てきた未来を見据える方に。
- ハッカーモードはCSS以前の時代へのオマージュです。
- 夜の森は苔むした森の静けさを、飾り気のないサンセリフ体で表現するダークテーマです。
CSS変数リファレンス
RakuCSSのすべての色・ボーダー・フォントは、少数のCSSカスタムプロパティから成り立っています。
:rootで上書きするか、特定の要素だけに適用することで、フレームワークを自由に調整できます。
以下のスウォッチは、現在選択されているテーマの値をそのまま反映しています。
背景と文字色
| 変数 |
スウォッチ |
用途 |
--bg-surface |
|
ページ全体の背景色 |
--bg-primary |
|
カード、テーブル、フォームメッセージの背景色 |
--bg-secondary |
|
ホバー時や入れ子パネルの背景色 |
--color-text |
|
標準の本文文字色 |
--color-text-button |
|
ボタンの文字色とチェックボックスの塗り色 |
--medium-gray |
|
控えめな文字色（例：small） |
ボーダー
| 変数 |
スウォッチ |
用途 |
--border-primary |
|
カード、hr、code、入力欄の標準ボーダー色 |
--border-secondary |
|
控えめなボーダー、ホバー時の輪郭、プレースホルダー文字色 |
--border-strong |
|
高コントラストなボーダー。独自の強調表現用に予約されています |
プライマリアクセント
| 変数 |
スウォッチ |
用途 |
--primary |
|
リンクとメインアクセントカラー |
--primary-light |
|
ホバー時のアクセントカラー |
--primary-border |
|
フォーカス時・チェック時のボーダー色 |
--primary-bg |
|
チェック時・ホバー時の背景色 |
--primary-bg-active |
|
アクティブ（押下）時の背景色 |
状態を表す色
無印の<mark>（既定値はエラー色）、<mark class="success">、
<mark class="warning">、button.deleteで使用されます。
| 変数 |
スウォッチ |
用途 |
--error-bg |
|
エラーの背景色 |
--error-bg-active |
|
独自のエラーアクティブ状態用に予約されています |
--error-border |
|
エラーのボーダー色 |
--error-text |
|
エラーの文字色 |
--success-bg |
|
成功の背景色 |
--success-bg-active |
|
独自の成功アクティブ状態用に予約されています |
--success-border |
|
成功のボーダー色 |
--success-text |
|
成功の文字色 |
--warning-bg |
|
警告の背景色 |
--warning-bg-active |
|
独自の警告アクティブ状態用に予約されています |
--warning-border |
|
警告のボーダー色 |
--warning-text |
|
警告の文字色 |
装飾用アクセントカラー
4色のアクセントカラーと、それに合わせた前景色です。RakuCSS自体では使用されていませんが、
独自のグラフ・タグ・アバターなどのために、すべてのテーマで定義されています。
| 変数 |
スウォッチ |
--spectral-bg-1 |
|
--spectral-bg-2 |
|
--spectral-bg-3 |
|
--spectral-bg-4 |
|
--spectral-fg |
|
タイポグラフィとレイアウト
| 変数 |
サンプル |
用途 |
--font-theme |
Aa |
本文とフォーム部品の基本フォント |
--mono-font |
Aa |
preとcodeのフォント |
--max-width |
— |
ページレイアウトの最大幅 |
エフェクト
| 変数 |
スウォッチ |
用途 |
--color-shadow-inset |
|
カードのドロップシャドウとホバー時のハイライト |
--bevel-light |
|
ボタンやチェック済みコントロールの明るい側の内側エッジ |
--bevel-dark |
|
ボタンやチェック済みコントロールの暗い側の内側エッジ |
見た目のデモンストレーション：
以下は、RakuCSSを実際のページに適用するとどう見えるかを示すための、
特に意味がない模擬コンテンツです。
こちらは順番が大切なカステラのレシピです。
- 材料を揃える
- 強力粉（100g）
- 砂糖（100g）
- 卵 4個
- みりん（大さじ2 / 30mL）
- 蜂蜜（大さじ2 / 30mL）
- サラダ油（大さじ2 / 30mL）
- 18cm×18cmの型にクッキングシートを敷く
- 強力粉（100g）を別のボウルにふるっておく
- 40°Cのお湯を張ったボウルに部分的に浸したボウルで卵（4個）と砂糖（100g）をリボン状になるまで泡立てる
- オーブンを180°Cに予熱する
- 残りの液体材料を加えて低速で混ぜる
- みりん（大さじ2 / 30mL）
- 蜂蜜（大さじ2 / 30mL）
- サラダ油（大さじ2 / 30mL）
- 強力粉を折り混ぜる
- クッキングシートを敷いた型に流し込む
- 型を~10cmの高さから硬い台に数回落として気泡を抜く
- 180°Cで10分、その後140°Cで40分焼く
フォーム要素
RakuCSSは情報密度を犠牲にせず、美しいデザインを維持します。
ラベル内にネストされた入力欄はラベルの右側に表示されます。
それ以外の入力欄はラベルの下に表示されます。
コード
以下はコードのサンプルです。Ctrl-Cでコピーできます。
JavaScriptではalert(1)でアラートを表示できます。
// コンソールにメッセージを出力します
console.log('Hello, world!')
「samp」タグをご存知ですか？コンピュータプログラムの出力を示すのに使えます。
これはコンピュータプログラムのサンプル出力です。
その他の便利な要素
画像には微妙な角丸が付き、ページ幅の100%を最大幅として表示されます。
2021 Sagano Bamboo forest in Arashiyama, Kyoto, Japan、Naokijp 著、CC BY-SA 4.0
きれいにマークアップされたテーブルもあります！
| 名前 |
数量 |
価格 |
| ゴジラ |
2 |
$299.99 |
| モジラ |
10 |
$100,000.00 |
| モッツァレッラ |
1 |
$2.22 |
| カステラ |
1 |
265円 |
このテーブルにはフッターとキャプションもあります：
カステラ原価分析
| 材料 |
単価 |
使用量 |
合計 |
| 薄力粉 |
299円/kg |
100g |
29.9円 |
| 砂糖 |
269円/kg |
100g |
26.9円 |
| 卵 |
325円/10個 |
4個 |
130円 |
| みりん |
289円/L |
30mL |
8.67円 |
| はちみつ |
679円/500g |
30mL |
57.036円 |
| 油 |
419円/900mL |
30mL |
12.8493円 |
| 合計 |
265円 |
smallタグは注釈に使えます。価格は2026年5月時点のものです。はちみつの密度は1.4g/mL、油の密度は0.92g/mLです
タイポグラフィ
これはブロッククォートです。私のカステラレシピは薄力粉・砂糖・卵・みりん・はちみつ・油だけで作ります。
カステラは日本で人気の菓子で、大航海時代にポルトガル商人の影響を受けて広まりました。
これはサンプルテキストです。
これは強調、これは通常テキスト、これは太字、 そしてこれは斜体！ そしてこちらはリンクです。
これは要約です
これはdetails要素です。ユーザーがsummary要素をクリックすると、追加情報を表示するために使用できます。
- HTML説明リスト要素：
- 今読んでいるこのHTMLは定義リストです。用語集の実装やメタデータ（キーと値のペアのリスト）の表示によく使われます。
- 声門閉鎖音：
- 声門で気流を遮断することで生成される子音の一種
- 匁（もんめ）：
- 江戸時代に1両の1⁄10に相当した日本の旧単位系の一つで、現在は正確に3.75グラムに改定されています
この線より下はすべてプレースホルダーと気まぐれな内容です——意識の流れのような文章、カステラのレシピ、ローレムイプサムなど、RakuCSSが実際のページで普通のテキストやさまざまなHTMLをどのように扱うかを示すためのものです。ドキュメントではありません。
見出しについての見出し1：
見出しのセットを設計する際、考慮すべきことが多くあります。
見出し2 デザインの課題
情報密度を保ちながら、識別可能で区別できる6つの見出しスタイルのセットを設計することは難しい課題です。
見出し3 その理由
見出しを通常テキストから十分に大きくしてオフセットしつつ、ユーザビリティを損なうほどスペースを取らないようにバランスを取る必要があります。
見出し4 世界の現状
多くの現代ウェブサイトでは、見出しを大きく美しく息を呑むほどの印象的なタイポグラフィにしていますが、スペースを取りすぎてユーザーが本当に必要な部分にたどり着くためにスクロールしなければなりません。
見出し5 私たちのアプローチ
RakuCSSは徹底的に合理的であることで違いを示します。
見出し6 感謝
見出しについての「TEDトーク」にお付き合いいただきありがとうございました
別のarticle
こちらはmark要素のサンプルです。魅力的なバッジとして表示されます。
RakuCSSでは通常クラスは不要ですが、ここではclass=animatedや
class=successの状態を示すためにクラスを使用できます。
mark1
class=primary
class=warning
アニメーション
成功
入力欄とボタンを組み合わせて表示するには、role=groupを持つdivまたはfieldsetの中に配置してください
ドロップダウンのselectでも同様に機能します