DESIGN
CSSジェネレーター
AIが書いたCSSを貼り付けてスライダー化。プロパティをON/OFFして組み合わせ、プレビューとコードをその場で確認。
AIのCSSを取り込む
ChatGPTやClaudeに書いてもらったCSSを貼り付けて取り込むと、スライダーに読み込まれます。プロンプトを書き直す代わりに、GUIで直接微調整できます。対応: box-shadow / background / border-radius / border / transform / filter / opacity / transition。
box-shadow（影）
background（背景）
border-radius（角丸）
border（枠線）
transform（変形）
filter（フィルター）
opacity（不透明度）
transition（トランジション）
プレビュー
生成コード
box-shadow: 0px 8px 24px -4px #1b1d2133; border-radius: 12px;
よくある質問
AIが書いたCSSを取り込むにはどうすればいいですか？
ページ上部の「AIのCSSを取り込む」にCSSを貼り付けて「スライダーに取り込む」を押すと、対応プロパティがスライダーに反映されます。box-shadow・background・border-radius・border・transform・filter・opacity・transitionに対応し、それ以外のプロパティ（color や padding など）は無視されます。取り込み後はGUIで自由に微調整できます。
生成したCSSはどうやって使えばいいですか？
「生成コード」欄のコードをコピーして、CSSファイルやstyle属性にそのまま貼り付けられます。プレビューと同じ見た目がそのまま再現されます。
影の色が8桁のHEX（#RRGGBBAA）になっているのはなぜですか？
末尾2桁がアルファ値（透明度）です。box-shadowの色に透明度を指定する場合、rgba()の代わりにこの8桁HEX表記を使うと1つの値としてまとめて扱いやすくなります。
複数のプロパティを同時にONにできますか？
はい。box-shadow・background・border-radius・border・transform・filter・opacity・transitionはそれぞれ独立してON/OFFでき、有効にした分だけ合成されたCSSが1つのコードとして出力されます。
作った設定を他の人に渡せますか？
「共有リンクをコピー」で、いまのスライダー状態（ON/OFFと各値）をURLに載せたリンクをコピーできます。そのURLを開くと同じプレビューとコードが再現されるので、生成CSSのコピーと違って受け取った側もスライダーで微調整を続けられます。
transitionを設定してもプレビューでアニメーションが見えないのはなぜですか？
transitionは「値が変化するときの動き方」を指定するプロパティなので、hoverなど実際の状態変化が起きたときに初めて効果が現れます。生成したコードを実際の要素に適用し、hoverなどのトリガーと組み合わせて確認してください。