WEBVTT

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

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

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

4
00:00:07.052 --> 00:00:12.571
これは、文字に下線や取り消し線などの装飾線を付けるためのプロパティで、線の種類、

5
00:00:12.571 --> 00:00:18.090
線の形、色、太さをまとめて指定できる一括指定の形になっています。

6
00:00:18.090 --> 00:00:23.762
今回は、点線の下線を付ける例と、線をなくすノーンという値を比べながら、基本の書き方から効かないときの注意点まで、

7
00:00:23.762 --> 00:00:29.435
初心者向けに分かりやすく解説します。

8
00:00:29.435 --> 00:00:33.574
リンクの下線を消す場面でもよく使う、実務でとても身近なプロパティですので、

9
00:00:33.574 --> 00:00:37.713
仕組みから丁寧に見ていきましょう。

10
00:00:37.713 --> 00:00:45.532
線の位置、形、色、太さという四つの要素に分けて考えると、このプロパティの全体像がつかみやすくなります。

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

12
00:00:47.061 --> 00:00:51.021
セレクターのあとにプロパティ名、テキストデコレーションを書き、コロンを挟んで値を並べ、

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

14
00:00:54.982 --> 00:00:59.637
スライドの例では、アンダーラインで下線を、ドッテッドで点線を、カラーコードで深い緑色を指定していて、

15
00:00:59.637 --> 00:01:04.293
文字の下に緑色の点線が引かれます。

16
00:01:04.293 --> 00:01:09.435
値はすべてを書く必要はなく、下線だけならアンダーラインだけでも構いません。

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

18
00:01:14.993 --> 00:01:20.552
まずはこの形をそのまま書いて、ブラウザーで表示を確かめてみましょう。

19
00:01:20.552 --> 00:01:23.289
最初に決めるのは、線をどこに引くかです。

20
00:01:23.289 --> 00:01:29.379
個別プロパティのテキストデコレーションラインに当たる部分で、アンダーラインは文字の下に下線、

21
00:01:29.379 --> 00:01:35.470
オーバーラインは文字の上に上線、ラインスルーは文字の真ん中を通る取り消し線を付けます。

22
00:01:35.470 --> 00:01:37.523
ノーンは何も付けない指定です。

23
00:01:37.523 --> 00:01:42.723
下線と上線のように、複数の種類を空白で区切って同時に指定することもできます。

24
00:01:42.723 --> 00:01:47.240
取り消し線は、価格の改定や削除した内容を示すときによく使われます。

25
00:01:47.240 --> 00:01:52.988
まずは、どの位置に線を引きたいのかを言葉で決めてから、対応する値を選ぶと迷いません。

26
00:01:52.988 --> 00:01:56.820
線の位置が決まれば、次はその線の見た目を整えていきます。

27
00:01:56.820 --> 00:01:58.142
次は線の形です。

28
00:01:58.142 --> 00:02:05.249
個別プロパティのテキストデコレーションスタイルに当たる部分で、ソリッドは途切れのない実線、

29
00:02:05.249 --> 00:02:12.357
ダブルは二重線、ドッテッドは点線、ダッシュドは破線、ウェイビーは波線を指定します。

30
00:02:12.357 --> 00:02:19.629
今回の実例で使うドッテッドは点線なので、普通の下線よりも軽く、さりげない印象になります。

31
00:02:19.629 --> 00:02:24.753
波線は、注意をやわらかく伝えたいときに使われることもあります。

32
00:02:24.753 --> 00:02:30.372
同じ下線でも形を変えるだけで文章の雰囲気が大きく変わるので、強調したいのか、

33
00:02:30.372 --> 00:02:35.992
控えめに目立たせたいのか、目的に合わせて選んでみてください。

34
00:02:35.992 --> 00:02:39.952
テキストデコレーションでは、線の色と太さも一緒に指定できます。

35
00:02:39.952 --> 00:02:44.360
色はテキストデコレーションカラー、太さはテキストデコレーションシックネスという個別プロパティに対応していて、

36
00:02:44.360 --> 00:02:48.768
文字の色とは別に決められます。

37
00:02:48.768 --> 00:02:57.327
スライドのように色と太さを一括で書くこともできますし、後から色だけ、太さだけを変えたいときは個別プロパティで分けて書くこともできます。

38
00:02:57.327 --> 00:03:03.076
下線の位置を文字から少し離したいときは、テキストアンダーラインオフセットを組み合わせます。

39
00:03:03.076 --> 00:03:07.292
まとめて書くか、分けて書くかを、変更のしやすさで選ぶのがコツです。

40
00:03:07.292 --> 00:03:09.172
基本情報を確認します。

41
00:03:09.172 --> 00:03:20.449
テキストデコレーションは一括指定なので、初期値は、線の種類や形、色といった構成する個別プロパティの初期値を参照する形になっています。

