CSSジェネレーターの概要
CSSジェネレーターは、Webデザインで頻繁に使う box-shadow（影）、border-radius（角丸）、gradient（グラデーション）、text-shadow（文字の影）の4つのCSSプロパティを、スライダーとカラーピッカーを操作するだけで視覚的に生成できるツールです。プレビューエリアで結果を確認しながら、最終的なCSSコードをワンクリックでコピーできます。CSSの値（px、deg、rgba等）を毎回手書きする必要がなく、デザイナーや初学者にとって学習コストの高いプロパティでも素早く試行錯誤ができます。すべての処理はブラウザで完結します。
対応プロパティ一覧
| プロパティ | 役割 | 主な調整項目 |
|---|---|---|
| box-shadow | 要素にドロップシャドウや内側影をつける | X/Yオフセット・ぼかし・広がり・色・不透明度・inset |
| border-radius | 要素の角を丸くする | 全体一括／四隅個別（左上・右上・右下・左下） |
| gradient | 背景にグラデーションを敷く | linear / radial・方向（角度）・2色の選択 |
| text-shadow | テキストに影をつける | X/Yオフセット・ぼかし・色・不透明度 |
使い方の流れ
- 画面上部のタブから生成したいCSSプロパティ（box-shadow / border-radius / gradient / text-shadow）を選択します。
- 各スライダーを動かすと、プレビューエリアに即座に結果が反映されます。値はスライダー横に数値で表示されるため、後から微調整しやすくなっています。
- カラーピッカーをクリックすると、HSL/RGB/16進数で色を指定できます。box-shadowとtext-shadowは透明度（アルファ値）も0〜100%で個別に調整可能です。
- 「CSSコード」欄に、現在の状態に対応するCSSが自動生成されます。例：
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.25); - 「CSSをコピー」ボタンを押すとクリップボードに転送されます。お使いのstyle.cssやインラインstyle、TailwindのCustom CSSにそのまま貼り付けてください。「リセット」で初期状態に戻せます。
こんな場面で使う
- カードUIの影調整：Material Design風の浮き上がるカードや、繊細な内側影（inset）を試行錯誤しながら作れます。スライダーで微調整するため、ピクセル単位で好みの影を作れます。
- ボタン・タグのデザイン：border-radiusとbox-shadowを組み合わせて、ホバー時のリッチな見た目を作る下調べに最適です。
- ヒーローセクションの背景：linear-gradientで2色のグラデーション背景を作り、ランディングページのファーストビュー用ビジュアルとして使えます。
- 見出し・キャッチコピーの装飾：text-shadowで文字に立体感や奥行きをつけられます。古典的な「凹みデザイン」「ネオン風」も実現できます。
- アバター・サムネイルの角丸：border-radiusの四隅個別指定で、ユニークな形状（ティアドロップ型・葉っぱ型）も作れます。100%に設定すれば完全な円になります。
使う前に知っておきたい注意点
- 本ツールが生成するCSSはモダンブラウザ（Chrome、Firefox、Safari、Edge）すべてに対応しており、ベンダープレフィックス（-webkit-、-moz-）は不要です。古いIE11以前への対応が必要な場合は、別途プレフィックスを手動追加してください。
- box-shadowは要素の外側に描画されるため、overflow: hiddenの親要素内では切り取られて見えなくなる場合があります。レイアウトに合わせて確認してください。
- 強い影や派手なグラデーションは、サイト全体のトーンを崩しがちです。実装後はモバイル端末（Safari iOS、Chrome Android）でも確認することを推奨します。
- linear-gradientの方向角は「0deg＝下から上、90deg＝左から右、180deg＝上から下、270deg＝右から左」と覚えると便利です。CSS仕様では時計回りの回転です。
- 複数の影を重ねたい場合（多重シャドウ）、本ツールは1つの影のみ対応です。複数指定が必要な場合は、コピー後に
box-shadow: A, B, C;のようにカンマ区切りで手動結合してください。
用語の補足
- inset（内側の影）：通常のbox-shadowは外側に影を描画しますが、insetを付けると要素の内側に影が入り、凹んだような見た目になります。フォーム枠や押し込み風ボタンの表現に使われます。
- linear-gradient / radial-gradient：linearは直線方向のグラデーション、radialは中心から放射状に広がるグラデーション。同じ色の組み合わせでもタイプを変えると印象が大きく変わります。
- spread（広がり）：box-shadow独自のパラメータで、影を上下左右に拡張する量を指定します。プラスで影が大きく、マイナスで小さく見えます。
