WEBVTT

1
00:00:00.000 --> 00:00:01.054
こんにちは。

2
00:00:01.054 --> 00:00:04.216
シーエスエス、リファレンス解説です。

3
00:00:04.216 --> 00:00:07.554
今回のテーマは、ボックスシャドウです。

4
00:00:07.554 --> 00:00:12.121
これは要素に影を付けるプロパティで、カードやボタンが背景から少し浮き上がって見える、

5
00:00:12.121 --> 00:00:16.688
あの効果を作ります。

6
00:00:16.688 --> 00:00:21.431
影は見た目だけの装飾で、要素自体の大きさは変えません。

7
00:00:21.431 --> 00:00:26.789
この動画では、基本の書き方から、値の読み方、インセットを使った内側の影、

8
00:00:26.789 --> 00:00:32.146
そして効かないときの確認までを順番に見ていきます。

9
00:00:32.146 --> 00:00:39.700
外側にふわりと落ちる影と、内側に線のように入る影、この二つを比べて違いを掴みましょう。

10
00:00:39.700 --> 00:00:41.583
まず基本の書き方です。

11
00:00:41.583 --> 00:00:46.205
スライドのように、対象のクラスにボックスシャドウと書き、コロンのあとに値を並べ、

12
00:00:46.205 --> 00:00:50.826
最後にセミコロンを付けます。

13
00:00:50.826 --> 00:00:57.331
例では、ゼロ、八ピクセル、二十ピクセル、そして色、という順番で書いています。

14
00:00:57.331 --> 00:01:02.038
これは、横にずらさず、下に八ピクセルずらし、二十ピクセルぼかして、半透明の濃い色で影を付ける、

15
00:01:02.038 --> 00:01:06.746
という意味です。

16
00:01:06.746 --> 00:01:12.395
数字が並ぶので最初は戸惑いますが、順番のパターンは決まっています。

17
00:01:12.395 --> 00:01:18.728
まずはこの一行をそのまま書いて、ブラウザーで影が付くことを確認しましょう。

18
00:01:18.728 --> 00:01:21.412
値の読み方を詳しく見ましょう。

19
00:01:21.412 --> 00:01:26.422
ボックスシャドウの値は、左から順に役割が決まっています。

20
00:01:26.422 --> 00:01:32.685
一つ目は横方向のずれで、プラスなら右へ、マイナスなら左へ影がずれます。

21
00:01:32.685 --> 00:01:36.979
二つ目は縦方向のずれで、プラスなら下へずれます。

22
00:01:36.979 --> 00:01:43.242
三つ目はぼかしの大きさで、数値が大きいほど影の輪郭が柔らかくなります。

23
00:01:43.242 --> 00:01:48.610
四つ目は広がりで、影そのものを太くしたり細くしたりできます。

24
00:01:48.610 --> 00:01:52.010
四つ目は省略でき、色も最後に書きます。

25
00:01:52.010 --> 00:01:57.736
例の色は八桁のカラーコードで、最後の二桁が透明度を表しています。

26
00:01:57.736 --> 00:02:02.388
薄くしたいときは、この透明度を調整するのがコツです。

27
00:02:02.388 --> 00:02:05.337
続いて、インセットと複数の影です。

28
00:02:05.337 --> 00:02:11.235
値の先頭にインセットと書くと、影は外側ではなく要素の内側に付きます。

29
00:02:11.235 --> 00:02:16.613
ぼかしをゼロにして広がりを三ピクセルにすると、内側に細い線が引かれたような見た目になり、

30
00:02:16.613 --> 00:02:21.990
枠線の代わりのような表現もできます。

31
00:02:21.990 --> 00:02:26.674
さらに、影はカンマで区切って複数重ねることもできます。

32
00:02:26.674 --> 00:02:34.307
例えば、近くに濃い影と、遠くに薄く広い影を重ねると、より自然で立体感のある影になります。

33
00:02:34.307 --> 00:02:39.337
実務でも、この二重の影はカードのデザインでよく使われます。

34
00:02:39.337 --> 00:02:44.368
順番は手前から奥へ、最初に書いた影が一番手前に描かれます。

35
00:02:44.368 --> 00:02:46.225
初期値と継承を確認します。

36
00:02:46.225 --> 00:02:49.939
ボックスシャドウの初期値はノーンで、影は付きません。

37
00:02:49.939 --> 00:02:53.796
そして、このプロパティは通常、親から子へ継承しません。

38
00:02:53.796 --> 00:02:59.368
親のカードに影を付けても、中の見出しや文章に自動で影が付くわけではないのです。

39
00:02:59.368 --> 00:03:06.082
共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のノーンに戻す指定です。

40
00:03:06.082 --> 00:03:10.510
アンセットは、継承しない項目なのでイニシャルとして扱われます。

41
00:03:10.510 --> 00:03:16.510
リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。

42
00:03:16.510 --> 00:03:22.796
仕様上の初期値と、ブラウザーの既定で見えている値が同じとは限らない点にも注意しましょう。

43
00:03:22.796 --> 00:03:24.344
ここからは実例です。

44
00:03:24.344 --> 00:03:31.462
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

45
00:03:31.462 --> 00:03:38.272
中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。

46
00:03:38.272 --> 00:03:43.688
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

47
00:03:43.688 --> 00:03:49.569
親のステージがあることで、箱の周りに影がどう広がるかを見分けやすくなります。

