これが最強なCSSフレームワーク？

クラスレスCSS

HTMLをセマンティックに使えば、コードを書くだけでテーマは RakuCSSに任せられます。article要素は 上品な角丸ボーダー付きで表示されます。基本的なスタイリングには「p」タグと strong（太字）、em（斜体）などをご利用ください。

RakuCSSのデザインシステムでは、いくつかのクラスが利用可能ですが、任意かつセマンティックです。

あらゆる場面に合うテーマ

RakuCSSには丁寧に設計されたテーマが揃っています。 どれかがご要望に合えば幸いですが、もし合わない場合は フレームワークの基盤となるCSS変数を上書きして独自テーマを作成できます。すべてが揃います。

以下は順不同の組み込みテーマ一覧です

• ライトは目に優しく、明るい印象です
• ダークは他のダークモードアプリと馴染み、バランスの取れたコントラストを保ちます
• 懐古は温かみのあるデザインとセリフフォントが、過去のウェブサイトに追いやられる必要はないことを示しています
• さくらの優雅な魅力がユーザーを虜にします。
• ネオンは夢見てきた未来を見据える方に。
• ハッカーモードはCSS以前の時代へのオマージュです。

こちらは順番が大切なカステラのレシピです。

1. 材料を揃える
   1. 強力粉（100g）
   2. 砂糖（100g）
   3. 卵 4個
   4. みりん（大さじ2 / 30mL）
   5. 蜂蜜（大さじ2 / 30mL）
   6. サラダ油（大さじ2 / 30mL）
2. 18cm×18cmの型にクッキングシートを敷く
3. 強力粉（100g）を別のボウルにふるっておく
4. 40°Cのお湯を張ったボウルに部分的に浸したボウルで卵（4個）と砂糖（100g）をリボン状になるまで泡立てる
5. オーブンを180°Cに予熱する
6. 残りの液体材料を加えて低速で混ぜる
   1. みりん（大さじ2 / 30mL）
   2. 蜂蜜（大さじ2 / 30mL）
   3. サラダ油（大さじ2 / 30mL）
7. 強力粉を折り混ぜる
8. クッキングシートを敷いた型に流し込む
9. 型を~10cmの高さから硬い台に数回落として気泡を抜く
10. 180°Cで10分、その後140°Cで40分焼く

フォーム要素

RakuCSSは情報密度を犠牲にせず、美しいデザインを維持します。 ラベル内にネストされた入力欄はラベルの右側に表示されます。 それ以外の入力欄はラベルの下に表示されます。

コード

以下はコードのサンプルです。Ctrl-Cでコピーできます。 JavaScriptではalert(1)でアラートを表示できます。

// コンソールにメッセージを出力します
console.log('Hello, world!')

「samp」タグをご存知ですか？コンピュータプログラムの出力を示すのに使えます。 これはコンピュータプログラムのサンプル出力です。

その他の便利な要素

画像には微妙な角丸が付き、ページ幅の100%を最大幅として表示されます。

きれいにマークアップされたテーブルもあります！

このテーブルにはフッターとキャプションもあります：

smallタグは注釈に使えます。価格は2026年5月時点のものです。はちみつの密度は1.4g/mL、油の密度は0.92g/mLです

タイポグラフィ

これはブロッククォートです。私のカステラレシピは薄力粉・砂糖・卵・みりん・はちみつ・油だけで作ります。 カステラは日本で人気の菓子で、大航海時代にポルトガル商人の影響を受けて広まりました。

色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山今日越えて浅き夢見し酔ひもせず これは強調、これは通常テキスト、これは太字、 そしてこれは斜体！ そしてこちらはリンクです。

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でも同様に機能します

ログイン

コンパクトなログインフォームの例です。 下部の3つのボタンはdivの中に配置されているため、横並びに表示されます。 パスワードを忘れたボタンにはclass=secondary、キャンセルボタンには class=deleteが付いています。

aria-busy=trueでローディング状態を示す例

こちらはデータです

• 項目 1
• 項目 2
• Roadmap
  • Styled Dropdown Support
  • Loading Spinners
  • Modal
  • Tooltips
  • Radio Buttons
  • role="switch" Checkboxes
  • multiselect styling
  • aria-invalid
  • indeterminate checkboxes
  • Figure elements
  • mark for highlighting
  • Figures