ボックスシャドウ
ボックス設定
350px
150px
20px
ボーダー設定
1px
テキスト設定
24px
0px
ボックスシャドウ設定
シャドウ #1
0px
5px
10px
2px
CSS 出力
ボックスシャドウジェネレーターの使い方ガイド
1. プレビュー背景の設定
最初に、ボックスシャドウの効果を確認しやすいように、プレビュー領域の背景を設定します。
- 「明るめ」ボタンで白系の背景色を選択（デフォルト）
- 「暗め」ボタンで暗い背景色に切り替え
- 「色指定」ボタンでカスタム背景色を選択可能
2. ボックス設定のカスタマイズ
ボックスの基本的な外観を調整します。シャドウ効果を適用する要素の見た目を整えましょう。
- 幅・高さ：スライダーを動かしてボックスのサイズを調整
- 背景色：カラーピッカーでボックスの塗りつぶし色を選択
- 角丸：ボックスの角の丸みを調整（0〜100pxの範囲）
- ボーダー設定：太さ、スタイル、色を調整してボックスの縁取りをカスタマイズ
- テキスト設定：フォント種類、サイズ、色、間隔などを調整して表示テキストをカスタマイズ
3. シャドウ効果の作成
ボックスシャドウの見た目を詳細に調整します。複数のシャドウを重ねることで、より複雑で美しい効果を生み出せます。
- 内側/外側：「内側の影」チェックボックスをオンにすると、ボックスの内側に影が表示されます（inset効果）
- 水平・垂直位置：影の表示位置を調整（正の値で右/下方向、負の値で左/上方向）
- ぼかし：影のぼかし効果の強さを調整（値が大きいほどぼかしが強くなります）
- 広がり：影の広がり範囲を調整（正の値で大きく、負の値で小さく）
- 色と透明度：影の色と透明度を調整
- 「新しいシャドウを追加」ボタンで複数のシャドウを重ねて複雑な効果を作成可能
4. CSS出力の取得
作成したボックスシャドウのCSSコードを取得して、あなたのウェブサイトに実装します。
- 「完全なCSS」タブ：ボックスとシャドウの完全なCSSコードを表示
- 「box-shadowのみ」タブ：box-shadowプロパティのみを表示
- 「HTML」タブ：実装に必要なHTMLコードを表示
- 各タブの下部にある「コピー」ボタンでクリップボードにコードをコピー
- コピーしたコードはあなたのサイトのCSSファイルに貼り付けるだけで有効になります
5. 実用的なテクニック
効果的なボックスシャドウを作るためのプロのテクニックを活用しましょう。
- 階層の表現：異なる強さのシャドウを使い分けることで、UI要素に立体感を与えられます
- マテリアルデザイン風の影：複数のシャドウを重ねて自然な陰影を表現
- 光沢効果：内側と外側の影を組み合わせて光沢感を演出
- ネオンエフェクト：同じ色の影を複数重ねて光る効果を作成
- レスポンシブ対応：メディアクエリを使用して、デバイスに応じてシャドウサイズを調整
- 動的効果：hover時などにシャドウを変化させてインタラクティブ性を向上
