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:06.591
今回のテーマは、ホワイトスペースです。

4
00:00:06.591 --> 00:00:13.948
これは、エイチティーエムエルの中に書かれた空白や改行を、画面にどう出すかを決めるプロパティです。

5
00:00:13.948 --> 00:00:20.079
普段の文章では、連続したスペースは一つにまとめられ、ソースの改行は無視されます。

6
00:00:20.079 --> 00:00:23.910
そのおかげで、見た目を気にせず自由に整形できます。

7
00:00:23.910 --> 00:00:29.888
一方、コードや整形済みの文章では、空白と改行をそのまま残したい場面もあります。

8
00:00:29.888 --> 00:00:34.180
今回は初期値のノーマルと、空白を保ちながら折り返すプリラップを中心に比べ、

9
00:00:34.180 --> 00:00:38.471
値の使い分けを分かりやすく解説します。

10
00:00:38.471 --> 00:00:42.916
この三つの扱いの組み合わせが、値ごとの違いを生んでいます。

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

12
00:00:44.484 --> 00:00:50.900
セレクターのあとにプロパティ名を書き、コロンを挟んで値を入れ、最後にセミコロンを付けます。

13
00:00:50.900 --> 00:00:54.036
スライドの例ではプリラップを指定しています。

14
00:00:54.036 --> 00:00:59.596
これで、連続した空白と改行を保ちながら、行が長くなれば折り返す表示になります。

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

16
00:01:07.580 --> 00:01:11.999
まずはこの一行を書き、空白と改行の残り方を確認してみましょう。

17
00:01:11.999 --> 00:01:16.419
値のつづりを誤ると宣言全体が無効になる点にも注意してください。

18
00:01:16.419 --> 00:01:20.696
値の部分だけを書き換えれば、他の指定はそのまま比較できます。

19
00:01:20.696 --> 00:01:23.336
代表的な値を順に見ていきます。

20
00:01:23.336 --> 00:01:25.096
まずはノーマルです。

21
00:01:25.096 --> 00:01:29.321
これは初期値で、ふだんの文章に使われる扱いです。

22
00:01:29.321 --> 00:01:37.769
連続したスペースやタブは一つのスペースにまとめられ、ソースの中の改行もスペースとして扱われます。

23
00:01:37.769 --> 00:01:41.994
そして行が箱の幅に達すると、自動で折り返します。

24
00:01:41.994 --> 00:01:49.738
たとえばエイチティーエムエルで三つ続けて打ったスペースは、画面では一つにしか見えません。

25
00:01:49.738 --> 00:01:56.955
読み物としての自然さを優先する指定なので、本文は基本的にこのままで問題ありません。

26
00:01:56.955 --> 00:02:01.355
まずは基準として、この見え方を覚えておきましょう。

27
00:02:01.355 --> 00:02:07.164
文章の意味は変わらず、見た目の整い方だけが変わる点もポイントです。

28
00:02:07.164 --> 00:02:09.801
次は、折り返さない二つの値です。

29
00:02:09.801 --> 00:02:17.053
まずノーラップは、空白のまとめ方はノーマルと同じですが、行の端でも自動で折り返しません。

30
00:02:17.053 --> 00:02:22.163
表の見出しやボタンの中など、一行で見せたい短い文字に使います。

31
00:02:22.163 --> 00:02:28.426
もう一つのプリは、連続した空白も改行も書いたまま保持し、折り返しもしません。

32
00:02:28.426 --> 00:02:32.876
プレ要素の既定の扱いと同じで、コードの表示に向きます。

33
00:02:32.876 --> 00:02:41.776
ただし長い行はそのまま横にはみ出すため、コードに使うときは横スクロールを一緒に用意するのが記事の注意点です。

34
00:02:41.776 --> 00:02:45.238
この二つは折り返さない点が共通しています。

35
00:02:45.238 --> 00:02:50.512
短い文字に絞って使うことで、はみ出しの事故を防ぎやすくなります。

36
00:02:50.512 --> 00:02:54.272
続いて、保持と折り返しを両立させる値です。

37
00:02:54.272 --> 00:03:01.791
プリラップは、連続した空白と改行をそのまま保ちながら、長い行は箱の端で折り返します。

38
00:03:01.791 --> 00:03:06.804
プリの欠点だったはみ出しを抑えられる、実用的な指定です。

39
00:03:06.804 --> 00:03:12.534
プリラインは、改行だけを保持し、連続した空白は一つにまとめます。

40
00:03:12.534 --> 00:03:17.547
利用者の入力した改行を残したいコメント欄などに向きます。

41
00:03:17.547 --> 00:03:25.603
さらにブレークスペーシズはプリラップに近く、行末の空白でも折り返せる細かな違いがあります。

42
00:03:25.603 --> 00:03:28.468
ここで初期値と継承を確認します。

43
00:03:28.468 --> 00:03:33.660
初期値はノーマルで、このプロパティは親から子へ継承します。

44
00:03:33.660 --> 00:03:38.852
入力内容をそのまま出したい場面で、特に力を発揮する値です。

45
00:03:38.852 --> 00:03:40.805
ここからは記事の実例です。

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

47
00:03:48.466 --> 00:03:55.376
デモの中身には、ハローのあとにスペースを三つ続けた部分と、文章の途中の改行が含まれています。

