Claude Code で HTML を出力する際に CSS フレームワークを指定すると便利
📝 記事の概要
Claude Codeに成果物を出力させる際、プレーンテキストやMarkdownではなくHTMLで出力させるとブラウザで直接開けて見やすい。しかし、出力のたびに見た目がばらつく問題がある。この解決策として、CSSフレームワークを指定する方法を紹介した実践的な記事。
🔑 重要ポイント
HTML出力のメリット
- ブラウザ（Chrome等）でそのまま開ける
- Markdownプレビューより圧倒的に見やすい
- HTML要素、CSS、JavaScript、SVGなどを組み合わせて自由度の高い表現が可能
- Claude Codeチームも2026/05にHTML出力を推奨する記事を公開
問題点：見た目のばらつき
- 出力のたびに配色やレイアウトが変わる
- スタイルがインラインで書かれて再利用しづらい
- 全体のトーンが統一されない
解決策：CSSフレームワークの指定
使い慣れたフレームワーク（Tailwind CSS、Bootstrap等）を指定するだけで、一定の品質と統一感のある見た目が手に入る。CDN読み込みを指定すれば、出力されたHTMLを開くだけで表示可能。
著者は Tailwind CSS ベースのコンポーネントライブラリ「daisyUI」を使用。
このセッションの内容を HTML で出力して。
CSS フレームワークとして daisyUI を使って。
さらに細かくコントロール
- コンポーネント指定: 「手順の部分はタイムラインコンポーネントで描画して」
- テーマ指定: 「テーマは cupcake にして」→ daisyUIの light/dark/cupcake/night などから選択可能
- テーマ変更: 出力後にテーマ名を伝えるだけで
data-theme 属性を更新（ファイルを作り直す必要なし）
実例：Rails 8.0 → 8.1 アップグレード手順
参考リンクを参考に、Rails 8.0 を Rails 8.1 に更新する手順を示してください。
結果は HTML ファイルとして出力してください。
HTML では CSS フレームワークとして daisyUI を使用してください。
手順の部分はタイムラインコンポーネントを使って描画してください。
→ 参考リンクを読み込み、daisyUIをCDN経由で読み込んだHTMLが出力される。アップグレード手順はタイムライン、新機能はカード、注意書きはアラートで描画される。
💡 まとめ
- HTML出力はMarkdownより見やすく自由度が高い
- CSSフレームワークを指定すれば統一感が出る
- コンポーネント指定で見た目を細かくコントロール
- テーマ指定で配色も自在
※ HTML出力だけなら Sonnet 5 で十分とのこと。