WEBVTT

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

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

3
00:00:03.445 --> 00:00:06.602
今回のテーマは、アウトラインオフセットです。

4
00:00:06.602 --> 00:00:11.052
これは、要素の周りに描かれる輪郭線、いわゆるアウトラインと、要素の枠との間に、

5
00:00:11.052 --> 00:00:15.501
どれだけ隙間を空けるかを決めるプロパティです。

6
00:00:15.501 --> 00:00:19.735
線の色や太さを決めるのはアウトラインの役割で、アウトラインオフセットは、

7
00:00:19.735 --> 00:00:23.969
その線を枠からどれだけ離すかだけを担当します。

8
00:00:23.969 --> 00:00:28.490
この動画では、基本の書き方、正と負の値の違い、フォーカス表示での大切な役割、

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

10
00:00:33.012 --> 00:00:37.820
身近な例では、ボタンやリンクを選んだときに周りに現れる四角い線が輪郭線で、

11
00:00:37.820 --> 00:00:42.628
その線と要素との間隔を調整するのがこのプロパティの仕事です。

12
00:00:42.628 --> 00:00:44.200
まず基本の書き方です。

13
00:00:44.200 --> 00:00:51.204
対象のクラスにアウトラインオフセットと書き、コロンのあとに長さを書き、最後にセミコロンを付けます。

14
00:00:51.204 --> 00:00:53.634
例では六ピクセルを指定しています。

15
00:00:53.634 --> 00:00:58.923
ここで大切なのは、アウトラインオフセットは単独では使わない、という点です。

16
00:00:58.923 --> 00:01:03.139
もとの輪郭線であるアウトラインが設定されていなければ、距離を指定しても線自体が存在しないので、

17
00:01:03.139 --> 00:01:07.356
画面には何も現れません。

18
00:01:07.356 --> 00:01:14.360
まずはアウトラインで線を用意し、そのうえでオフセットで距離を調整する、という順番を覚えてください。

19
00:01:14.360 --> 00:01:16.110
値の読み方を見ましょう。

20
00:01:16.110 --> 00:01:18.589
指定できるのは長さが一つだけです。

21
00:01:18.589 --> 00:01:22.089
プラスの値を書くと、輪郭線は枠の外側へ離れます。

22
00:01:22.089 --> 00:01:26.026
六ピクセルなら、枠から六ピクセル外側に線が描かれます。

23
00:01:26.026 --> 00:01:29.963
ゼロは初期の状態で、線は枠にぴったり沿って描かれます。

24
00:01:29.963 --> 00:01:34.046
マイナスの値を書くと、今度は線が枠の内側へ入り込みます。

25
00:01:34.046 --> 00:01:40.900
内側へ入れすぎると文字や内容に重なって読みにくくなるので、負の値は小さめから試すのが安全です。

26
00:01:40.900 --> 00:01:44.837
単位はピクセルのほかに、レムなど長さの単位が使えます。

27
00:01:44.837 --> 00:01:51.836
パーセントは使えないので、距離は必ず長さの単位で指定する、という点もあわせて覚えておきましょう。

28
00:01:51.836 --> 00:01:56.940
迷ったら、まず四ピクセル前後の正の値から試すと違いが分かりやすいです。

29
00:01:56.940 --> 00:01:58.727
初期値と継承を確認します。

30
00:01:58.727 --> 00:02:02.712
アウトラインオフセットの初期値はゼロで、隙間はありません。

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

32
00:02:06.422 --> 00:02:12.881
親の要素に六ピクセルと指定しても、中の見出しやリンクに自動で同じ距離が付くわけではないのです。

33
00:02:12.881 --> 00:02:19.203
共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のゼロに戻す指定です。

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

35
00:02:23.463 --> 00:02:30.472
また、仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点にも注意しましょう。

36
00:02:30.472 --> 00:02:32.001
ここからは実例です。

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

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

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

40
00:02:51.110 --> 00:02:58.601
親のステージがあることで、箱の枠と、その外側に離れて描かれる輪郭線との関係を見分けやすくなります。

41
00:02:58.601 --> 00:03:02.347
この土台の上に、最後のアウトラインオフセットの行だけを切り替えて比べるのが、

42
00:03:02.347 --> 00:03:06.092
この実例の進め方です。

43
00:03:06.092 --> 00:03:08.436
土台のシーエスエスの続きです。

44
00:03:08.436 --> 00:03:16.094
全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。

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

46
00:03:22.970 --> 00:03:28.908
さらに別の行で、アウトラインとして茶色の三ピクセルの実線を指定しておきます。

47
00:03:28.908 --> 00:03:30.783
これが輪郭線の土台です。

48
00:03:30.783 --> 00:03:35.940
この土台があって初めて、オフセットで距離を変える意味が生まれます。

49
00:03:35.940 --> 00:03:42.504
まずはオフセットなしの状態で、枠と輪郭線が重なって見える様子を確認しておきましょう。

50
00:03:42.504 --> 00:03:43.735
では比較です。

51
00:03:43.735 --> 00:03:48.309
最後の行に六ピクセルを指定すると、茶色の輪郭線が緑の枠から少し外側へ離れ、

52
00:03:48.309 --> 00:03:52.882
二つの線の間に隙間ができます。

