WEBVTT

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

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

3
00:00:03.608 --> 00:00:06.765
今回のテーマは、オーバーフローラップです。

4
00:00:06.765 --> 00:00:15.634
これは、長い単語やユーアールエルが箱の幅に収まらないとき、単語の途中で折り返してもよいかどうかを決めるプロパティです。

5
00:00:15.634 --> 00:00:22.849
通常の文章はスペースの位置で折り返せますが、スペースのない長い文字列には切れる場所がありません。

6
00:00:22.849 --> 00:00:27.509
そのままだと文字が横にはみ出し、レイアウトが崩れてしまいます。

7
00:00:27.509 --> 00:00:35.026
オーバーフローラップは、そうしたはみ出しが起きる場面に限って、文字列の途中での折り返しを許可します。

8
00:00:35.026 --> 00:00:41.339
この動画では三つの値の違いを、長いユーアールエルを使った実例で比べながら解説します。

9
00:00:41.339 --> 00:00:46.300
スマートフォンで見る場面を想像すると、その大切さがよく分かります。

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

11
00:00:47.776 --> 00:00:54.217
セレクターを書いたら、オーバーフローラップと書き、コロンのあとに値、最後にセミコロンを付けます。

12
00:00:54.217 --> 00:00:57.304
スライドの例では、エニウェアを指定しています。

13
00:00:57.304 --> 00:01:02.671
これで、長い文字列が箱に収まらないときに、任意の位置で折り返せるようになります。

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

15
00:01:11.394 --> 00:01:16.225
まずはこの一行を書き、長い文字列の右端がどう変わるか確かめてみましょう。

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

17
00:01:20.385 --> 00:01:24.008
一行だけの指定ですが、表示への影響ははっきり表れます。

18
00:01:24.008 --> 00:01:26.306
代表的な値を一つずつ見ていきます。

19
00:01:26.306 --> 00:01:27.657
まずはノーマルです。

20
00:01:27.657 --> 00:01:31.577
これは初期値で、通常の改行ルールだけを使って折り返します。

21
00:01:31.577 --> 00:01:38.335
スペースやハイフンなど、もともと切ってよい位置でのみ改行するので、単語の途中では基本的に切りません。

22
00:01:38.335 --> 00:01:43.201
そのため普通の文章の読みやすさは保たれますが、スペースのない長いユーアールエルでは、

23
00:01:43.201 --> 00:01:48.067
切れる場所が見つからず、文字列が箱からはみ出してしまいます。

24
00:01:48.067 --> 00:01:51.581
普段の文章では、このノーマルが自然で安全な選択です。

25
00:01:51.581 --> 00:01:54.555
まずは通常の見え方として覚えておきましょう。

26
00:01:54.555 --> 00:01:59.556
迷ったときは、まずこの初期値の見え方を基準に比べると分かりやすくなります。

27
00:01:59.556 --> 00:02:01.563
次はブレークワードです。

28
00:02:01.563 --> 00:02:07.500
これは、通常の位置で折り返すことを基本にしながら、それでも行が箱からはみ出してしまう場合に限って、

29
00:02:07.500 --> 00:02:13.438
単語の途中でも折り返してよいとする指定です。

30
00:02:13.438 --> 00:02:21.968
普段は単語のまとまりを大切にし、いざというときだけ途中で切る、控えめなはみ出し対策だと考えてください。

31
00:02:21.968 --> 00:02:28.323
長いユーアールエルを表示する場所では、まずこの値で十分なことが多くなります。

32
00:02:28.323 --> 00:02:34.344
次に紹介するエニウェアとの違いは、最小の幅の計算に影響するかどうかです。

33
00:02:34.344 --> 00:02:37.020
その点に注目して聞いてください。

34
00:02:37.020 --> 00:02:41.536
本文全体ではなく、必要な要素だけに付けるのが基本です。

35
00:02:41.536 --> 00:02:43.378
三つ目はエニウェアです。

36
00:02:43.378 --> 00:02:49.672
これはブレークワードと同じように、はみ出す場合に任意の位置での折り返しを許します。

37
00:02:49.672 --> 00:02:58.268
違いは、要素がどれだけ小さく縮められるかという、最小内容幅の計算にも、この折り返しの可能性が反映されることです。

38
00:02:58.268 --> 00:03:03.641
そのため、横並びのレイアウトなどで、箱がより小さく縮みやすくなります。

39
00:03:03.641 --> 00:03:05.483
続いて初期値と継承です。

40
00:03:05.483 --> 00:03:11.777
オーバーフローラップの初期値はノーマルで、このプロパティは親から通常は継承します。

41
00:03:11.777 --> 00:03:17.149
親に指定すれば子にも伝わるので、指定する範囲の広さには注意しましょう。

42
00:03:17.149 --> 00:03:21.908
横並びで箱が縮まないと感じたら、この違いを思い出してください。

43
00:03:21.908 --> 00:03:23.809
ここからは記事の実例です。

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

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

46
00:03:36.092 --> 00:03:41.941
途中に切れる場所がない文字列だからこそ、折り返しルールの違いがはっきり表れます。

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

48
00:03:47.059 --> 00:03:53.932
比べたいのはオーバーフローラップだけなので、文章や箱の構造といった土台は固定したままにします。