42
00:03:20.449 --> 00:03:22.158
通常は継承しません。

43
00:03:22.158 --> 00:03:29.335
ただし注意したいのは、親要素に付けた装飾線は子要素の文字にも表示されるという点です。

44
00:03:29.335 --> 00:03:33.948
継承とは別の仕組みで線が引き継がれて見えるため、子の側でノーンを指定しても、

45
00:03:33.948 --> 00:03:38.562
親の線を単純には打ち消せません。

46
00:03:38.562 --> 00:03:45.055
インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。

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

48
00:03:50.352 --> 00:03:52.488
ここからは記事の実例です。

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

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

51
00:04:05.878 --> 00:04:10.889
折り返して複数行になる長さにしてあります。

52
00:04:10.889 --> 00:04:19.432
点線の下線が複数行にわたって続く様子を確認するため、文章がある程度長いほうが違いが分かりやすくなります。

53
00:04:19.432 --> 00:04:24.197
頭の部分では、スタイルシートをリンクで読み込んでください。

54
00:04:24.197 --> 00:04:32.740
親と子の構造も例の一部なので、この土台は変えずに固定し、次のスライドで変える一行の効果だけを観察します。

55
00:04:32.740 --> 00:04:34.553
土台のシーエスエスです。

56
00:04:34.553 --> 00:04:40.444
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。

57
00:04:40.444 --> 00:04:48.298
ここで最後の行に、アンダーライン、ドッテッド、緑色を指定すると、文章全体に緑色の点線の下線が引かれます。

58
00:04:48.298 --> 00:04:54.038
次に最後の行だけをノーンへ換えると、線がすべて消えて、ただの文章に戻ります。

59
00:04:54.038 --> 00:04:56.153
変わるのはこの一行だけです。

60
00:04:56.153 --> 00:05:00.609
ファイルを保存してブラウザーを再読み込みし、点線があるときとないときで、

61
00:05:00.609 --> 00:05:05.065
文章の目立ち方がどう変わるかを比べてください。

62
00:05:05.065 --> 00:05:10.352
一か所だけを変える実験は、原因と結果の関係がとても追いやすくなります。

63
00:05:10.352 --> 00:05:12.469
間違えやすい点を確認します。

64
00:05:12.469 --> 00:05:18.516
リンクには標準で下線が付いていますが、テキストデコレーションのノーンで下線だけを消してしまうと、

65
00:05:18.516 --> 00:05:24.564
周りの文章と見分けが付かなくなり、リンクだと気付けなくなります。

66
00:05:24.564 --> 00:05:31.972
下線を消す場合は、色を変える、太字にするなど、リンクだと分かる別の手掛かりを必ず用意してください。

67
00:05:31.972 --> 00:05:40.287
もう一つの注意点は、先ほど触れたように、親要素で付けた線は子要素でノーンを指定しても単純には消せないことです。

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

69
00:05:45.806 --> 00:05:51.324
狭い画面幅や文字拡大でも使えるかを確認しましょう。

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

71
00:05:53.464 --> 00:05:58.955
記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、

72
00:05:58.955 --> 00:06:04.447
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

73
00:06:04.447 --> 00:06:09.439
アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。

74
00:06:09.439 --> 00:06:13.790
とても古いブラウザーから使えるため、今回比べた点線の下線やノーンといった基本の指定は、

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

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

77
00:06:23.276 --> 00:06:28.696
色や太さまで含めた新しい書き方を使う場合は、値ごとの対応も確認してください。

78
00:06:28.696 --> 00:06:30.446
最後に練習とまとめです。

79
00:06:30.446 --> 00:06:31.321
まとめます。

80
00:06:31.321 --> 00:06:35.550
テキストデコレーションは、線の種類、形、色、太さをまとめて指定する一括指定のプロパティで、

81
00:06:35.550 --> 00:06:39.779
通常は継承しませんでした。

82
00:06:39.779 --> 00:06:47.071
点線の下線を付ける例と、ノーンで線をなくす例を比べ、見え方がどう変わるかを確認できた点が大切でした。

83
00:06:47.071 --> 00:06:51.446
練習として、まず二つの指定の違いを言葉で説明し、次に文章量や親の幅だけを変えて、

84
00:06:51.446 --> 00:06:55.821
結果がどう変わるかを比べてみてください。

85
00:06:55.821 --> 00:06:57.134
お疲れさまでした。

86
00:06:57.134 --> 00:07:01.582
関連するテキストデコレーションカラーやテキストデコレーションシックネスも一緒に学ぶと、

87
00:07:01.582 --> 00:07:06.030
下線まわりの理解がさらに深まります。

88
00:07:06.030 --> 00:07:10.988
値を一つずつ変えて比べる練習を重ねることが、確かな理解への近道です。