WEBVTT

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

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

3
00:00:03.674 --> 00:00:06.276
今回のテーマは、アウトラインです。

4
00:00:06.276 --> 00:00:13.624
これは、要素の枠、つまりボーダーの外側にもう一本描かれる輪郭線をまとめて指定するプロパティです。

5
00:00:13.624 --> 00:00:20.513
ボタンやリンクをキーボードで選んだとき、周りに四角い線が現れるのを見たことがあるでしょう。

6
00:00:20.513 --> 00:00:22.656
あの目印がアウトラインです。

7
00:00:22.656 --> 00:00:28.932
この動画では、基本の書き方、太さと線の種類と色の組み合わせ方、ボーダーとの違い、

8
00:00:28.932 --> 00:00:35.209
フォーカスで消してはいけない理由、そして効かないときの確認までを順番に見ていきます。

9
00:00:35.209 --> 00:00:41.332
輪郭線は四辺すべてを囲むように描かれるため、選ばれている要素が一目で分かります。

10
00:00:41.332 --> 00:00:46.996
まずは身近なボタンをタブキーで移動しながら、線の動きを観察してみましょう。

11
00:00:46.996 --> 00:00:48.837
まず基本の書き方です。

12
00:00:48.837 --> 00:00:53.355
対象のクラスにアウトラインと書き、コロンのあとに太さ、線の種類、色の三つを並べ、

13
00:00:53.355 --> 00:00:57.873
最後にセミコロンを付けます。

14
00:00:57.873 --> 00:01:03.395
スライドの例では、三ピクセルの実線で、色は茶色系を指定しています。

15
00:01:03.395 --> 00:01:10.423
クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。

16
00:01:10.423 --> 00:01:15.945
この一行で輪郭線の見た目が決まるので、まずはこの形を覚えましょう。

17
00:01:15.945 --> 00:01:22.304
順番は入れ替えても動きますが、太さ、線種、色の順で書くと読みやすくなります。

18
00:01:22.304 --> 00:01:24.697
値の読み方を分解しましょう。

19
00:01:24.697 --> 00:01:31.021
アウトラインは、輪郭線の幅、線の種類、色という三つの要素からできています。

20
00:01:31.021 --> 00:01:35.978
幅はピクセルなどの長さで、線の種類は実線のソリッドや破線のダッシュドなどから選び、

21
00:01:35.978 --> 00:01:40.935
色はカラーコードなどで指定します。

22
00:01:40.935 --> 00:01:46.575
これらは、幅、線種、色に対応する個別のプロパティにも分けられます。

23
00:01:46.575 --> 00:01:55.976
まとめて書けるのがアウトラインの便利なところで、細かく調整したいときだけ個別の指定を使い分けるとよいでしょう。

24
00:01:55.976 --> 00:02:01.788
線の種類を指定し忘れると線が見えない場合があるので注意してください。

25
00:02:01.788 --> 00:02:09.137
例えば太さだけを変えると線の存在感が変わり、線種だけを変えると印象の硬さが変わります。

26
00:02:09.137 --> 00:02:14.436
一度に全部を変えず、一項目ずつ試すと違いが追いやすくなります。

27
00:02:14.436 --> 00:02:16.775
初期値と継承を確認します。

28
00:02:16.775 --> 00:02:26.491
アウトラインの初期値は、幅、線種、色という三つの個別プロパティの初期値を組み合わせたものとして定義されます。

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

30
00:02:31.349 --> 00:02:38.726
親に輪郭線を指定しても、中の見出しやリンクに自動で同じ線が付くわけではないのです。

31
00:02:38.726 --> 00:02:47.002
共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。

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

33
00:02:52.580 --> 00:03:01.216
ブラウザーの既定スタイルで見えている線と、仕様の初期値が同じとは限らない点も覚えておきましょう。

34
00:03:01.216 --> 00:03:02.678
ここからは実例です。

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

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

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

38
00:03:20.954 --> 00:03:28.411
親のステージがあることで、箱の本来の枠と、その外側に描かれる輪郭線との位置関係を見分けやすくなります。

39
00:03:28.411 --> 00:03:34.844
この土台の上に、最後のアウトラインの行だけを切り替えて比べるのが、この実例の進め方です。

40
00:03:34.844 --> 00:03:37.298
土台のシーエスエスの続きです。

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

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

43
00:03:52.514 --> 00:03:56.605
ここまでは、違いが見えるようにするための土台です。

44
00:03:56.605 --> 00:04:00.695
このあと、別の行でデモにアウトラインを指定します。

45
00:04:00.695 --> 00:04:08.385
土台の緑の枠があるからこそ、その外側にもう一本、茶色の輪郭線が重なる様子がはっきり分かります。

46
00:04:08.385 --> 00:04:12.312
まずはこの状態をブラウザーで開いておきましょう。

47
00:04:12.312 --> 00:04:13.495
では比較です。

