WEBVTT

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

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

3
00:00:03.703 --> 00:00:07.097
今回のテーマは、テキストオーバーフローです。

4
00:00:07.097 --> 00:00:14.812
これは、決められた幅に文章が入り切らないとき、はみ出した部分をどう知らせるかを決めるプロパティです。

5
00:00:14.812 --> 00:00:22.680
代表的なのは、文の末尾を三点リーダー、いわゆる点々で置き換えて、まだ続きがあることを伝える使い方です。

6
00:00:22.680 --> 00:00:26.537
カードのタイトルやファイル名などでよく見かけます。

7
00:00:26.537 --> 00:00:32.555
ただし大切なのは、このプロパティだけで文字が切り詰められるわけではない点です。

8
00:00:32.555 --> 00:00:38.572
この動画では、効くための条件と、代表的な値の違いを実例で比べながら解説します。

9
00:00:38.572 --> 00:00:44.281
長いタイトルが混ざる一覧でも、行の高さがそろうと全体が読みやすくなります。

10
00:00:44.281 --> 00:00:47.212
その整え役として覚えておくと便利です。

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

12
00:00:48.792 --> 00:00:55.830
セレクターを書いたら、テキストオーバーフローと書き、コロンのあとに値、最後にセミコロンを付けます。

13
00:00:55.830 --> 00:00:59.134
スライドの例では、エリプシスを指定しています。

14
00:00:59.134 --> 00:01:04.304
これで、条件がそろったときに、はみ出した末尾が省略記号に置き換わります。

15
00:01:04.304 --> 00:01:13.641
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

16
00:01:13.641 --> 00:01:18.668
まずはこの一行を書き、長い文章の末尾がどう変わるか確かめてみましょう。

17
00:01:18.668 --> 00:01:23.264
値のスペルを間違えると宣言ごと無効になるので、注意してください。

18
00:01:23.264 --> 00:01:26.349
次に、このプロパティが効くための条件です。

19
00:01:26.349 --> 00:01:29.287
実は三つの指定をそろえる必要があります。

20
00:01:29.287 --> 00:01:31.932
一つ目は、幅や最大幅による制約です。

21
00:01:31.932 --> 00:01:35.311
幅が決まらなければ、はみ出し自体が起きません。

22
00:01:35.311 --> 00:01:38.984
二つ目は、オーバーフローをヒドゥンにすることです。

23
00:01:38.984 --> 00:01:43.391
はみ出した部分を隠すことで、初めて切り詰めの対象になります。

24
00:01:43.391 --> 00:01:47.358
三つ目は、ホワイトスペースをノーラップにすることです。

25
00:01:47.358 --> 00:01:52.059
改行を禁止して一列に並べることで、行の末尾ではみ出しが起きます。

26
00:01:52.059 --> 00:01:53.969
この三つが三点セットです。

27
00:01:53.969 --> 00:01:58.523
一つでも欠けると、エリプシスを指定しても点々は表示されません。

28
00:01:58.523 --> 00:02:04.400
逆にいえば、点々が出ないときは、この三つのどれかが欠けていることがほとんどです。

29
00:02:04.400 --> 00:02:07.044
確認の順番として覚えておきましょう。

30
00:02:07.044 --> 00:02:11.326
ここでは、記事でも比較している二つの代表値を見ます。

31
00:02:11.326 --> 00:02:16.101
エリプシスは、はみ出した末尾を三点リーダーに置き換えます。

32
00:02:16.101 --> 00:02:20.712
読み手には、文章にまだ続きがあることが一目で伝わります。

33
00:02:20.712 --> 00:02:26.311
もう一つのクリップは初期値で、はみ出した部分をそのまま切り取ります。

34
00:02:26.311 --> 00:02:32.569
文字の途中でぷつっと切れたように見え、続きがあることは記号では伝わりません。

35
00:02:32.569 --> 00:02:38.992
場面でいうと、一覧のタイトルなど、全文が別で読めるときはエリプシスが親切です。

36
00:02:38.992 --> 00:02:45.414
まずはこの二つを切り替えて、行末の見え方の違いを自分の目で比べてみてください。

37
00:02:45.414 --> 00:02:53.154
なお、点々はブラウザーが自動で付ける表示で、元の文章データ自体が書き換わるわけではありません。

38
00:02:53.154 --> 00:02:55.624
コピーすると全文が得られます。

39
00:02:55.624 --> 00:02:58.281
初期値と継承について整理します。

40
00:02:58.281 --> 00:03:02.266
テキストオーバーフローの初期値は、クリップです。

41
00:03:02.266 --> 00:03:09.239
つまり、何も指定しなければ、はみ出した文字は記号に変わらず、そのまま切り取られます。

42
00:03:09.239 --> 00:03:13.390
そして、このプロパティは親から通常は継承しません。

43
00:03:13.390 --> 00:03:22.024
親にエリプシスを指定しても、子要素に自動では伝わらないので、省略したい要素自身に指定する必要があります。

44
00:03:22.024 --> 00:03:26.756
また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

45
00:03:26.756 --> 00:03:31.488
普段は値を直接書くことがほとんどです。

46
00:03:31.488 --> 00:03:37.964
仕様上の初期値とブラウザーの既定表示が同じとは限らない点も覚えておきましょう。

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

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

49
00:03:47.995 --> 00:03:53.167
その中身は、スペースのない、とても長いユーアールエルの文字列です。

50
00:03:53.167 --> 00:03:59.750
途中で折り返す場所がない長い文字列だと、横幅からはみ出す様子が分かりやすくなります。

51
00:03:59.750 --> 00:04:05.236
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

52
00:04:05.236 --> 00:04:11.818
比べたいのはテキストオーバーフローだけなので、文章などの土台は固定したままにします。

