WEBVTT

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

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

3
00:00:03.874 --> 00:00:06.779
今回のテーマは、ワードブレークです。

4
00:00:06.779 --> 00:00:11.137
これは、行の終わりで文章を折り返すとき、単語の途中で切ってもよいかどうか、

5
00:00:11.137 --> 00:00:15.495
そのルールを決めるプロパティです。

6
00:00:15.495 --> 00:00:20.176
たとえば英字の長い単語や、スペースのない長い文字列は、箱の幅に収まらず、

7
00:00:20.176 --> 00:00:24.856
そのまま横にはみ出してしまうことがあります。

8
00:00:24.856 --> 00:00:31.958
ワードブレークを使うと、そうした長い語を箱の幅に合わせて途中で折り返せるようになります。

9
00:00:31.958 --> 00:00:38.253
ただし、強く切りすぎる指定を長文へ一律に付けると、かえって読みにくくなります。

10
00:00:38.253 --> 00:00:44.548
この動画では、代表的な値の違いと、指定が効く場面を実例で比べながら解説します。

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

12
00:00:46.257 --> 00:00:53.248
セレクターを書いたら、ワードブレークと書き、コロンのあとに値、最後にセミコロンを付けます。

13
00:00:53.248 --> 00:00:57.132
スライドの例では、ブレークオールを指定しています。

14
00:00:57.132 --> 00:01:03.035
これで、条件がそろったときに、長い語が箱の右端で途切れて、次の行へ続きます。

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

16
00:01:13.133 --> 00:01:19.037
まずはこの一行を書き、長い文字列の折り返しがどう変わるか確かめてみましょう。

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

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

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

20
00:01:28.411 --> 00:01:33.140
これは初期値で、その言語の通常のルールに従って改行します。

21
00:01:33.140 --> 00:01:37.951
英語であれば、単語と単語の間のスペースや、ハイフンの位置などが折り返しの候補になり、

22
00:01:37.951 --> 00:01:42.762
単語の途中では基本的に切れません。

23
00:01:42.762 --> 00:01:49.285
そのため文章としての読みやすさは保たれますが、スペースのない長いユーアールエルのような文字列では、

24
00:01:49.285 --> 00:01:55.808
切れる場所が見つからず、箱からはみ出してしまうことがあります。

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

26
00:02:00.048 --> 00:02:03.636
まずは通常の見え方として覚えておきましょう。

27
00:02:03.636 --> 00:02:05.823
次はブレークオールです。

28
00:02:05.823 --> 00:02:16.028
これは、行を箱の幅に収めることを優先し、単語の途中でも、文字と文字の間ならどこでも折り返してよいとする指定です。

29
00:02:16.028 --> 00:02:23.863
記事の実例でも、英字の長い語が箱の幅に合わせて途中で折り返される様子が示されています。

30
00:02:23.863 --> 00:02:29.330
はみ出しを確実に防げる反面、普通の英単語まで細かく切れてしまうため、長文に一律に付けると、

31
00:02:29.330 --> 00:02:34.797
単語が読み取りにくくなります。

32
00:02:34.797 --> 00:02:39.899
使うなら、長い文字列が入りやすい場所に絞るのがコツです。

33
00:02:39.899 --> 00:02:45.184
強力な指定だからこそ、範囲を限定して使うと考えてください。

34
00:02:45.184 --> 00:02:47.520
三つ目はキープオールです。

35
00:02:47.520 --> 00:02:52.640
これは、単語のまとまりをなるべく保ったまま折り返す指定で、主に日本語や中国語、

36
00:02:52.640 --> 00:02:57.760
韓国語といった文章で意味を持ちます。

37
00:02:57.760 --> 00:03:02.701
通常これらの言語は文字の間で自由に改行できますが、キープオールを指定すると、

38
00:03:02.701 --> 00:03:07.641
単語の途中では切れにくくなります。

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

40
00:03:09.797 --> 00:03:16.624
ワードブレークの初期値はノーマルで、このプロパティは親から通常は継承します。