53
00:03:52.882 --> 00:03:58.511
箱が二重に縁取られたように見え、枠と輪郭線を別々に認識できます。

54
00:03:58.511 --> 00:04:02.204
次に、値だけをゼロに置き換えてみましょう。

55
00:04:02.204 --> 00:04:04.491
他の指定はすべて同じです。

56
00:04:04.491 --> 00:04:09.064
今度は輪郭線が枠にぴったり沿うので、隙間は消えます。

57
00:04:09.064 --> 00:04:15.221
変わったのは距離だけ、親の幅や文章は同じ、という点に注目してください。

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

59
00:04:21.377 --> 00:04:30.172
隙間ができたことで、緑の枠と茶色の輪郭線がそれぞれ独立した線として見えるようになるのがポイントです。

60
00:04:30.172 --> 00:04:34.963
アウトラインオフセットが特に大切になるのが、フォーカスの表示です。

61
00:04:34.963 --> 00:04:39.029
キーボードで操作しているとき、今どのボタンやリンクを選んでいるかを示す目印が、

62
00:04:39.029 --> 00:04:43.094
ブラウザーが自動で描く輪郭線です。

63
00:04:43.094 --> 00:04:48.611
そのため、見た目が気になるからといって、輪郭線を無条件に消してはいけません。

64
00:04:48.611 --> 00:04:53.403
消してしまうと、キーボードを使う人が現在位置を見失ってしまいます。

65
00:04:53.403 --> 00:05:00.517
代わりに、オフセットで線を少し離すと、要素のデザインとぶつからず、目印がかえって見やすくなります。

66
00:05:00.517 --> 00:05:05.744
デザインと操作のしやすさを両立させるためのプロパティだと考えてください。

67
00:05:05.744 --> 00:05:07.336
使うときの注意点です。

68
00:05:07.336 --> 00:05:14.427
繰り返しになりますが、アウトライン自体が設定されていないと、オフセットを変えても変化は見えません。

69
00:05:14.427 --> 00:05:17.611
効かないと感じたら、まずここを疑いましょう。

70
00:05:17.611 --> 00:05:20.071
もう一つは、離しすぎへの注意です。

71
00:05:20.071 --> 00:05:25.064
輪郭線はレイアウトの寸法を増やさないので、大きく離しても周りの要素は押しのけられず、

72
00:05:25.064 --> 00:05:30.057
隣の要素や文章の上に重なって表示される場合があります。

73
00:05:30.057 --> 00:05:34.688
近くの要素との間隔が狭い画面では、特に重なりを確認してください。

74
00:05:34.688 --> 00:05:39.754
数ピクセル程度の小さな値から始めて、少しずつ調整するのがおすすめです。

75
00:05:39.754 --> 00:05:42.937
また、角の丸みとの関係にも注目してください。

76
00:05:42.937 --> 00:05:49.884
輪郭線は要素の形に沿って描かれるため、角を丸くした要素では輪郭線の角も丸く見える場合があります。

77
00:05:49.884 --> 00:05:52.260
効かないと感じたときの確認手順です。

78
00:05:52.260 --> 00:05:56.749
まず前提として、アウトラインが有効に指定されているかを見てください。

79
00:05:56.749 --> 00:05:59.983
アウトラインがノーンになっていたり、そもそも書かれていなかったりすると、

80
00:05:59.983 --> 00:06:03.217
オフセットは空振りします。

81
00:06:03.217 --> 00:06:05.594
続いて開発者ツールで順番に調べます。

82
00:06:05.594 --> 00:06:10.830
ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとセレクターが一致しているか、

83
00:06:10.830 --> 00:06:16.067
スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、

84
00:06:16.067 --> 00:06:21.304
最後にコンピューテッドで最終的な値を確認します。

85
00:06:21.304 --> 00:06:25.792
三百二十ピクセル程度の狭い画面や、キーボード操作でも確認しましょう。

86
00:06:25.792 --> 00:06:27.732
最後に互換性とまとめです。

87
00:06:27.732 --> 00:06:33.924
アウトラインオフセットは、クローム一以降、エッジ十五以降、ファイアフォックス一点五以降、

88
00:06:33.924 --> 00:06:40.116
サファリ一点二以降と、主要ブラウザーで古くから対応しており、安心して使えます。

89
00:06:40.116 --> 00:06:41.011
まとめます。

90
00:06:41.011 --> 00:06:45.711
アウトラインオフセットは輪郭線と枠との距離を決めるプロパティで、正で外側、

91
00:06:45.711 --> 00:06:50.411
負で内側へずれ、初期値はゼロで継承はしませんでした。

92
00:06:50.411 --> 00:06:54.738
練習として、六ピクセルとゼロの違いを言葉で説明し、次にマイナスの値も試して、

93
00:06:54.738 --> 00:06:59.065
線が内側へ入る様子を比べてみてください。

94
00:06:59.065 --> 00:07:05.928
関連するアウトラインやボックスシャドウも学ぶと、箱の周りの装飾が一通りできるようになります。

95
00:07:05.928 --> 00:07:07.271
お疲れさまでした。

96
00:07:07.271 --> 00:07:12.045
フォーカス表示を整える場面では特に役立つプロパティなので、消すのではなく、

97
00:07:12.045 --> 00:07:16.820
離して見やすくするという発想をぜひ身に付けてください。