53
00:04:11.818 --> 00:04:15.737
親と子の入れ子の構造を先に頭に入れておきましょう。

54
00:04:15.737 --> 00:04:20.439
記事の例では、この長い文字列そのものが比較の材料になります。

55
00:04:20.439 --> 00:04:24.984
短い文章でははみ出しが起きず、値の違いが見えないためです。

56
00:04:24.984 --> 00:04:27.042
土台のシーエスエスです。

57
00:04:27.042 --> 00:04:34.244
ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。

58
00:04:34.244 --> 00:04:39.817
デモの最大幅は十五レムに絞り、ホワイトスペース、ノーラップとオーバーフロー、

59
00:04:39.817 --> 00:04:45.390
ヒドゥンで、一行に収めてはみ出させる条件をそろえます。

60
00:04:45.390 --> 00:04:52.077
最後の行でテキストオーバーフローをエリプシスにすると、行末が点々に変わります。

61
00:04:52.077 --> 00:04:58.593
次に最後の行だけをクリップへ置き換えると、記号は出ずに文字が途中で切れます。

62
00:04:58.593 --> 00:05:01.508
この一行の違いが比較ポイントです。

63
00:05:01.508 --> 00:05:05.795
保存して再読み込みし、行末だけに注目してください。

64
00:05:05.795 --> 00:05:11.969
幅を少しずつ変えてみると、点々が現れる位置も一緒に動くことが分かります。

65
00:05:11.969 --> 00:05:16.084
はみ出しが幅に左右される様子も確認してください。

66
00:05:16.084 --> 00:05:18.199
活用場面を考えてみましょう。

67
00:05:18.199 --> 00:05:22.732
よく使われるのは、カードや商品一覧、記事一覧のタイトルです。

68
00:05:22.732 --> 00:05:29.683
タイトルの長さがばらばらでも、各行の高さを一行にそろえられるので、一覧全体が整って見えます。

69
00:05:29.683 --> 00:05:36.180
表のセルや、横並びのナビゲーション項目、長いファイル名の表示でも同じ考え方が使えます。

70
00:05:36.180 --> 00:05:40.260
ただし、省略された全文がどこかで読めることが前提です。

71
00:05:40.260 --> 00:05:47.815
詳細ページで読めたり、タイトル属性やツールチップで全文を確認できたりする設計と組み合わせてください。

72
00:05:47.815 --> 00:05:52.952
見た目をそろえることと、情報を失わないことを両立させるのがコツです。

73
00:05:52.952 --> 00:05:55.503
効かないと感じたときの注意点です。

74
00:05:55.503 --> 00:05:59.255
まず最も多い原因は、先ほどの三点セットの不足です。

75
00:05:59.255 --> 00:06:04.358
幅の制約があるか、オーバーフローがヒドゥンになっているか、ホワイトスペースがノーラップになっているか、

76
00:06:04.358 --> 00:06:09.460
この三つを順番に確認してください。

77
00:06:09.460 --> 00:06:15.463
もう一つの誤解は、複数行の文章をこのプロパティだけで省略しようとする使い方です。

78
00:06:15.463 --> 00:06:19.965
テキストオーバーフローが扱うのは基本的に一行の行末だけです。

79
00:06:19.965 --> 00:06:23.117
そのうえで、開発者ツールで順番に調べます。

80
00:06:23.117 --> 00:06:27.619
ネットワークで取得、エレメンツでクラスの一致、スタイルズで上書きの有無、

81
00:06:27.619 --> 00:06:32.121
コンピューテッドで最終的な値を確認してください。

82
00:06:32.121 --> 00:06:38.124
最後に、三百二十ピクセル程度の狭い画面幅でも、内容を利用できるか確認しましょう。

83
00:06:38.124 --> 00:06:40.489
ブラウザー互換性を確認します。

84
00:06:40.489 --> 00:06:47.030
記事が参照するエムディーエヌの記録では、クロームは一以降、エッジは十二以降、

85
00:06:47.030 --> 00:06:53.572
ファイアフォックスは七以降、サファリは一・三以降と、とても古い版から対応が示されています。

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

87
00:06:59.089 --> 00:07:07.287
値ごとに見ても、クリップとエリプシスで対応の範囲はほぼ共通ですが、一部に補足条件ありと注記されています。

88
00:07:07.287 --> 00:07:14.853
古くから広く使えるプロパティといえますが、細かな挙動は対象ブラウザーで実物を確認すると安心です。

89
00:07:14.853 --> 00:07:24.784
スマートフォン向けのブラウザーでも早い時期から対応しているので、画面幅が変わりやすいレスポンシブな一覧でも使いやすい指定です。

90
00:07:24.784 --> 00:07:26.501
最後に練習とまとめです。

91
00:07:26.501 --> 00:07:27.359
まとめます。

92
00:07:27.359 --> 00:07:32.652
テキストオーバーフローは、幅からはみ出した一行の末尾を、省略記号で示すか、

93
00:07:32.652 --> 00:07:37.944
そのまま切り取るかを決める設定で、初期値はクリップ、継承はしませんでした。

94
00:07:37.944 --> 00:07:45.955
そして、幅の制約、オーバーフロー、ヒドゥン、ホワイトスペース、ノーラップの三点セットがそろって初めて効きました。

95
00:07:45.955 --> 00:07:50.604
練習として、まずエリプシスとクリップの違いを言葉で説明し、次に文章量や親の幅だけを変えて、

96
00:07:50.604 --> 00:07:55.253
結果がどう変わるかを比べてみてください。

97
00:07:55.253 --> 00:07:56.541
お疲れさまでした。

98
00:07:56.541 --> 00:08:03.836
関連するホワイトスペースとオーバーフローも一緒に学ぶと、文字のはみ出しをまとめて扱えるようになります。