48
00:04:13.495 --> 00:04:21.442
まず三ピクセル、実線、茶色を指定すると、緑の枠の外側にもう一本、はっきりした線が表示されます。

49
00:04:21.442 --> 00:04:26.175
箱が二重に縁取られたように見え、輪郭が強く強調されます。

50
00:04:26.175 --> 00:04:31.247
次に、値だけを二ピクセル、破線、緑色に置き換えてみましょう。

51
00:04:31.247 --> 00:04:33.445
他の指定はすべて同じです。

52
00:04:33.445 --> 00:04:40.884
今度は細い破線になるので、印象が軽くなり、色も枠とそろうため落ち着いた見え方になります。

53
00:04:40.884 --> 00:04:45.956
変わったのは太さと線種と色だけ、という点に注目してください。

54
00:04:45.956 --> 00:04:51.028
変更後は保存して、ブラウザーを再読み込みして確認しましょう。

55
00:04:51.028 --> 00:04:54.217
よく似たボーダーとの違いも押さえましょう。

56
00:04:54.217 --> 00:05:00.899
ボーダーは要素の大きさの一部として扱われ、太くするとレイアウトに影響する場合があります。

57
00:05:00.899 --> 00:05:07.580
一方、アウトラインは枠の外側に描かれますが、通常はレイアウト上の占有寸法を増やしません。

58
00:05:07.580 --> 00:05:11.832
周りの要素を押しのけずに線だけを追加できるのが特徴です。

59
00:05:11.832 --> 00:05:19.729
また、アウトラインオフセットという関連プロパティを使えば、枠と輪郭線との間に隙間を空けることもできます。

60
00:05:19.729 --> 00:05:25.955
装飾として線を足したいときと、操作の目印を示したいときで使い分けるとよいでしょう。

61
00:05:25.955 --> 00:05:27.929
角の扱いも違いの一つです。

62
00:05:27.929 --> 00:05:35.067
ボーダーは角丸に沿いますが、アウトラインの見え方はブラウザーごとに細部が異なる場合があります。

63
00:05:35.067 --> 00:05:37.952
最終表示は実際の画面で確かめましょう。

64
00:05:37.952 --> 00:05:39.716
使うときの注意点です。

65
00:05:39.716 --> 00:05:45.811
最も大切なのは、キーボードフォーカスの輪郭線を、代替なしに消さないことです。

66
00:05:45.811 --> 00:05:54.792
アウトラインをノーンと書いて消してしまうと、キーボードで操作する人が、今どこを選んでいるのか分からなくなります。

67
00:05:54.792 --> 00:05:59.604
見た目が気になる場合は、消すのではなく、色や太さを整えたり、オフセットで少し離したりして、

68
00:05:59.604 --> 00:06:04.416
見やすい目印を用意しましょう。

69
00:06:04.416 --> 00:06:10.991
もう一つ、親要素のオーバーフローで輪郭線が切り取られていないかも確認してください。

70
00:06:10.991 --> 00:06:16.284
線の一部が隠れると、指定が効いていないように見えることがあります。

71
00:06:16.284 --> 00:06:19.091
効かないと感じたときの確認手順です。

72
00:06:19.091 --> 00:06:21.743
まず開発者ツールで順番に調べます。

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

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

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

76
00:06:41.395 --> 00:06:49.661
線種が指定されていない、色が背景と同化している、親に切り取られている、といった原因もあわせて探しましょう。

77
00:06:49.661 --> 00:06:55.744
三百二十ピクセル程度の狭い画面や、キーボード操作でも確認するのがおすすめです。

78
00:06:55.744 --> 00:06:57.611
最後に互換性とまとめです。

79
00:06:57.611 --> 00:07:03.213
記事が参照するエムディーエヌの記録では、クローム九十四以降、エッジ九十四以降、

80
00:07:03.213 --> 00:07:08.815
ファイアフォックス八十八以降、サファリ十六点四以降などで対応が示されています。

81
00:07:08.815 --> 00:07:09.677
まとめます。

82
00:07:09.677 --> 00:07:14.633
アウトラインは枠の外に輪郭線を引くプロパティで、太さ、線種、色をまとめて指定でき、

83
00:07:14.633 --> 00:07:19.588
通常はレイアウトの寸法を増やさず、継承はしませんでした。

84
00:07:19.588 --> 00:07:27.201
練習として、三ピクセルの実線と二ピクセルの破線の違いを言葉で説明し、値を一つずつ変えて比べてみてください。

85
00:07:27.201 --> 00:07:32.803
関連するアウトラインオフセットやボーダーも学ぶと、箱の周りの表現が広がります。

86
00:07:32.803 --> 00:07:34.096
お疲れさまでした。

87
00:07:34.096 --> 00:07:41.996
値の記録はブラウザーの更新で変わることもあるので、公開前に最新の対応状況をもう一度確認する習慣を付けましょう。