ガントチャートでもテーマ対応をやってみました。
いろいろあったけど、なんとかできた感じ。
概要
カンバンプラグインでテーマ対応していたので、ガントチャートでもテーマ対応してみました。
かなり苦戦したけどなんとかできた。
テーマのマニュアル調整（色・大きさ・位置等）を行うことは、無理でした。
ひとつひとつすべての要素を Claude Code に頼んで調整してもらいます。
- kintone blue な感じのテーマ
- Dracura テーマ
- Green テーマ： タスクリスト、担当負担表示
- Matrix
テーマの切り替え操作例
ガントチャートの構造
プロジェクトタイトル行は、下記のような構造です。
<div class="rexgt:sticky rexgt:z-30 rexgt:border-y rexgt:border-gt-surface-strong rexgt:bg-gt-surface-muted rexgt:px-2 rexgt:text-[11px] rexgt:font-bold rexgt:text-gt-surface-muted-text"
style="top: 56px; height: 44px; display: flex; align-items: center;"><button type="button"
class="rexgt:pointer-events-auto rexgt:sticky rexgt:left-2 rexgt:inline-flex rexgt:max-w-full rexgt:flex-col rexgt:items-start rexgt:justify-center rexgt:gap-0.5 rexgt:rounded rexgt:bg-transparent rexgt:px-2 rexgt:py-0.5 rexgt:text-left rexgt:hover:bg-gt-accent-bg"
title="全折り畳み" aria-label="全折り畳み"><span
class="rexgt:inline-flex rexgt:min-w-0 rexgt:items-center rexgt:gap-2"><span
class="rexgt:w-4 rexgt:shrink-0 rexgt:text-[14px] rexgt:leading-none">▾</span><span
class="rexgt:truncate rexgt:text-[15px] rexgt:font-bold rexgt:leading-tight">アルファ</span><span
class="rexgt:inline-flex rexgt:shrink-0 rexgt:items-center rexgt:gap-1.5 rexgt:text-[12px] rexgt:font-semibold rexgt:leading-tight"><span
class="rexgt:inline-flex rexgt:items-center rexgt:rounded-full rexgt:border rexgt:px-2 rexgt:py-0.5 rexgt:border-rose-300 rexgt:bg-rose-100 rexgt:text-rose-800"
title="">期限超過 4（子4）</span><span
class="rexgt:inline-flex rexgt:items-center rexgt:rounded-full rexgt:border rexgt:px-2 rexgt:py-0.5 rexgt:border-yellow-300 rexgt:bg-yellow-100 rexgt:text-yellow-800"
title="">進捗遅れ 1</span></span></span><span
class="rexgt:ml-6 rexgt:inline-flex rexgt:items-center rexgt:gap-1.5 rexgt:text-[10px] rexgt:font-semibold rexgt:leading-none rexgt:text-gt-surface-muted-text"><span
class="rexgt:h-2 rexgt:w-20 rexgt:overflow-hidden rexgt:rounded-full rexgt:bg-gt-surface-muted-text/20"><span
class="rexgt:block rexgt:h-full rexgt:rounded-full rexgt:bg-gt-surface-muted-text"
style="width: 37%;"></span></span><span>37%</span></span></button>
</div>
クラス指定方法
Codex で、最初に生成されたコードは、react + Tailwind V4 で作成されました。
それを基に機能追加を行ってきましたが、テーマ対応を行うためにクラス名を確認したら大変なことになっていました。
Tailwind は、こんな細かいクラスをたくさん指定するものだったんですね。
いざとなったらテーマもマニュアル調整でいいかと思っていましたが、これは無理でした。
プレフィックス
Tailwind で利用されるクラス名が短いので、kintone のプラグインでそのまま使うとあちこちで競合しそうなので、クラス名の先頭に rexgt: を追加しています。
Tailwind V4 プレフィックスを指定すると、":" がついてきます。クラス名に ":" って使えるんですね。初めて知りました。
CSS では、エスケープ付きの ":" で定義されます。
このプレフィックスには、英字しか使えないという制約があり、"-" や "0220" の数字はエラーになります。
Tailwind（Gemini解説）
Tailwind CSSを一言で言えば、**「HTMLの中にクラス名を書き込むだけで、爆速でデザインを組み上げられるCSSフレームワーク」**です。
従来のCSSのように「.btn-primary という名前を付けて、別のファイルでスタイルを書く」という手順を省き、あらかじめ用意された ユーティリティクラス（小回りの利く部品）を組み合わせて構築します。
スクリーンショットで、テーマ調整
変更する要素をスクリーンショットして、赤枠で囲んで依頼すると割とうまく治してくれるようでした。
あとは、ひたすら変更を繰り返します。
- スクリーンショット例
- 変更依頼プロンプト例
