CSS Box Shadow生成

// CSS Box Shadow生成に関するよくある質問

box-shadowの各パラメータの意味は？

**X**: 影の水平方向の位置（プラスで右、マイナスで左）。**Y**: 垂直方向の位置（プラスで下、マイナスで上）。**Blur（ぼかし）**: 影の境界をどれだけふわっとさせるか。**Spread（拡張）**: 影のサイズを広げるか縮めるか。**Color**: 影の色。**Alpha**: 影の透明度。**inset**: 有効にすると影が要素の内側に描画されます（凹んだ表現用）。

どんな時に複数レイヤーを使うと良い？

1つの影だけだと平坦な印象になりがちなときに、複数レイヤーで奥行きを出せます。「小さくて濃い近影＋大きくて薄い遠影」の組み合わせは、Material Design 等でも定番のテクニックです。カード UI・モーダル・ボタンのホバー効果などで立体感を出したいときに効果的で、モダンなWebサイトでよく使われています。

生成したCSSはどのブラウザで動きますか？

Chrome・Firefox・Safari・Edge の主要モダンブラウザすべてで問題なく動作します。ベンダープレフィックス（`-webkit-` 等）は不要です。IE11 は基本サポート、insetや複数レイヤーも動きます。実用上、ブラウザ互換を心配することはほぼありません。

insetってどんな時に使う？

要素の内側に影を落としたいときに使います。例えば「押し込まれたボタン」「凹んだテキスト入力欄」「印刷物のような窪み表現」などのUIに向いています。通常のbox-shadowと組み合わせることで「押した瞬間」「無効化状態」の視覚表現にも活用できます。

透明度（Alpha）はどう活用するの？

Alpha を下げると影が薄く柔らかくなり、上げると濃くくっきりします。実際の物理的な影はほとんどが半透明なので、Alpha を 10〜30% 程度に抑えると自然な見た目になります。Alpha 100% の真っ黒な影は不自然に見えるので、微調整の価値大です。

どんなプリセットが用意されていますか？

**SOFT**: ふんわり柔らかい影（カード用）、**HARD**: 濃くくっきりした影（レトロ風）、**NEON**: 発光エフェクト（サイバー系）、**LAYERED**: 多層の奥行き影（Material 風）、**INSET**: 内側の凹み表現、**RETRO**: 昔のUI風。プリセットを起点にカスタムするのが速いです。

影の色は透明にできますか？

色を選ぶと同時にAlpha（透明度）を下げれば半透明の影になります。色付きの影（青い影・ピンクの影等）を薄く重ねると、ネオン風の発光エフェクトが作れます。カラーピッカーで色相を変えて、Alpha 30-50% あたりに調整するのが定番テクニックです。

影を要素からはみ出さないようにできますか？

親要素に `overflow: hidden;` を設定すると、影がはみ出さなくなります（親要素の境界でカットされる）。ただし影の演出は要素からはみ出してこそ立体感が出るので、通常は overflow を設定しない方が自然です。カード内でだけ影を見せたい場合など、用途に応じて調整してください。

生成したCSSはそのままコピペで使えますか？

はい、COPYボタンでクリップボードにコピーして、そのままCSSファイルの `.my-button { ... }` の中に貼り付けられます。プロパティ名は `box-shadow:` として出力されるので、既存のスタイルシートにすぐ統合できます。

モバイル表示のパフォーマンスは大丈夫？

通常の使い方（1〜3レイヤー、適度なぼかし）なら全く問題ありません。ただし影の数を10個以上重ねたり、極端に大きなぼかし値（100px以上）を使うと、スマホの低スペック機ではスクロールがカクつく可能性があります。実機テストで確認するのが確実です。