48
00:03:49.569 --> 00:03:56.688
この土台の上に、最後のボックスシャドウの行だけを切り替えて比べるのが、この実例の進め方です。

49
00:03:56.688 --> 00:04:01.176
値以外の条件をそろえることで、違いの原因がはっきりします。

50
00:04:01.176 --> 00:04:03.592
土台のシーエスエスの続きです。

51
00:04:03.592 --> 00:04:10.679
全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。

52
00:04:10.679 --> 00:04:18.411
デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。

53
00:04:18.411 --> 00:04:21.793
この時点では、箱に影はまだ付いていません。

54
00:04:21.793 --> 00:04:28.558
ここに最後の行として、外側の影を加えることで、箱が浮き上がって見えるようになります。

55
00:04:28.558 --> 00:04:33.390
土台と変更行を分けて書くのが、原因を追いやすくするコツです。

56
00:04:33.390 --> 00:04:39.028
まずは土台だけを表示して、影のない通常の見え方を確認しておきましょう。

57
00:04:39.028 --> 00:04:40.170
では比較です。

58
00:04:40.170 --> 00:04:42.454
最初は外側の影を指定します。

59
00:04:42.454 --> 00:04:46.289
下に八ピクセルずれて二十ピクセルぼけるので、箱の下側に柔らかい影が落ち、

60
00:04:46.289 --> 00:04:50.123
浮き上がって見えます。

61
00:04:50.123 --> 00:04:55.344
次に、最後の行の値だけをインセットの指定に置き換えてみましょう。

62
00:04:55.344 --> 00:04:57.465
他の指定はすべて同じです。

63
00:04:57.465 --> 00:05:03.339
今度は外に影は出ず、箱の内側の縁に沿って三ピクセルの線状の影が入ります。

64
00:05:03.339 --> 00:05:10.191
変わったのは影の付き方だけ、親の幅や文章そのものは同じ、という点に注目してください。

65
00:05:10.191 --> 00:05:15.902
変更後はファイルを保存して、ブラウザーを再読み込みして確認しましょう。

66
00:05:15.902 --> 00:05:19.328
内と外で印象が大きく変わるのが分かります。

67
00:05:19.328 --> 00:05:20.969
使う場面と注意点です。

68
00:05:20.969 --> 00:05:25.145
ボックスシャドウの影は、レイアウトの寸法を増やしません。

69
00:05:25.145 --> 00:05:33.348
つまり、大きな影を付けても周りの要素が押しのけられることはなく、近くの要素に影が重なって見える場合があります。

70
00:05:33.348 --> 00:05:37.972
余白を確保したいときは、マージンなどもあわせて調整しましょう。

71
00:05:37.972 --> 00:05:43.192
また大切な注意として、入力欄の境界などを影だけで表すのは避けましょう。

72
00:05:43.192 --> 00:05:50.202
強制色モードや高コントラスト表示では影が見えなくなり、境界が分からなくなる場合があるからです。

73
00:05:50.202 --> 00:05:54.975
区切りが重要な場所では、ボーダーなど枠線も併用するのが安全です。

74
00:05:54.975 --> 00:05:59.748
影はあくまで装飾と捉え、情報の伝達は別の手段でも担保しましょう。

75
00:05:59.748 --> 00:06:03.484
効かないと感じたときは、まず書き方を確認しましょう。

76
00:06:03.484 --> 00:06:08.369
ボックスシャドウは値の順番が決まっているため、色を先頭に書いたり、長さの単位を書き漏らしたりすると、

77
00:06:08.369 --> 00:06:13.255
宣言全体が無効になることがあります。

78
00:06:13.255 --> 00:06:15.698
色だけを書いても影にはなりません。

79
00:06:15.698 --> 00:06:22.595
また、ノーンを指定する別の宣言や、詳細度の高い後からの宣言に上書きされていないかも見てください。

80
00:06:22.595 --> 00:06:24.750
続いて開発者ツールで調べます。

81
00:06:24.750 --> 00:06:31.791
ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、

82
00:06:31.791 --> 00:06:38.832
スタイルズで宣言が無効扱いになっていないかを確認し、最後にコンピューテッドで最終的な値を確認します。

83
00:06:38.832 --> 00:06:42.424
三百二十ピクセル程度の狭い画面でも確認しましょう。

84
00:06:42.424 --> 00:06:44.526
最後に互換性とまとめです。

85
00:06:44.526 --> 00:06:51.234
ボックスシャドウは、クローム十以降、エッジ十二以降、ファイアフォックス四以降、

86
00:06:51.234 --> 00:06:57.943
サファリ五点一以降と、主要ブラウザーで長く対応しており、現代の制作では安心して使えます。

87
00:06:57.943 --> 00:06:58.913
まとめます。

88
00:06:58.913 --> 00:07:05.945
ボックスシャドウは要素に影を付けるプロパティで、横ずれ、縦ずれ、ぼかし、

89
00:07:05.945 --> 00:07:12.977
広がり、色の順に書き、インセットで内側、カンマで複数指定ができ、初期値はノーンで継承はしませんでした。

90
00:07:12.977 --> 00:07:22.515
練習として、ずれやぼかしの数字を一つずつ変えて結果を比べ、外側の影と内側の線状の影の違いを言葉で説明してみてください。

91
00:07:22.515 --> 00:07:29.789
関連するボーダーレイディアスやアウトラインも学ぶと、箱の装飾が一通りできるようになります。

92
00:07:29.789 --> 00:07:31.244
お疲れさまでした。