48
00:03:55.376 --> 00:04:00.484
空白の数と改行が、そのまま見えるかどうかが比べるポイントだからです。

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

50
00:04:04.840 --> 00:04:10.849
比べるのはホワイトスペースだけなので、文章や構造などの土台は変えずに固定します。

51
00:04:10.849 --> 00:04:14.154
先に、この土台の形を頭に入れておきましょう。

52
00:04:14.154 --> 00:04:18.360
空白の数が分かるように、あえて目立つ形で用意した例です。

53
00:04:18.360 --> 00:04:20.499
土台のシーエスエスです。

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

55
00:04:27.451 --> 00:04:32.977
ここで最後の行にホワイトスペース、プリラップを指定すると、三つのスペースと改行が書いたまま残り、

56
00:04:32.977 --> 00:04:38.502
長い文章は端で折り返します。

57
00:04:38.502 --> 00:04:47.593
次に最後の行だけをノーマルへ換えると、スペースは一つにまとまり、改行も消えて文章が続けて表示されます。

58
00:04:47.593 --> 00:04:50.089
変わるのはこの一行だけです。

59
00:04:50.089 --> 00:04:58.466
ファイルを保存して再読み込みし、ハローの後ろの空白と、改行の位置だけに注目して比べてください。

60
00:04:58.466 --> 00:05:02.210
自分の目で確かめることが理解への近道です。

61
00:05:02.210 --> 00:05:08.092
違いが出る場所が限られるからこそ、初心者でも観察しやすい実例です。

62
00:05:08.092 --> 00:05:09.672
活用場面を整理します。

63
00:05:09.672 --> 00:05:17.141
コードを表示する場所では、空白と改行を保つプリかプリラップを使い、必要なら横スクロールも組み合わせます。

64
00:05:17.141 --> 00:05:24.467
利用者が入力した文章では、改行を残せるプリラップやプリラインが便利で、入力した形に近い表示になります。

65
00:05:24.467 --> 00:05:29.925
逆に、表の見出しやボタンの文字を一行に収めたいときはノーラップが役立ちます。

66
00:05:29.925 --> 00:05:36.102
ただしノーラップを長い本文に使うと横にはみ出しやすいので、短い要素に絞るのが安全です。

67
00:05:36.102 --> 00:05:40.555
目的に合わせて値を一つ選ぶ、という考え方を大切にしてください。

68
00:05:40.555 --> 00:05:44.864
迷ったら、まず保持したいものが空白か改行かから考えましょう。

69
00:05:44.864 --> 00:05:48.054
効かないときと間違えやすい点を確認します。

70
00:05:48.054 --> 00:05:56.866
まず、プリを指定したのに改行されない場合、エイチティーエムエルの中に実際の改行文字が入っているかを確かめてください。

71
00:05:56.866 --> 00:06:00.360
改行がなければ、保持する対象自体がありません。

72
00:06:00.360 --> 00:06:07.045
またプリは折り返さないため、長い行では横スクロールを用意しないと内容が読めなくなります。

73
00:06:07.045 --> 00:06:12.590
そのうえで開発者ツールを使い、ネットワークで取得、エレメンツでクラスの一致、

74
00:06:12.590 --> 00:06:18.136
スタイルズで上書きの有無、コンピューテッドで最終的な値を順に調べます。

75
00:06:18.136 --> 00:06:21.478
最後に狭い画面幅でも読めるか確認しましょう。

76
00:06:21.478 --> 00:06:25.884
原因を一つずつ切り分けると、解決までの時間が短くなります。

77
00:06:25.884 --> 00:06:27.951
ブラウザー互換性を確認します。

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

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

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

81
00:06:44.487 --> 00:06:49.379
ただし値ごとに差があり、たとえばプリラップは、クロームは一以降、エッジは十二以降、

82
00:06:49.379 --> 00:06:54.271
ファイアフォックスは三以降、サファリは三以降となっています。

83
00:06:54.271 --> 00:07:00.748
本体が使えることと、使いたい値が使えることは別なので、値まで含めて確認する習慣を付けましょう。

84
00:07:00.748 --> 00:07:04.744
長く使われてきた基本のプロパティなので、安心して使えます。

85
00:07:04.744 --> 00:07:06.275
最後に練習とまとめです。

86
00:07:06.275 --> 00:07:07.041
まとめます。

87
00:07:07.041 --> 00:07:10.358
ホワイトスペースは、空白と改行を保持するか、折り返すかを決める設定で、初期値はノーマル、

88
00:07:10.358 --> 00:07:13.675
継承はしました。

89
00:07:13.675 --> 00:07:18.587
ノーマルは空白をまとめて折り返し、ノーラップは折り返さず、プリは保持して折り返さず、

90
00:07:18.587 --> 00:07:23.500
プリラップは保持しながら折り返し、プリラインは改行だけを保持しました。

91
00:07:23.500 --> 00:07:30.772
練習として、まずプリラップとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

92
00:07:30.772 --> 00:07:31.920
お疲れさまでした。

93
00:07:31.920 --> 00:07:36.769
関連するオーバーフローラップやワードブレークも一緒に学ぶと理解が深まります。

94
00:07:36.769 --> 00:07:40.724
実際にブラウザーで切り替えて見ることが、一番の練習になります。