WEBVTT

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

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

3
00:00:03.744 --> 00:00:07.801
今回のテーマは、テキストデコレーショシックネスです。

4
00:00:07.801 --> 00:00:12.013
これは、下線などの装飾線の太さを決めるプロパティです。

5
00:00:12.013 --> 00:00:17.318
文字の色や線の色とは別に、太さだけを独立して調整できるのが特徴です。

6
00:00:17.318 --> 00:00:22.622
線が細すぎると目立たず、太すぎると文字と重なって読みにくくなります。

7
00:00:22.622 --> 00:00:28.863
今回は、ゼロ点一五エムと一ピクセルを中心に比べながら、値の書き方や、フォント由来の太さの考え方、

8
00:00:28.863 --> 00:00:35.103
効かないときの確認方法まで、初心者向けに分かりやすく解説します。

9
00:00:35.103 --> 00:00:42.748
小さな線の太さですが、リンクや強調の見え方を大きく左右するので、仕組みから丁寧に見ていきましょう。

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

11
00:00:44.274 --> 00:00:48.504
セレクターのあとにプロパティ名、テキストデコレーショシックネスを書き、コロンを挟んで値を入れ、

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

13
00:00:52.734 --> 00:00:56.063
スライドの例ではゼロ点一五エムを指定しています。

14
00:00:56.063 --> 00:00:58.837
エムは文字の大きさを基準にした単位です。

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

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

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

18
00:01:15.896 --> 00:01:18.293
値の読み方を見ていきます。

19
00:01:18.293 --> 00:01:26.404
一つ目はオートで、ブラウザーが文字サイズなどに合わせて適切な太さを自動で決める指定です。

20
00:01:26.404 --> 00:01:29.538
多くの場合はこれで問題ありません。

21
00:01:29.538 --> 00:01:36.913
二つ目はフロムフォントで、フォント自体が持っている推奨の線の太さを使う指定です。

22
00:01:36.913 --> 00:01:45.209
書体ごとに用意された値を尊重するため、フォントに合った自然な太さになりやすいのが利点です。

23
00:01:45.209 --> 00:01:51.846
ただし、フォント側に情報がない場合はブラウザーの判断で太さが決まります。

24
00:01:51.846 --> 00:01:57.561
まずはオートの見え方を基準にして、書体を変えたときにフロムフォントでどう変わるかを比べてみると、

25
00:01:57.561 --> 00:02:03.276
違いが分かりやすくなります。

26
00:02:03.276 --> 00:02:06.861
具体的な太さは、長さや割合でも指定できます。

27
00:02:06.861 --> 00:02:13.217
たとえばゼロ点一五エムと書くと、フォントサイズのゼロ点一五倍の太さになります。

28
00:02:13.217 --> 00:02:20.225
文字を大きくすれば線も一緒に太くなるため、見出しと本文でバランスが保ちやすくなります。

29
00:02:20.225 --> 00:02:26.581
一方、一ピクセルは常に一ピクセルの固定幅で、文字が大きくても線は細いままです。

30
00:02:26.581 --> 00:02:31.960
割合で指定する場合は、フォントサイズに対するパーセントで考えます。

31
00:02:31.960 --> 00:02:37.012
文字サイズに追随させたいときはエムや割合を、画面上で細く保ちたいときはピクセルを、

32
00:02:37.012 --> 00:02:42.064
というように目的に合わせて選んでください。

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

34
00:02:43.558 --> 00:02:47.090
テキストデコレーショシックネスの初期値はオートです。

35
00:02:47.090 --> 00:02:51.709
つまり指定しなければ、ブラウザーが決めた標準の太さで線が引かれます。

36
00:02:51.709 --> 00:02:54.698
そしてこのプロパティは、通常は継承しません。

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

38
00:03:00.268 --> 00:03:07.468
関連する値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値であるオートに戻す指定です。

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

40
00:03:11.951 --> 00:03:14.804
最終的な値は開発者ツールで確認しましょう。

41
00:03:14.804 --> 00:03:16.684
ここからは記事の実例です。

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

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

44
00:03:28.470 --> 00:03:32.881
折り返して複数行になる長さにしてあります。

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

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

47
00:03:43.582 --> 00:03:48.788
比べるのは線の太さだけなので、文章や構造などの土台は変えずに固定します。

48
00:03:48.788 --> 00:03:55.296
この土台があることで、次のスライドで変える一行の効果だけを純粋に観察できるようになります。

49
00:03:55.296 --> 00:03:57.284
土台のシーエスエスです。

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

