SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのbox-shadowの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:31動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、ボックスシャドウです。
  4. 0:07これは要素に影を付けるプロパティで、カードやボタンが背景から少し浮き上がって見える、
  5. 0:12あの効果を作ります。
  6. 0:16影は見た目だけの装飾で、要素自体の大きさは変えません。
  7. 0:21この動画では、基本の書き方から、値の読み方、インセットを使った内側の影、
  8. 0:26そして効かないときの確認までを順番に見ていきます。
  9. 0:32外側にふわりと落ちる影と、内側に線のように入る影、この二つを比べて違いを掴みましょう。
  10. 0:39まず基本の書き方です。
  11. 0:41スライドのように、対象のクラスにボックスシャドウと書き、コロンのあとに値を並べ、
  12. 0:46最後にセミコロンを付けます。
  13. 0:50例では、ゼロ、八ピクセル、二十ピクセル、そして色、という順番で書いています。
  14. 0:57これは、横にずらさず、下に八ピクセルずらし、二十ピクセルぼかして、半透明の濃い色で影を付ける、
  15. 1:02という意味です。
  16. 1:06数字が並ぶので最初は戸惑いますが、順番のパターンは決まっています。
  17. 1:12まずはこの一行をそのまま書いて、ブラウザーで影が付くことを確認しましょう。
  18. 1:18値の読み方を詳しく見ましょう。
  19. 1:21ボックスシャドウの値は、左から順に役割が決まっています。
  20. 1:26一つ目は横方向のずれで、プラスなら右へ、マイナスなら左へ影がずれます。
  21. 1:32二つ目は縦方向のずれで、プラスなら下へずれます。
  22. 1:36三つ目はぼかしの大きさで、数値が大きいほど影の輪郭が柔らかくなります。
  23. 1:43四つ目は広がりで、影そのものを太くしたり細くしたりできます。
  24. 1:48四つ目は省略でき、色も最後に書きます。
  25. 1:52例の色は八桁のカラーコードで、最後の二桁が透明度を表しています。
  26. 1:57薄くしたいときは、この透明度を調整するのがコツです。
  27. 2:02続いて、インセットと複数の影です。
  28. 2:05値の先頭にインセットと書くと、影は外側ではなく要素の内側に付きます。
  29. 2:11ぼかしをゼロにして広がりを三ピクセルにすると、内側に細い線が引かれたような見た目になり、
  30. 2:16枠線の代わりのような表現もできます。
  31. 2:21さらに、影はカンマで区切って複数重ねることもできます。
  32. 2:26例えば、近くに濃い影と、遠くに薄く広い影を重ねると、より自然で立体感のある影になります。
  33. 2:34実務でも、この二重の影はカードのデザインでよく使われます。
  34. 2:39順番は手前から奥へ、最初に書いた影が一番手前に描かれます。
  35. 2:44初期値と継承を確認します。
  36. 2:46ボックスシャドウの初期値はノーンで、影は付きません。
  37. 2:49そして、このプロパティは通常、親から子へ継承しません。
  38. 2:53親のカードに影を付けても、中の見出しや文章に自動で影が付くわけではないのです。
  39. 2:59共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のノーンに戻す指定です。
  40. 3:06アンセットは、継承しない項目なのでイニシャルとして扱われます。
  41. 3:10リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。
  42. 3:16仕様上の初期値と、ブラウザーの既定で見えている値が同じとは限らない点にも注意しましょう。
  43. 3:22ここからは実例です。
  44. 3:24エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  45. 3:31中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  46. 3:38頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  47. 3:43親のステージがあることで、箱の周りに影がどう広がるかを見分けやすくなります。
  48. 3:49この土台の上に、最後のボックスシャドウの行だけを切り替えて比べるのが、この実例の進め方です。
  49. 3:56値以外の条件をそろえることで、違いの原因がはっきりします。
  50. 4:01土台のシーエスエスの続きです。
  51. 4:03全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。
  52. 4:10デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。
  53. 4:18この時点では、箱に影はまだ付いていません。
  54. 4:21ここに最後の行として、外側の影を加えることで、箱が浮き上がって見えるようになります。
  55. 4:28土台と変更行を分けて書くのが、原因を追いやすくするコツです。
  56. 4:33まずは土台だけを表示して、影のない通常の見え方を確認しておきましょう。
  57. 4:39では比較です。
  58. 4:40最初は外側の影を指定します。
  59. 4:42下に八ピクセルずれて二十ピクセルぼけるので、箱の下側に柔らかい影が落ち、
  60. 4:46浮き上がって見えます。
  61. 4:50次に、最後の行の値だけをインセットの指定に置き換えてみましょう。
  62. 4:55他の指定はすべて同じです。
  63. 4:57今度は外に影は出ず、箱の内側の縁に沿って三ピクセルの線状の影が入ります。
  64. 5:03変わったのは影の付き方だけ、親の幅や文章そのものは同じ、という点に注目してください。
  65. 5:10変更後はファイルを保存して、ブラウザーを再読み込みして確認しましょう。
  66. 5:15内と外で印象が大きく変わるのが分かります。
  67. 5:19使う場面と注意点です。
  68. 5:20ボックスシャドウの影は、レイアウトの寸法を増やしません。
  69. 5:25つまり、大きな影を付けても周りの要素が押しのけられることはなく、近くの要素に影が重なって見える場合があります。
  70. 5:33余白を確保したいときは、マージンなどもあわせて調整しましょう。
  71. 5:37また大切な注意として、入力欄の境界などを影だけで表すのは避けましょう。
  72. 5:43強制色モードや高コントラスト表示では影が見えなくなり、境界が分からなくなる場合があるからです。
  73. 5:50区切りが重要な場所では、ボーダーなど枠線も併用するのが安全です。
  74. 5:54影はあくまで装飾と捉え、情報の伝達は別の手段でも担保しましょう。
  75. 5:59効かないと感じたときは、まず書き方を確認しましょう。
  76. 6:03ボックスシャドウは値の順番が決まっているため、色を先頭に書いたり、長さの単位を書き漏らしたりすると、
  77. 6:08宣言全体が無効になることがあります。
  78. 6:13色だけを書いても影にはなりません。
  79. 6:15また、ノーンを指定する別の宣言や、詳細度の高い後からの宣言に上書きされていないかも見てください。
  80. 6:22続いて開発者ツールで調べます。
  81. 6:24ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
  82. 6:31スタイルズで宣言が無効扱いになっていないかを確認し、最後にコンピューテッドで最終的な値を確認します。
  83. 6:38三百二十ピクセル程度の狭い画面でも確認しましょう。
  84. 6:42最後に互換性とまとめです。
  85. 6:44ボックスシャドウは、クローム十以降、エッジ十二以降、ファイアフォックス四以降、
  86. 6:51サファリ五点一以降と、主要ブラウザーで長く対応しており、現代の制作では安心して使えます。
  87. 6:57まとめます。
  88. 6:58ボックスシャドウは要素に影を付けるプロパティで、横ずれ、縦ずれ、ぼかし、
  89. 7:05広がり、色の順に書き、インセットで内側、カンマで複数指定ができ、初期値はノーンで継承はしませんでした。
  90. 7:12練習として、ずれやぼかしの数字を一つずつ変えて結果を比べ、外側の影と内側の線状の影の違いを言葉で説明してみてください。
  91. 7:22関連するボーダーレイディアスやアウトラインも学ぶと、箱の装飾が一通りできるようになります。
  92. 7:29お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

box-shadowの役割と主な指定値を解説。外側の影と内側の線状の影を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのbox-shadowの使い方：指定値・実例・効かない原因とブラウザー互換性 →