WEBVTT

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

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

3
00:00:03.745 --> 00:00:06.867
今回のテーマは、テキストインデントです。

4
00:00:06.867 --> 00:00:12.017
これは、段落の最初の行だけを右へずらして字下げするプロパティです。

5
00:00:12.017 --> 00:00:18.571
たとえば文章の書き出しだけが一文字分下がり、二行目以降は左端からそのまま始まります。

6
00:00:18.571 --> 00:00:24.033
小説やレポートで段落の始まりを分かりやすくする、あの形を作る指定です。

7
00:00:24.033 --> 00:00:29.261
今回は、ワンエムとゼロを中心に比べながら、値の書き方、割合の考え方、そしてパディングとの違いまで、

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

9
00:00:34.489 --> 00:00:41.668
段落が切り替わったことが一目で伝わるため、長い文章でも読み手が区切りを見失いにくくなります。

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

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

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

13
00:00:51.612 --> 00:00:54.776
スライドの例ではワンエムを指定しています。

14
00:00:54.776 --> 00:01:00.201
エムは文字の大きさを基準にした単位で、ワンエムはおよそ一文字分の幅です。

15
00:01:00.201 --> 00:01:03.967
これで対象の段落の先頭行だけが一文字分下がります。

16
00:01:03.967 --> 00:01:12.405
エイチティーエムエル側でクラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることが前提です。

17
00:01:12.405 --> 00:01:17.528
まずはこの一行を書き、最初の行だけがずれることを確認してみましょう。

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

19
00:01:19.718 --> 00:01:24.773
テキストインデントには長さを指定でき、代表例がワンエムです。

20
00:01:24.773 --> 00:01:33.534
文字サイズを基準にするので、文字を大きくすれば字下げ幅も一緒に広がり、バランスが崩れにくいのが利点です。

21
00:01:33.534 --> 00:01:38.083
ピクセルやレムといった他の長さの単位でも指定できます。

22
00:01:38.083 --> 00:01:43.474
またマイナスの値を書くと、先頭行が左側へはみ出す形にもできます。

23
00:01:43.474 --> 00:01:47.855
ただし本文で使うのは通常のプラスの字下げが基本です。

24
00:01:47.855 --> 00:01:53.246
まずはワンエムを基準に、読みやすい幅を探す感覚をつかみましょう。

25
00:01:53.246 --> 00:02:00.828
逆に、幅を決め打ちしたい場面ではピクセル指定が分かりやすく、運用ルールに合わせて選べます。

26
00:02:00.828 --> 00:02:04.043
長さのほかに、割合でも指定できます。

27
00:02:04.043 --> 00:02:13.510
たとえばテンパーセントと書くと、字下げ幅は包含ブロック、つまり段落が入っている箱の幅の十分の一になります。

28
00:02:13.510 --> 00:02:21.190
親の幅が広がれば字下げも広がるため、画面幅によって見え方が変わる点に注意してください。

29
00:02:21.190 --> 00:02:24.941
もう一つのゼロは、字下げをしない指定です。

30
00:02:24.941 --> 00:02:28.871
先頭行も二行目以降と同じ左端から始まります。

31
00:02:28.871 --> 00:02:33.158
このゼロが、このプロパティの初期値でもあります。

32
00:02:33.158 --> 00:02:38.337
記事の実例でも、ワンエムとゼロを切り替えて違いを比べます。

33
00:02:38.337 --> 00:02:43.696
固定したいなら長さ、可変でよいなら割合、と使い分けましょう。

34
00:02:43.696 --> 00:02:45.225
基本情報を確認します。

35
00:02:45.225 --> 00:02:49.115
テキストインデントの初期値はゼロで、字下げはありません。

36
00:02:49.115 --> 00:02:51.478
そしてこのプロパティは継承します。

37
00:02:51.478 --> 00:02:56.480
親要素に指定すれば、中の段落にも同じ字下げが引き継がれるということです。

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

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

40
00:03:08.292 --> 00:03:12.808
ブラウザーの既定スタイルで見えている値と仕様上の初期値は同じとは限らないので、

41
00:03:12.808 --> 00:03:17.324
最終的には開発者ツールで確認する習慣を付けましょう。

42
00:03:17.324 --> 00:03:19.472
ここからは記事の実例です。

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

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

45
00:03:32.938 --> 00:03:37.978
折り返して複数行になる長さにしてあります。

46
00:03:37.978 --> 00:03:45.578
複数行あることが大切で、最初の行だけが下がり、二行目以降が元の位置に残る様子を観察できます。

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