41
00:03:16.624 --> 00:03:24.709
親に指定すれば子にも伝わるので、広い範囲に指定すると意図せず長文へ影響することもあります。

42
00:03:24.709 --> 00:03:27.404
範囲の広さには注意しましょう。

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

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

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

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

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

48
00:03:51.199 --> 00:03:57.285
比べたいのはワードブレークだけなので、文章や箱の構造といった土台は固定したままにします。

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

50
00:04:00.744 --> 00:04:02.682
土台のシーエスエスです。

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

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

53
00:04:15.283 --> 00:04:20.048
ここで最後の行にワードブレーク、ブレークオールを指定すると、文字列が箱の右端で折り返されて、

54
00:04:20.048 --> 00:04:24.813
全体が枠の中に収まります。

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

56
00:04:29.337 --> 00:04:33.860
はみ出しが目立つようになります。

57
00:04:33.860 --> 00:04:36.767
この一行の違いが比較のポイントです。

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

59
00:04:41.452 --> 00:04:43.209
活用場面を考えてみましょう。

60
00:04:43.209 --> 00:04:50.236
ブレークオールが役立つのは、長いユーアールエルやファイルパス、途切れない英数字のコード文字列を表示する場所です。

61
00:04:50.236 --> 00:04:56.511
スマートフォンのような狭い画面のカードや、表のセルの中でも、はみ出しによるレイアウト崩れを防げます。

62
00:04:56.511 --> 00:05:02.659
一方で、本文のような普通の文章では、ノーマルのままが読みやすく、ブレークオールは基本的に不要です。

63
00:05:02.659 --> 00:05:08.934
つまり、ページ全体へ一律に付けるのではなく、はみ出しやすい部品へ絞って付けるのが実践的な使い方です。

64
00:05:08.934 --> 00:05:12.824
対象を絞るほど、読みやすさと収まりの両方を取りやすくなります。

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

66
00:05:16.503 --> 00:05:24.696
まず注意したいのは、ブレークオールは英単語の途中も切るため、読みやすさを落とす場合があることです。

67
00:05:24.696 --> 00:05:33.726
単にユーアールエルのはみ出しを防ぎたいだけなら、オーバーフローラップという関連プロパティも検討してください。

68
00:05:33.726 --> 00:05:37.906
こちらは、はみ出す場合に限って折り返す考え方です。

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

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

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

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

73
00:05:57.972 --> 00:06:00.617
ブラウザー互換性を確認します。

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

75
00:06:07.582 --> 00:06:14.548
ファイアフォックスは十五以降、サファリは三以降と、古い版から対応が示されています。

76
00:06:14.548 --> 00:06:20.720
アンドロイド版クロームは十八以降、アイオーエス版サファリは二以降です。

77
00:06:20.720 --> 00:06:26.892
値ごとに見ても、ブレークオールとノーマルで対応の範囲は共通しています。

78
00:06:26.892 --> 00:06:36.590
古くから広く使えるプロパティといえますが、プロパティが使えることと、すべての値が同じように使えることは別です。

79
00:06:36.590 --> 00:06:41.704
対象の値まで含めて、実物のブラウザーで確認すると安心です。

80
00:06:41.704 --> 00:06:43.647
最後に練習とまとめです。

81
00:06:43.647 --> 00:06:44.619
まとめます。

82
00:06:44.619 --> 00:06:48.992
ワードブレークは、行末で単語の途中に折り返してよいかどうかを決める設定で、

83
00:06:48.992 --> 00:06:53.364
初期値はノーマル、継承はしました。

84
00:06:53.364 --> 00:06:58.627
ノーマルは単語の区切りを大切にし、ブレークオールは箱に収めることを優先してどこでも切り、

85
00:06:58.627 --> 00:07:03.891
キープオールは単語のまとまりを保ちました。

86
00:07:03.891 --> 00:07:09.316
練習として、まずブレークオールとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて、

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

88
00:07:14.741 --> 00:07:16.199
お疲れさまでした。

89
00:07:16.199 --> 00:07:23.972
関連するオーバーフローラップも一緒に学ぶと、文字列のはみ出し対策を使い分けられるようになります。