51
00:04:04.739 --> 00:04:10.290
ここで最後の行にテキストデコレーショシックネス、ゼロ点一五エムを指定すると、

52
00:04:10.290 --> 00:04:15.840
下線が文字サイズに比例した、しっかりした太さで引かれます。

53
00:04:15.840 --> 00:04:21.307
次に最後の行だけを一ピクセルへ換えると、下線が細い線へ変わります。

54
00:04:21.307 --> 00:04:23.626
変わるのはこの一行だけです。

55
00:04:23.626 --> 00:04:31.579
ファイルを保存してブラウザーを再読み込みし、線の太さと文字の読みやすさに注目して比べてください。

56
00:04:31.579 --> 00:04:41.188
太くすると存在感は出ますが、文字の下側と近くなるため、重なって見えないかも一緒に確認すると違いがはっきり分かります。

57
00:04:41.188 --> 00:04:42.741
活用場面を整理します。

58
00:04:42.741 --> 00:04:44.999
代表的なのは、リンクの下線です。

59
00:04:44.999 --> 00:04:51.069
初期状態の細い線では目立ちにくい場合に、少し太くするとリンクだと気付きやすくなります。

60
00:04:51.069 --> 00:04:58.550
見出しのように文字が大きい場面では、エムで比例した太さを指定すると、文字と線のバランスが自然に保たれます。

61
00:04:58.550 --> 00:05:03.631
逆に本文の小さな文字では、控えめな太さのほうが読みやすさを邪魔しません。

62
00:05:03.631 --> 00:05:12.806
線の色を変えたいときはテキストデコレーションカラーを、線の位置を調整したいときはテキストアンダーラインオフセットを組み合わせます。

63
00:05:12.806 --> 00:05:17.888
太さ、色、位置を分けて考えると、下線まわりの調整が整理しやすくなります。

64
00:05:17.888 --> 00:05:21.129
効かないときと間違えやすい点を確認します。

65
00:05:21.129 --> 00:05:25.450
一番の注意点は、線が太すぎると文字の形と重なることです。

66
00:05:25.450 --> 00:05:35.636
特に下に突き出る英字や小さい文字では読みにくくなるため、位置を調整するテキストアンダーラインオフセットと組み合わせて確認しましょう。

67
00:05:35.636 --> 00:05:41.963
また、そもそも装飾線が引かれていない要素では、太さを変えても見た目は変わりません。

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

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

70
00:05:56.316 --> 00:05:58.447
ブラウザー互換性を確認します。

71
00:05:58.447 --> 00:06:03.845
記事が参照するエムディーエヌの記録では、クロームが八十九以降、エッジが八十九以降、

72
00:06:03.845 --> 00:06:09.243
ファイアフォックスが七十以降、サファリが十二点一以降で対応しています。

73
00:06:09.243 --> 00:06:14.783
アンドロイド版クロームは八十九以降、アイオーエス版サファリは十二点二以降です。

74
00:06:14.783 --> 00:06:19.329
少し前のブラウザーから使えるため、今回比べたゼロ点一五エムや一ピクセルといった基本の指定は、

75
00:06:19.329 --> 00:06:23.875
安心して使えると考えてよいでしょう。

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

77
00:06:28.279 --> 00:06:32.683
フロムフォントなど値ごとの対応も確認してください。

78
00:06:32.683 --> 00:06:36.376
実際に使うブラウザーで表示を確認する習慣も大切です。

79
00:06:36.376 --> 00:06:38.209
最後に練習とまとめです。

80
00:06:38.209 --> 00:06:39.126
まとめます。

81
00:06:39.126 --> 00:06:43.022
テキストデコレーショシックネスは、装飾線の太さを調整する設定で、初期値はオート、

82
00:06:43.022 --> 00:06:46.918
継承はしませんでした。

83
00:06:46.918 --> 00:06:53.183
ゼロ点一五エムでは文字サイズに比例した太さになり、一ピクセルでは細い線になります。

84
00:06:53.183 --> 00:06:57.919
オートやフロムフォントといった自動系の値がある点も大切でした。

85
00:06:57.919 --> 00:07:07.087
練習として、まずゼロ点一五エムと一ピクセルの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

86
00:07:07.087 --> 00:07:08.462
お疲れさまでした。

87
00:07:08.462 --> 00:07:12.893
関連するテキストデコレーションカラーやテキストアンダーラインオフセットも一緒に学ぶと、

88
00:07:12.893 --> 00:07:17.324
下線まわりの理解が深まります。

89
00:07:17.324 --> 00:07:23.588
一つずつ値を変えて比べる練習を重ねると、原因と結果の結び付きが追いやすくなります。