はじめ方
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（懐古）、
sakura（桜）、neon（ネオン）、hacker（ハッカー）、
auto（システムのライト/ダーク設定に従う）。
<html data-theme="sakura">
これが最強なCSSフレームワーク？
クラスレスCSS
HTMLをセマンティックに使えば、コードを書くだけでテーマは
RakuCSSに任せられます。article要素は
上品な角丸ボーダー付きで表示されます。基本的なスタイリングには「p」タグと
strong（太字）、em（斜体）などをご利用ください。
RakuCSSのデザインシステムでは、いくつかのクラスが利用可能ですが、任意かつセマンティックです。
あらゆる場面に合うテーマ
RakuCSSには丁寧に設計されたテーマが揃っています。
どれかがご要望に合えば幸いですが、もし合わない場合は
フレームワークの基盤となるCSS変数を上書きして独自テーマを作成できます。すべてが揃います。
以下は順不同の組み込みテーマ一覧です
- ライトは目に優しく、明るい印象です
- ダークは他のダークモードアプリと馴染み、バランスの取れたコントラストを保ちます
- 懐古は温かみのあるデザインとセリフフォントが、過去のウェブサイトに追いやられる必要はないことを示しています
- さくらの優雅な魅力がユーザーを虜にします。
- ネオンは夢見てきた未来を見据える方に。
- ハッカーモードはCSS以前の時代へのオマージュです。
こちらは順番が大切なカステラのレシピです。
- 材料を揃える
- 強力粉（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%を最大幅として表示されます。
きれいにマークアップされたテーブルもあります！
| 名前 |
数量 |
価格 |
| ゴジラ |
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グラムに改定されています
見出しについての見出し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でも同様に機能します