49
00:03:53.932 --> 00:03:57.588
親と子の入れ子の構造を先に頭に入れておきましょう。

50
00:03:57.588 --> 00:04:01.536
構造がシンプルだからこそ、値の違いだけに集中できます。

51
00:04:01.536 --> 00:04:03.334
土台のシーエスエスです。

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

53
00:04:09.627 --> 00:04:15.020
デモの最大幅は十五レムに絞るので、長い文字列はそのままでは収まりません。

54
00:04:15.020 --> 00:04:19.515
ここで最後の行にオーバーフローラップ、エニウェアを指定すると、文字列が箱の右端で折り返されて、

55
00:04:19.515 --> 00:04:24.010
全体が枠の中に収まります。

56
00:04:24.010 --> 00:04:28.205
次に最後の行だけをノーマルへ置き換えると、切れる場所がない文字列は折り返されず、

57
00:04:28.205 --> 00:04:32.400
はみ出しが目立つようになります。

58
00:04:32.400 --> 00:04:35.097
この一行の違いが比較のポイントです。

59
00:04:35.097 --> 00:04:39.442
保存して再読み込みし、文字列の右端だけに注目してください。

60
00:04:39.442 --> 00:04:44.236
ブラウザーで実際に切り替えて、自分の目で確かめることが大切です。

61
00:04:44.236 --> 00:04:46.098
活用場面を考えてみましょう。

62
00:04:46.098 --> 00:04:50.752
オーバーフローラップが役立つのは、長いユーアールエルやファイルパス、メールアドレスのように、

63
00:04:50.752 --> 00:04:55.407
利用者が貼り付けた長い文字列を表示する場所です。

64
00:04:55.407 --> 00:04:59.130
スマートフォンのような狭い画面のカードや、コメント欄、表のセルの中でも、

65
00:04:59.130 --> 00:05:02.854
はみ出しによるレイアウト崩れを防げます。

66
00:05:02.854 --> 00:05:07.375
記事でも勧められているように、すべての文章をワードブレーク、ブレークオールにする前に、

67
00:05:07.375 --> 00:05:11.897
まずこの指定で解決できないか試すのがおすすめです。

68
00:05:11.897 --> 00:05:16.152
必要な場所に絞って付けることで、読みやすさを保ちやすくなります。

69
00:05:16.152 --> 00:05:20.408
利用者が入力する内容を表示する場所では、特におすすめの対策です。

70
00:05:20.408 --> 00:05:23.580
効かないときと、間違えやすい点を確認します。

71
00:05:23.580 --> 00:05:27.185
特に間違えやすいのは、ワードブレークとの混同です。

72
00:05:27.185 --> 00:05:32.304
ワードブレークのブレークオールは通常の文章まで細かく切ってしまいますが、

73
00:05:32.304 --> 00:05:37.422
オーバーフローラップははみ出す場合に限って切るので、影響が控えめです。

74
00:05:37.422 --> 00:05:39.441
目的に合わせて選びましょう。

75
00:05:39.441 --> 00:05:42.469
そのうえで、開発者ツールで順番に調べます。

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

77
00:05:46.795 --> 00:05:51.120
コンピューテッドで最終的な値を確認してください。

78
00:05:51.120 --> 00:05:55.879
最後に三百二十ピクセル程度の狭い画面幅でも読めるか確認しましょう。

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

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

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

82
00:06:09.080 --> 00:06:15.663
エッジが十八以降、ファイアフォックスが四十九以降、サファリが七以降で対応しています。

83
00:06:15.663 --> 00:06:21.514
アンドロイド版クロームは二十五以降、アイオーエス版サファリは七以降です。

84
00:06:21.514 --> 00:06:27.934
ただし値によって差があり、今回の主役であるエニウェアは、クロームとエッジが八十以降、

85
00:06:27.934 --> 00:06:34.354
ファイアフォックスが六十五以降、サファリが十五点四以降と、やや新しめです。

86
00:06:34.354 --> 00:06:41.180
本体が使えることと、使いたい値が使えることは別なので、値まで含めて確認してください。

87
00:06:41.180 --> 00:06:45.568
新しい値を使うときほど、この確認を丁寧に行いましょう。

88
00:06:45.568 --> 00:06:47.487
最後に練習とまとめです。

89
00:06:47.487 --> 00:06:48.447
まとめます。

90
00:06:48.447 --> 00:06:53.646
オーバーフローラップは、長い文字列がはみ出すときに、途中で折り返してよいかどうかを決める設定で、

91
00:06:53.646 --> 00:06:58.844
初期値はノーマル、継承はしました。

92
00:06:58.844 --> 00:07:04.282
ノーマルは通常の位置でのみ切り、ブレークワードははみ出す場合に限って途中でも切り、

93
00:07:04.282 --> 00:07:09.721
エニウェアはそれに加えて最小幅の計算にも影響しました。

94
00:07:09.721 --> 00:07:18.838
練習として、まずエニウェアとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

95
00:07:18.838 --> 00:07:20.278
お疲れさまでした。

96
00:07:20.278 --> 00:07:26.036
関連するワードブレークやホワイトスペースも一緒に学ぶと理解が深まります。