【CSS】 box-shadowの使い方、下だけ、上だけ、内側など色々な影のつけ方、ジェネレーターなども解説｜HTML＆CSS入門講座（24）

目　次

【CSS】 box-shadowの使い方、下だけ、上だけ、内側など色々な影のつけ方、ジェネレーターなども解説｜HTML＆CSS入門講座（24）のPodcast
はじめに：影がデザインを変える！
基本をマスター：box-shadowの「6つの値」を理解しよう
1. 基本の構文
【応用編1】特定の方向だけに影をつける魔法
1. 「下だけ」に影を出すテクニック
2. 枠線（ボーダー）として使う
【応用編2】「内側」の影（inset）で質感を出す
1. 押し込まれたボタン
2. 入力フォーム
最新トレンドをチェック！オシャレな影のレシピ
1. 滑らかな影（マルチレイヤー・シャドウ）
2. ニューモーフィズムとグラスモーフィズム
もっと楽に！おすすめの「影ジェネレーター」
プロの知恵：パフォーマンスとアクセシビリティ
1. アニメーションのコツ
2. 誰もが使いやすいデザインに
まとめ
参考資料

【CSS】 box-shadowの使い方、下だけ、上だけ、内側など色々な影のつけ方、ジェネレーターなども解説｜HTML＆CSS入門講座（24）のPodcast

下記のPodcastは、Geminiで作成しました。

こんにちは！HTMLやCSSを学び始めたばかりの皆さん、Webサイトを見ていて「このボタン、立体感があって押しやすそうだな」「このカード、ふわっと浮いていてオシャレだな」と感じたことはありませんか？その魔法の正体、実はCSSのbox-shadowというプロパティなんです。影をマスターすると、平面的な画面に「奥行き」や「質感」を与えることができ、ユーザーにとって直感的で使いやすいデザインを作れるようになります。今回は、初心者の方でも今日から使いこなせるように、基本から応用テクニック、さらには便利なツールまで、丁寧に解説していきますね！

はじめに：影がデザインを変える！

Webデザインにおいて、影は単なる飾りではありません。影があることで、「どの要素が手前にあり、どの要素が奥にあるのか」という視覚的な優先順位（階層構造）がはっきりします。これにより、ユーザーは「ここはクリックできそう」といった情報を瞬時に理解できるのです。

基本をマスター：box-shadowの「6つの値」を理解しよう

まずは基本の書き方を覚えましょう。box-shadowプロパティは、最大で6つの値を指定できます。

基本の構文

CSS

`box-shadow: [水平オフセット][垂直オフセット][ぼかし半径][拡散半径][色][inset];`

例えば、`box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);` と書くと、どのような影になるか一つずつ見ていきましょう。

指定する順番	パラメータ名	役割	詳しく解説
1	水平オフセット	左右の位置	正の数で右、負の数で左に影が動きます。
2	垂直オフセット	上下の位置	正の数で下、負の数で上に影が動きます。
3	ぼかし半径	影のボケ具合	数値が大きいほど影が淡く広がります。0だとクッキリした影になります。
4	拡散半径	影のサイズ	影そのものを大きく（正の数）したり小さく（負の数）したりします。
5	色	影の色	rgba()を使って透明度を指定するのが、自然な影を作るコツです。
6	内側 (inset)	影の方向	これを指定すると、影が要素の「内側」に表示されます。

ポイント： border-radius（角丸）が指定されている場合、影も自動的にその丸みに合わせてくれます。とってもお利口なプロパティですね。

【応用編1】特定の方向だけに影をつける魔法

「下側だけに影を出したいのに、ぼかしを入れると横からも影がはみ出してしまう……」そんな悩みを解決するのが、4番目の値「拡散半径」のマイナス指定です！

「下だけ」に影を出すテクニック

影を垂直方向にずらし（例: 10px）、ぼかしを入れた後、拡散半径に負の値（例: -5px）を入れます。

CSS

`box-shadow: 0 10px 10px -5px rgba(0,0,0,0.5);`

こうすることで、影全体が一度ギュッと内側に縮小され、そこから下方向だけに押し出されるため、左右への影の漏れを防ぐことができるのです。

枠線（ボーダー）として使う

オフセットとぼかしをすべて「0」にして、拡散半径だけを指定すると、レイアウトを崩さない「第二の枠線」として活用できます。

CSS

