WEBVTT

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

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

3
00:00:03.379 --> 00:00:06.898
今回のテーマは、テキストデコレーションカラーです。

4
00:00:06.898 --> 00:00:10.839
これは、下線などの装飾線の色だけを決めるプロパティです。

5
00:00:10.839 --> 00:00:15.907
文字の色はそのままに、線の色だけを独立して変えられるのが大きな特徴です。

6
00:00:15.907 --> 00:00:20.553
たとえば、黒い文字に緑色の下線を引くといった組み合わせができます。

7
00:00:20.553 --> 00:00:24.635
今回は、茶色と緑色を比べながら、値の書き方や初期値、効かないときの確認方法まで、

8
00:00:24.635 --> 00:00:28.718
初心者向けに分かりやすく解説します。

9
00:00:28.718 --> 00:00:32.589
小さな色の違いですが、リンクの見分けやすさや文章の印象を大きく左右するので、

10
00:00:32.589 --> 00:00:36.460
仕組みから丁寧に見ていきましょう。

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

12
00:00:38.177 --> 00:00:43.017
セレクターのあとにプロパティ名、テキストデコレーションカラーを書き、コロンを挟んで色の値を入れ、

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

14
00:00:47.856 --> 00:00:51.603
スライドの例では、茶色に近い色を指定しています。

15
00:00:51.603 --> 00:01:00.969
あわせてテキストデコレーションで下線そのものを付けておくことが大切で、線がない要素では色を変えても見た目は変わりません。

16
00:01:00.969 --> 00:01:05.809
クラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることを確認しながら、

17
00:01:05.809 --> 00:01:10.648
まずはこの形を書いてみましょう。

18
00:01:10.648 --> 00:01:15.800
色は後から一か所だけ変えれば、全体の印象を簡単に切り替えられます。

19
00:01:15.800 --> 00:01:17.949
値の読み方を見ていきます。

20
00:01:17.949 --> 00:01:23.238
テキストデコレーションカラーに指定するのは、装飾線に使う色です。

21
00:01:23.238 --> 00:01:33.651
文字のカラーと同じように、色の名前、シャープで始まるカラーコード、アールジービーやエイチエスエルといった関数でも指定できます。

22
00:01:33.651 --> 00:01:38.775
記事の実例では、茶色っぽい色と、深い緑色の二つを比べています。

23
00:01:38.775 --> 00:01:44.725
どちらの場合も、変わるのは下線の色だけで、文字の色は元のまま保たれます。

24
00:01:44.725 --> 00:01:50.592
まずは分かりやすい色名やカラーコードから始めて、背景や文字色とのコントラストを確認しながら選ぶと、

25
00:01:50.592 --> 00:01:56.460
読みやすい組み合わせを見つけやすくなります。

26
00:01:56.460 --> 00:01:59.713
色を指定しない場合の動きも押さえましょう。

27
00:01:59.713 --> 00:02:04.360
テキストデコレーションカラーの初期値は、カレントカラーです。

28
00:02:04.360 --> 00:02:10.711
これは、その要素の文字色、つまりカラープロパティの値と同じ色を使うという意味です。

29
00:02:10.711 --> 00:02:15.977
ですから、普段は下線が文字と同じ色で引かれ、特に違和感なく見えます。

30
00:02:15.977 --> 00:02:21.709
このプロパティで別の色を上書きしたときに初めて、文字と線で色が分かれます。

31
00:02:21.709 --> 00:02:28.989
逆に、カレントカラーを明示すれば、文字色を変えたときに線の色も一緒に追随させることができます。

32
00:02:28.989 --> 00:02:34.720
初期値の意味が分かると、指定しなかったときの見え方も予測しやすくなります。

33
00:02:34.720 --> 00:02:36.300
基本情報を確認します。

34
00:02:36.300 --> 00:02:41.759
テキストデコレーションカラーの初期値はカレントカラーで、通常は継承しません。

35
00:02:41.759 --> 00:02:47.648
親要素に指定しても、子要素へそのまま引き継がれるわけではない点に注意してください。

36
00:02:47.648 --> 00:02:55.836
関連する値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値であるカレントカラーに戻す指定です。

37
00:02:55.836 --> 00:03:00.576
アンセットは、継承しないプロパティではイニシャルとして扱われます。

38
00:03:00.576 --> 00:03:07.471
また、ブラウザーの既定スタイルが要素に適用されている場合は、その結果が優先されることもあります。

39
00:03:07.471 --> 00:03:11.780
最終的な値は開発者ツールのコンピューテッドで確認しましょう。

40
00:03:11.780 --> 00:03:13.895
ここからは記事の実例です。

41
00:03:13.895 --> 00:03:22.194
エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。

42
00:03:22.194 --> 00:03:27.157
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、

43
00:03:27.157 --> 00:03:32.120
折り返して複数行になる長さにしてあります。

44
00:03:32.120 --> 00:03:39.280
下線の色は文字のすぐ下で比べるため、文章がある程度長いほうが違いが分かりやすくなります。

45
00:03:39.280 --> 00:03:43.999
頭の部分では、スタイルシートをリンクで読み込んでください。

46
00:03:43.999 --> 00:03:49.694
比べるのは線の色だけなので、文章や構造などの土台は変えずに固定します。