48
00:03:50.370 --> 00:03:57.144
比べるのはテキストインデントだけなので、文章や構造などの土台は変えずに固定します。

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

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

51
00:04:04.987 --> 00:04:10.216
ここで最後の行にテキストインデント、ワンエムを指定すると、最初の行だけが一文字分下がって始まり、

52
00:04:10.216 --> 00:04:15.444
二行目以降は枠の内側の左端にそろいます。

53
00:04:15.444 --> 00:04:21.288
次に最後の行だけをゼロへ換えると、先頭行も左端から始まる通常の形に戻ります。

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

55
00:04:23.441 --> 00:04:30.053
ファイルを保存してブラウザーを再読み込みし、行ごとの開始位置に注目して比べてください。

56
00:04:30.053 --> 00:04:33.283
自分の目で確かめることが理解への近道です。

57
00:04:33.283 --> 00:04:40.972
二行目以降の左端がそろっているかどうかも一緒に見ると、最初の行だけが動いたことがはっきり分かります。

58
00:04:40.972 --> 00:04:42.746
活用場面を整理します。

59
00:04:42.746 --> 00:04:46.456
代表的なのは、日本語の文章での段落字下げです。

60
00:04:46.456 --> 00:04:51.698
段落の書き出しを一文字分下げることで、段落の区切りが視覚的に分かりやすくなり、

61
00:04:51.698 --> 00:04:56.940
小説やレポートのような読み物らしい見た目になります。

62
00:04:56.940 --> 00:05:01.536
シーエスエスで指定すれば、本文のすべての段落に一括で同じ字下げを付けられ、

63
00:05:01.536 --> 00:05:06.133
あとから幅を変えたり外したりも簡単です。

64
00:05:06.133 --> 00:05:14.036
反対に、見出しの直後や箇条書きなど、字下げが不要な場所ではゼロに戻す指定を用意しておくと整います。

65
00:05:14.036 --> 00:05:19.520
文章の種類に合わせて、付ける場所と付けない場所を分けるのがコツです。

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

67
00:05:22.756 --> 00:05:25.837
一番の注意点は、パディングとの違いです。

68
00:05:25.837 --> 00:05:32.616
パディングは段落全体を内側へ動かしますが、テキストインデントは最初の行だけを動かします。

69
00:05:32.616 --> 00:05:35.389
目的が違うので代わりにはなりません。

70
00:05:35.389 --> 00:05:40.628
また、本文に全角空白を入れて字下げする方法と、シーエスエスで字下げする方法を混在させると、

71
00:05:40.628 --> 00:05:45.866
二重に下がったり段落ごとにばらついたりします。

72
00:05:45.866 --> 00:05:48.178
どちらか一方にそろえましょう。

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

74
00:05:53.416 --> 00:05:58.654
最後に狭い画面幅でも読めるか確認します。

75
00:05:58.654 --> 00:06:06.204
また三百二十ピクセル程度の狭い画面や文字拡大でも、字下げが邪魔にならず読めるかを確認してください。

76
00:06:06.204 --> 00:06:08.261
ブラウザー互換性を確認します。

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

78
00:06:14.090 --> 00:06:19.919
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、とても古くから対応しています。

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

80
00:06:24.719 --> 00:06:30.342
今回比べたワンエムやゼロといった基本の指定は、安心して使えると考えてよいでしょう。

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

82
00:06:35.279 --> 00:06:39.256
新しい書き方を使うときは、値ごとの対応も確認してください。

83
00:06:39.256 --> 00:06:41.018
最後に練習とまとめです。

84
00:06:41.018 --> 00:06:41.899
まとめます。

85
00:06:41.899 --> 00:06:45.202
テキストインデントは、段落の最初の行だけを字下げする設定で、初期値はゼロ、

86
00:06:45.202 --> 00:06:48.505
継承はしました。

87
00:06:48.505 --> 00:06:53.644
ワンエムでは先頭行だけが一文字分下がり、ゼロでは字下げがなくなります。

88
00:06:53.644 --> 00:06:58.488
割合で指定する場合は、包含ブロックの幅が基準になる点も大切でした。

89
00:06:58.488 --> 00:07:06.416
練習として、まずワンエムとゼロの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

90
00:07:06.416 --> 00:07:07.738
お疲れさまでした。

91
00:07:07.738 --> 00:07:14.785
関連するテキストトランスフォームやホワイトスペースも一緒に学ぶと、文字まわりの理解が深まります。

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