WEBVTT

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

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

3
00:00:03.698 --> 00:00:06.780
今回のテーマは、レタースペーシングです。

4
00:00:06.780 --> 00:00:11.557
これは、文字と文字の間隔、つまり字間を調整するプロパティです。

5
00:00:11.557 --> 00:00:15.641
間隔を少し広げるだけで、見出しはゆったりと上品に見え、逆に広げ過ぎると、

6
00:00:15.641 --> 00:00:19.724
長文はかえって読みにくくなります。

7
00:00:19.724 --> 00:00:24.886
今回は、ゼロ・一二エムという少し広い値と、標準のノーマルを比べながら、基本の書き方から注意点まで、

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

9
00:00:30.049 --> 00:00:34.132
文字の大きさや太さを変えなくても、間隔ひとつで文章の印象が大きく変わることを、

10
00:00:34.132 --> 00:00:38.216
実例で確かめていきましょう。

11
00:00:38.216 --> 00:00:45.458
見出しの字間を整える作業は、実際のサイト制作でも頻繁に登場する、身近で実用的なテクニックです。

12
00:00:45.458 --> 00:00:47.009
まず基本の書き方です。

13
00:00:47.009 --> 00:00:51.311
書き方はとてもシンプルで、レタースペーシングの後ろにコロンを書き、間隔の値をひとつだけ書いて、

14
00:00:51.311 --> 00:00:55.612
最後にセミコロンを付けます。

15
00:00:55.612 --> 00:01:00.548
スライドの例では、デモというクラスに、ゼロ・一二エムを指定しています。

16
00:01:00.548 --> 00:01:07.035
エムは文字の大きさを基準にした単位で、文字サイズが変われば、間隔もそれに合わせて広がります。

17
00:01:07.035 --> 00:01:11.971
クラス名のドットや波かっこを書き忘れると効かないので、まずはこの三行をそのまま書き、

18
00:01:11.971 --> 00:01:16.907
ブラウザーで文字の間が少し開く様子を確かめてみましょう。

19
00:01:16.907 --> 00:01:23.958
値の前後に半角スペースを入れておくと、後から読み返したときにも、どこが間隔の指定か一目で分かります。

20
00:01:23.958 --> 00:01:26.457
指定できる値を読み解きましょう。

21
00:01:26.457 --> 00:01:30.362
大きく分けて、ノーマルと、長さの二通りがあります。

22
00:01:30.362 --> 00:01:35.516
ノーマルは、フォントが本来持っている標準の間隔で表示する指定です。

23
00:01:35.516 --> 00:01:39.733
長さで書く場合は、ピクセルやエムなどの単位を付けます。

24
00:01:39.733 --> 00:01:44.262
プラスの値で間隔が広がり、マイナスの値で間隔が詰まります。

25
00:01:44.262 --> 00:01:49.729
ただし、マイナスを大きくし過ぎると文字同士が重なって読めなくなります。

26
00:01:49.729 --> 00:01:54.414
指定するときは、広げるにしても詰めるにしても、小さな値から少しずつ試し、

27
00:01:54.414 --> 00:01:59.100
実際の画面で読みやすさを確認することが大切です。

28
00:01:59.100 --> 00:02:07.378
迷ったときは、まずノーマルから始め、少しだけ広げた値と見比べる手順が、初心者には一番分かりやすい方法です。

29
00:02:07.378 --> 00:02:09.526
単位の選び方を補足します。

30
00:02:09.526 --> 00:02:15.805
エムで指定すると、文字の大きさに比例して間隔が決まるので、見出しのように文字が大きい場所でも、

31
00:02:15.805 --> 00:02:22.084
本文のように小さい場所でも、バランスが崩れにくくなります。

32
00:02:22.084 --> 00:02:25.389
一方、ピクセルは画面上の固定の広さです。

33
00:02:25.389 --> 00:02:32.164
細かく狙いたい場面では分かりやすい反面、文字サイズが変わっても間隔は連動しません。

34
00:02:32.164 --> 00:02:36.295
実務では、短い見出しに少し広い間隔、長い本文にはごく小さな間隔かノーマル、

35
00:02:36.295 --> 00:02:40.426
という使い分けが基本です。

36
00:02:40.426 --> 00:02:47.036
本文全体に広い字間を設定すると、視線が文字を追いづらくなる点に注意してください。

37
00:02:47.036 --> 00:02:56.124
レスポンシブな画面では、文字サイズが変わる場面も多いため、連動するエム指定の方が扱いやすい場合が多くなります。

38
00:02:56.124 --> 00:02:58.079
初期値と継承を確認します。

39
00:02:58.079 --> 00:03:03.191
初期値はノーマルで、指定しなければフォント標準の間隔で表示されます。

40
00:03:03.191 --> 00:03:06.649
そして、このプロパティは親から子へ継承します。

41
00:03:06.649 --> 00:03:12.062
親の要素に書けば、その中にある見出しや文章にも同じ間隔が引き継がれます。

42
00:03:12.062 --> 00:03:19.580
便利な反面、広い範囲に広い字間を書いてしまうと、意図しない場所まで間隔が開いてしまうことがあります。

43
00:03:19.580 --> 00:03:25.143
継承を取り消したい要素には、改めてノーマルや小さい値を書き直してください。

44
00:03:25.143 --> 00:03:34.164
また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルと長さの違いをしっかり押さえましょう。

45
00:03:34.164 --> 00:03:38.149
継承の仕組みを理解しておくと、長い文章全体に一括で間隔を付けたり、外したりする作業が、

46
00:03:38.149 --> 00:03:42.133
ぐっと楽になります。

47
00:03:42.133 --> 00:03:44.092
ここからは記事の実例です。

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

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

50
00:03:56.372 --> 00:04:00.968
折り返して複数行になる長さにしてあります。

51
00:04:00.968 --> 00:04:07.447
複数行あると、字間が広がったときに、行末の折り返し位置がどう変わるかまで観察できます。

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

53
00:04:11.816 --> 00:04:16.638
この土台は変えずに固定し、次で変える一行の効果だけを観察します。

54
00:04:16.638 --> 00:04:24.473
ブラウザーで開いたときに折り返しが見える長さにしておくことが、間隔の効果を確かめるための大切な準備です。

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

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

57
00:04:32.849 --> 00:04:39.090
最後の行でレタースペーシングにゼロ・一二エムを指定すると、一文字ごとの間隔が広がり、

58
00:04:39.090 --> 00:04:45.331
同じ文章でも一行に収まる文字数が減って、折り返す位置が早くなります。

59
00:04:45.331 --> 00:04:51.407
色や余白は一切変えていないのに、文章がゆったりと間延びして見えるはずです。

60
00:04:51.407 --> 00:04:56.170
ファイルを保存してブラウザーを再読み込みし、文字の間隔と行末の位置の二点が同時に変わる様子を、

61
00:04:56.170 --> 00:05:00.933
よく観察してください。

62
00:05:00.933 --> 00:05:08.980
間隔が広がると、文章全体の横幅が伸びるため、親の箱に収まるかどうかも合わせて目で確かめてください。

63
00:05:08.980 --> 00:05:12.618
次に最後の行だけを、ノーマルへ置き換えます。

64
00:05:12.618 --> 00:05:19.728
すると、広がっていた文字の間隔がフォント標準に戻り、文章は元の詰まった並びに戻ります。

65
00:05:19.728 --> 00:05:25.515
一行に収まる文字数も増えるため、先ほどとは違う位置で折り返すはずです。

66
00:05:25.515 --> 00:05:29.483
ここで大切なのは、色や大きさは同じでも、間隔だけで読みやすさや行の長さが変わる、

67
00:05:29.483 --> 00:05:33.451
という実感です。

68
00:05:33.451 --> 00:05:39.569
広ければ良いわけではなく、文章の長さや文字の大きさに合った間隔が最適です。

69
00:05:39.569 --> 00:05:46.514
変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。

70
00:05:46.514 --> 00:05:55.112
二つの表示を交互に切り替えて比べると、間隔のわずかな違いが、読みやすさにどう影響するかがよく分かります。

71
00:05:55.112 --> 00:05:57.082
間違えやすい点を確認します。

72
00:05:57.082 --> 00:06:01.867
一番多い失敗は、日本語の本文全体に広い字間を設定してしまうことです。

73
00:06:01.867 --> 00:06:08.200
短い見出しでは上品に見えても、長い本文では視線の移動が増えて、かえって読みにくくなります。

74
00:06:08.200 --> 00:06:12.563
二つ目は、マイナスの値を大きくして文字を重ねてしまうことです。

75
00:06:12.563 --> 00:06:17.770
三つ目は、セレクターの不一致や、別の宣言に上書きされて効かないケースです。

76
00:06:17.770 --> 00:06:22.836
効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、

77
00:06:22.836 --> 00:06:27.903
コンピューテッドの順に調べ、対象の宣言が残っているかを確認しましょう。

78
00:06:27.903 --> 00:06:31.421
狭い画面幅や文字拡大でも読めるかの確認も大切です。

79
00:06:31.421 --> 00:06:39.443
特に、継承で親から広い間隔が届いていないかを確認すると、原因が見つかることがよくありますので忘れずに見てください。

80
00:06:39.443 --> 00:06:41.542
ブラウザー互換性を確認します。

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

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

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

84
00:06:57.212 --> 00:07:02.248
値のノーマルについても、主要ブラウザーで同じく古い版から対応しています。

85
00:07:02.248 --> 00:07:08.964
とても歴史の長いプロパティなので、今回使った基本の書き方は、安心して使えると考えてよいでしょう。

86
00:07:08.964 --> 00:07:15.120
ただし、新しい単位や珍しい書き方を追加する場合は、その部分の対応も別に確認してください。

87
00:07:15.120 --> 00:07:18.967
古いブラウザーまで含めて広く使えるため、字間の調整は、表示確認の負担が少ない、

88
00:07:18.967 --> 00:07:22.815
取り組みやすい装飾のひとつです。

89
00:07:22.815 --> 00:07:24.633
最後に練習とまとめです。

90
00:07:24.633 --> 00:07:25.542
まとめます。

91
00:07:25.542 --> 00:07:29.405
レタースペーシングは、文字と文字の間隔を決めるプロパティで、初期値はノーマル、

92
00:07:29.405 --> 00:07:33.269
親から子へ継承しました。

93
00:07:33.269 --> 00:07:40.692
プラスの長さで広がり、マイナスの長さで詰まりますが、広げ過ぎも詰め過ぎも読みにくさにつながります。

94
00:07:40.692 --> 00:07:45.919
練習として、まずゼロ・一二エムとノーマルの違いを言葉で説明し、次に親の幅や文章量だけを変えて、

95
00:07:45.919 --> 00:07:51.146
折り返しがどう変わるかを比べてみてください。

96
00:07:51.146 --> 00:07:52.510
お疲れさまでした。

97
00:07:52.510 --> 00:07:59.630
関連するラインハイトやフォントも合わせて学ぶと、文字まわりの整え方がより確かなものになります。

98
00:07:59.630 --> 00:08:07.963
関連プロパティも含めて文字まわりを整えられるようになると、見出しと本文のメリハリを自分で作れるようになります。