47
00:03:49.694 --> 00:03:56.040
この土台があることで、次のスライドで変える一行の効果だけを純粋に観察できます。

48
00:03:56.040 --> 00:03:57.938
土台のシーエスエスです。

49
00:03:57.938 --> 00:04:05.057
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景、そして下線を付けます。

50
00:04:05.057 --> 00:04:09.565
ここで最後の行にテキストデコレーションカラーで茶色を指定すると、文字の色はそのままに、

51
00:04:09.565 --> 00:04:14.073
下線だけが茶色で引かれます。

52
00:04:14.073 --> 00:04:19.135
次に最後の行だけを深い緑色へ換えると、下線だけが緑へ変わります。

53
00:04:19.135 --> 00:04:21.350
変わるのはこの一行だけです。

54
00:04:21.350 --> 00:04:29.892
ファイルを保存してブラウザーを再読み込みし、線の色と文字色が別々に保たれていることに注目して比べてください。

55
00:04:29.892 --> 00:04:35.428
色だけを差し替える実験は、原因と結果の関係がとても追いやすくなります。

56
00:04:35.428 --> 00:04:37.297
活用場面を整理します。

57
00:04:37.297 --> 00:04:40.016
代表的なのは、リンクの下線です。

58
00:04:40.016 --> 00:04:45.283
文字は本文と同じ色にしておき、下線だけをブランドカラーや目立つ色にすると、

59
00:04:45.283 --> 00:04:50.550
読みやすさを保ちながらリンクらしさを伝えられます。

60
00:04:50.550 --> 00:04:58.026
強調したい言葉に下線を引くときも、文字色を変えずに線の色だけでアクセントを付けられます。

61
00:04:58.026 --> 00:05:09.581
線の太さを変えたいときはテキストデコレーションシックネスを、線の位置を調整したいときはテキストアンダーラインオフセットを組み合わせます。

62
00:05:09.581 --> 00:05:18.416
色、太さ、位置を分けて考えると、下線まわりの調整が整理しやすくなり、デザインの意図も伝えやすくなります。

63
00:05:18.416 --> 00:05:21.573
効かないときと間違えやすい点を確認します。

64
00:05:21.573 --> 00:05:25.933
一番の注意点は、テキストデコレーションラインなどで線が作られていなければ、

65
00:05:25.933 --> 00:05:30.292
色だけを指定しても変化が見えないことです。

66
00:05:30.292 --> 00:05:33.599
まず下線などの線があるかを確かめてください。

67
00:05:33.599 --> 00:05:38.410
また、線の色が背景に近すぎると、線があるのに見えにくくなります。

68
00:05:38.410 --> 00:05:41.116
色のコントラストにも注意しましょう。

69
00:05:41.116 --> 00:05:48.106
そのうえで開発者ツールを使い、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に調べ、

70
00:05:48.106 --> 00:05:55.097
最後に三百二十ピクセル程度の狭い画面幅や文字拡大でも内容を利用できるかを確認してください。

71
00:05:55.097 --> 00:05:58.404
順番に調べると原因を切り分けやすくなります。

72
00:05:58.404 --> 00:06:00.754
ブラウザー互換性を確認します。

73
00:06:00.754 --> 00:06:06.786
記事が参照するエムディーエヌの記録では、クロームが五十七以降、エッジが七十九以降、

74
00:06:06.786 --> 00:06:12.818
ファイアフォックスが三十六以降、サファリが十二点一以降で対応しています。

75
00:06:12.818 --> 00:06:18.928
アンドロイド版クロームは五十七以降、アイオーエス版サファリは十二点二以降です。

76
00:06:18.928 --> 00:06:23.471
かなり前のブラウザーから使えるため、今回比べた茶色や緑色といった基本の色指定は、

77
00:06:23.471 --> 00:06:28.015
安心して使えると考えてよいでしょう。

78
00:06:28.015 --> 00:06:33.263
ただし、プロパティが使えることと、すべての値や構文が使えることは別なので、

79
00:06:33.263 --> 00:06:38.512
新しい色の書き方を使う場合は値ごとの対応も確認してください。

80
00:06:38.512 --> 00:06:40.228
最後に練習とまとめです。

81
00:06:40.228 --> 00:06:41.086
まとめます。

82
00:06:41.086 --> 00:06:44.875
テキストデコレーションカラーは、装飾線の色を調整する設定で、初期値はカレントカラー、

83
00:06:44.875 --> 00:06:48.663
継承はしませんでした。

84
00:06:48.663 --> 00:06:55.812
茶色を指定すれば下線だけが茶色に、緑を指定すれば下線だけが緑になり、文字色は保たれる点が大切でした。

85
00:06:55.812 --> 00:06:58.672
線がないと色が見えない点も確認しました。

86
00:06:58.672 --> 00:07:05.964
練習として、まず二つの色の違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

87
00:07:05.964 --> 00:07:07.251
お疲れさまでした。

88
00:07:07.251 --> 00:07:11.183
関連するテキストデコレーションやテキストデコレーションシックネスも一緒に学ぶと、

89
00:07:11.183 --> 00:07:15.114
下線まわりの理解が深まります。

90
00:07:15.114 --> 00:07:18.260
一つずつ値を変えて比べる練習を重ねましょう。