WEBVTT

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

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

3
00:00:03.566 --> 00:00:07.579
今回のテーマは、テキストアンダーラインオフセットです。

4
00:00:07.579 --> 00:00:11.591
これは、下線と文字の間の距離を調整するプロパティです。

5
00:00:11.591 --> 00:00:17.089
下線が文字にくっつきすぎると読みにくく、離れすぎると一体感がなくなります。

6
00:00:17.089 --> 00:00:22.588
この距離を少し変えるだけで、リンクや強調した文字の見え方がぐっと整います。

7
00:00:22.588 --> 00:00:27.937
今回は、ゼロ点三エムとゼロ点一エムを中心に比べながら、値の書き方や割合の考え方、

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

9
00:00:33.287 --> 00:00:40.420
小さな距離の違いですが、読みやすさに直結する大切な調整なので、仕組みから丁寧に見ていきましょう。

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

11
00:00:42.066 --> 00:00:46.704
セレクターのあとにプロパティ名、テキストアンダーラインオフセットを書き、

12
00:00:46.704 --> 00:00:51.342
コロンを挟んで値を入れ、最後にセミコロンを付けます。

13
00:00:51.342 --> 00:00:54.783
スライドの例ではゼロ点三エムを指定しています。

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

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

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

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

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

19
00:01:18.141 --> 00:01:23.861
一つ目はオートで、ブラウザーやフォントに合わせて適切な位置を自動で決める指定です。

20
00:01:23.861 --> 00:01:27.627
二つ目は長さでの指定で、ゼロ点一エムのように書きます。

21
00:01:27.627 --> 00:01:32.230
値が小さいほど下線は文字に近付き、値が大きいほど文字から離れます。

22
00:01:32.230 --> 00:01:40.321
エムを使うと文字サイズに合わせて距離も変わるため、見出しと本文で文字の大きさが違ってもバランスが保ちやすくなります。

23
00:01:40.321 --> 00:01:46.179
ピクセルやレムでも指定できますが、初心者のうちはエムで感覚をつかむのがおすすめです。

24
00:01:46.179 --> 00:01:52.596
慣れてきたら、見出しでは少し広めに、本文では控えめに、といった使い分けも試してみてください。

25
00:01:52.596 --> 00:01:56.028
長さのほかに、割合でも指定できます。

26
00:01:56.028 --> 00:02:00.890
たとえば二十パーセントと書くと、フォントサイズの二十パーセントの距離だけ、

27
00:02:00.890 --> 00:02:05.752
下線が元の位置からずれます。

28
00:02:05.752 --> 00:02:11.281
ゼロ点二エムとほぼ同じ意味と考えると分かりやすいでしょう。

29
00:02:11.281 --> 00:02:20.814
割合も長さと同じく、文字サイズを基準にするため、文字を大きくすれば下線までの距離も一緒に広がります。

30
00:02:20.814 --> 00:02:26.915
長さで直接決めたいときはエムやピクセルを、文字サイズとの比率で考えたいときは割合を、

31
00:02:26.915 --> 00:02:33.016
というように、目的に合わせて選んでください。

32
00:02:33.016 --> 00:02:34.679
基本情報を確認します。

33
00:02:34.679 --> 00:02:38.760
テキストアンダーラインオフセットの初期値はオートです。

34
00:02:38.760 --> 00:02:44.050
つまり指定しなければ、ブラウザーが決めた標準の位置に下線が引かれます。

35
00:02:44.050 --> 00:02:46.620
そしてこのプロパティは継承します。

36
00:02:46.620 --> 00:02:51.910
親要素に指定すれば、中の文字にも同じ距離が引き継がれるということです。

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

38
00:02:59.922 --> 00:03:04.910
アンセットは、継承するプロパティではインヘリットとして扱われます。

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

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

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

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

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

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

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

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

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

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

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

50
00:04:00.899 --> 00:04:05.715
ここで最後の行にテキストアンダーラインオフセット、ゼロ点三エムを指定すると、

51
00:04:05.715 --> 00:04:10.530
下線が文字から少し離れて引かれます。

52
00:04:10.530 --> 00:04:16.722
次に最後の行だけをゼロ点一エムへ換えると、下線が文字に近付いて見えます。

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

54
00:04:19.130 --> 00:04:26.869
ファイルを保存してブラウザーを再読み込みし、文字と下線の間の隙間に注目して比べてください。

55
00:04:26.869 --> 00:04:34.609
アルファベットの下に突き出る部分と線が重ならないかも一緒に見ると違いがはっきり分かります。

56
00:04:34.609 --> 00:04:42.004
ブラウザーで並べて見ると、ほんの少しの数値の違いでも印象が変わることがよく分かります。

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

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

59
00:04:46.112 --> 00:04:52.653
初期状態では下線が文字に近く、特に小さい文字や英字では読みにくく感じることがあります。

60
00:04:52.653 --> 00:04:58.891
オフセットを少し大きくすると線が離れて、文字の形がつぶれずに読めるようになります。

61
00:04:58.891 --> 00:05:04.976
ジーやワイのように下に突き出る英字がある場合も、線と文字が重なりにくくなります。

62
00:05:04.976 --> 00:05:10.148
また見出しのリンクでは、少し広めの距離がゆったりした印象を作ります。

63
00:05:10.148 --> 00:05:15.017
サイト全体のリンクに共通の距離を指定しておくと、統一感も出ます。

64
00:05:15.017 --> 00:05:19.200
特にスマートフォンの小さい画面では、下線と文字の距離が読みやすさを左右しますので、

65
00:05:19.200 --> 00:05:23.384
実機でも確認すると安心です。

66
00:05:23.384 --> 00:05:26.338
効かないときと間違えやすい点を確認します。

67
00:05:26.338 --> 00:05:31.120
一番の注意点は、このプロパティが動かすのは下線だけだということです。

68
00:05:31.120 --> 00:05:36.043
取り消し線や上線など、他の装飾線までまとめて動かすものではありません。

69
00:05:36.043 --> 00:05:41.528
また、そもそも下線が引かれていない要素では、値を変えても見た目は変わりません。

70
00:05:41.528 --> 00:05:47.154
フォントによって適切な距離も変わるので、書体を変えたら見え方も再確認しましょう。

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

72
00:05:53.343 --> 00:05:59.532
最後に三百二十ピクセル程度の狭い画面幅や文字拡大でも読めるかを確認してください。

73
00:05:59.532 --> 00:06:01.676
ブラウザー互換性を確認します。

74
00:06:01.676 --> 00:06:07.107
記事が参照するエムディーエヌの記録では、クロームが八十七以降、エッジが八十七以降、

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

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

77
00:06:18.112 --> 00:06:22.685
少し前のブラウザーから使えるため、今回比べたゼロ点三エムやゼロ点一エムといった基本の指定は、

78
00:06:22.685 --> 00:06:27.259
安心して使えると考えてよいでしょう。

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

80
00:06:31.618 --> 00:06:35.977
新しい書き方では値ごとの対応も確認してください。

81
00:06:35.977 --> 00:06:43.552
対応開始のバージョンは値によって異なる場合もあるため、実際に使うブラウザーで表示を確認する習慣も大切です。

82
00:06:43.552 --> 00:06:45.368
最後に練習とまとめです。

83
00:06:45.368 --> 00:06:46.275
まとめます。

84
00:06:46.275 --> 00:06:50.133
テキストアンダーラインオフセットは、下線と文字の距離を調整する設定で、初期値はオート、

85
00:06:50.133 --> 00:06:53.991
継承はしました。

86
00:06:53.991 --> 00:06:59.287
ゼロ点三エムでは下線が文字から離れ、ゼロ点一エムでは文字に近付きます。

87
00:06:59.287 --> 00:07:03.977
割合で指定する場合はフォントサイズが基準になる点も大切でした。

88
00:07:03.977 --> 00:07:13.054
練習として、まずゼロ点三エムとゼロ点一エムの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

89
00:07:13.054 --> 00:07:14.416
お疲れさまでした。

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

91
00:07:18.576 --> 00:07:22.737
下線まわりの理解が深まります。

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