`box-shadow: 0 0 0 3px #3498db;`

これは、要素のサイズ（widthやheight）に影響を与えないため、フォーカス状態の強調などに非常に便利です。

【応用編2】「内側」の影（inset）で質感を出す

値の最後に inset というキーワードを付け加えると、影が内側に落ちるようになります。これを使うと、要素が「凹んでいる」ような表現が可能です。

押し込まれたボタン

ホバー時やクリック時に inset を使うと、ボタンが実際に押されたようなリアリティが出ます。

入力フォーム

テキストボックスの上部内側に薄く影を入れると、画面に深く埋め込まれているような高級感を演出できます。

もっと楽に！おすすめの「影ジェネレーター」

4選手書きで数値を調整するのは大変ですよね。そんな時は、ブラウザ上で見た目を確認しながらコードを作れるジェネレーターを使いましょう。

MDN Box-shadow Generator: 基本を学びながら影を作れる、公式に近い安心ツールです。

Shadows (by Joe Czubiak): 複数の影を重ねる「プロ仕様」の滑らかな影が簡単に作れます。

Neumorphism.io: ニューモーフィズム専用のジェネレーター。色の調整が非常にスムーズです。

css.glass: グラスモーフィズムに特化したツールで、ぼかし具合も自由自在です。

プロの知恵：パフォーマンスとアクセシビリティ

最後に、少しだけ高度な話をします。

アニメーションのコツ

ボタンをホバーした時に影をふわっと動かしたい場合、直接 box-shadow の数値を動かすと、ブラウザの計算負荷が高くなり動作がカクつくことがあります。

おすすめは、影をあらかじめ「擬似要素（::afterなど）」に作っておき、その「不透明度（opacity）」だけを変化させる手法です。これだけで驚くほどスムーズに動くようになりますよ。

誰もが使いやすいデザインに

Windowsの「ハイコントラストモード」などの特殊な設定を使っているユーザーには、box-shadow が表示されないことがあります。影だけで「選択中」などの重要な状態を伝えないよう、outline（外枠線）なども併用して、誰もが情報を正しく受け取れるようにしましょう。

まとめ

box-shadow は、ただの「影」ではありません。Webサイトに命を吹き込み、ユーザーを導くための強力なコミュニケーションツールです。

基本の6つの値を理解する

負の拡散半径で特定方向だけ影を出す

insetで凹みを表現する

複数レイヤーで滑らかさを追求する

ジェネレーターを賢く使う

これらを意識するだけで、あなたのWebデザインは格段にレベルアップします。ぜひ、自分のプロジェクトで色々な影を試してみてくださいね！影を操る魔法を身につけて、素敵なWebサイトを作っていきましょう。

参考資料

1. box-shadow - CSS: カスケーディングスタイルシート | MDN, https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/box-shadow

2. box-shadowの基本から応用まで！CSSで影をつける方法を徹底解説, https://groworks.jp/blog/5771

3. CSS Box-Shadow Generator - Shadows, https://shadows.joeczubiak.com/

4. 高度なスタイリング効果 - ウェブ開発を学ぶ | MDN, https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects

5. 【CSS】box-shadowの使い方：色の指定・内側・複数・下だけなど, https://saruwakakun.com/html-css/basic/box-shadow

6. box-shadowを使って要素に影を付ける方法【CSS】, https://web.runland.co.jp/frontend/post-2755

7. A Deep Dive into the CSS box-shadow Property, https://blog.logrocket.com/box-shadow-css/

8. How to Animate CSS Box Shadows Without Reducing Performance, https://www.sitepoint.com/css-box-shadow-animation-performance/

9. Neumorphism CSS shadow generator, https://neumorphism.io/

10. ハイコントラストモードでbox-shadowが表示されない問題, https://azukiazusa.dev/blog/box-shadow-focus-ring-not-visible-in-high-contrast-mode/

11. CSSのbox-shadowプロパティの使い方を徹底解説！, https://haniwaman.com/css-box-shadow/

12. Neumorphism (Soft UI) and CSS, https://css-tricks.com/neumorphism-and-css/

13. 【CSS】box-shadowとfilter: drop-shadowの違いと使い分け, https://turicco.com/drop-shadow/

14. Glassmorphism CSS Effect Generator - Glass CSS, https://css.glass/

15. Box-shadow generator - CSS: カスケーディングスタイルシート | MDN, https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator