SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのword-breakの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:24動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ワードブレークです。
  4. 0:06これは、行の終わりで文章を折り返すとき、単語の途中で切ってもよいかどうか、
  5. 0:11そのルールを決めるプロパティです。
  6. 0:15たとえば英字の長い単語や、スペースのない長い文字列は、箱の幅に収まらず、
  7. 0:20そのまま横にはみ出してしまうことがあります。
  8. 0:24ワードブレークを使うと、そうした長い語を箱の幅に合わせて途中で折り返せるようになります。
  9. 0:31ただし、強く切りすぎる指定を長文へ一律に付けると、かえって読みにくくなります。
  10. 0:38この動画では、代表的な値の違いと、指定が効く場面を実例で比べながら解説します。
  11. 0:44まず基本の書き方です。
  12. 0:46セレクターを書いたら、ワードブレークと書き、コロンのあとに値、最後にセミコロンを付けます。
  13. 0:53スライドの例では、ブレークオールを指定しています。
  14. 0:57これで、条件がそろったときに、長い語が箱の右端で途切れて、次の行へ続きます。
  15. 1:03エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  16. 1:13まずはこの一行を書き、長い文字列の折り返しがどう変わるか確かめてみましょう。
  17. 1:19値のスペルを間違えると宣言ごと無効になるので、注意してください。
  18. 1:24代表的な値を一つずつ見ていきます。
  19. 1:26まずはノーマルです。
  20. 1:28これは初期値で、その言語の通常のルールに従って改行します。
  21. 1:33英語であれば、単語と単語の間のスペースや、ハイフンの位置などが折り返しの候補になり、
  22. 1:37単語の途中では基本的に切れません。
  23. 1:42そのため文章としての読みやすさは保たれますが、スペースのない長いユーアールエルのような文字列では、
  24. 1:49切れる場所が見つからず、箱からはみ出してしまうことがあります。
  25. 1:55普段の文章では、このノーマルが自然で安全な選択です。
  26. 2:00まずは通常の見え方として覚えておきましょう。
  27. 2:03次はブレークオールです。
  28. 2:05これは、行を箱の幅に収めることを優先し、単語の途中でも、文字と文字の間ならどこでも折り返してよいとする指定です。
  29. 2:16記事の実例でも、英字の長い語が箱の幅に合わせて途中で折り返される様子が示されています。
  30. 2:23はみ出しを確実に防げる反面、普通の英単語まで細かく切れてしまうため、長文に一律に付けると、
  31. 2:29単語が読み取りにくくなります。
  32. 2:34使うなら、長い文字列が入りやすい場所に絞るのがコツです。
  33. 2:39強力な指定だからこそ、範囲を限定して使うと考えてください。
  34. 2:45三つ目はキープオールです。
  35. 2:47これは、単語のまとまりをなるべく保ったまま折り返す指定で、主に日本語や中国語、
  36. 2:52韓国語といった文章で意味を持ちます。
  37. 2:57通常これらの言語は文字の間で自由に改行できますが、キープオールを指定すると、
  38. 3:02単語の途中では切れにくくなります。
  39. 3:07続いて初期値と継承です。
  40. 3:09ワードブレークの初期値はノーマルで、このプロパティは親から通常は継承します。
  41. 3:16親に指定すれば子にも伝わるので、広い範囲に指定すると意図せず長文へ影響することもあります。
  42. 3:24範囲の広さには注意しましょう。
  43. 3:27ここからは記事の実例です。
  44. 3:29エイチティーエムエルでは、ステージというクラスを付けた箱の中に、デモというクラスを付けた箱を入れます。
  45. 3:36その中身は、スペースのない、とても長いユーアールエルの文字列です。
  46. 3:40途中に切れる場所がない文字列だからこそ、折り返しルールの違いがはっきり表れます。
  47. 3:46頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  48. 3:51比べたいのはワードブレークだけなので、文章や箱の構造といった土台は固定したままにします。
  49. 3:57親と子の入れ子の構造を先に頭に入れておきましょう。
  50. 4:00土台のシーエスエスです。
  51. 4:02ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。
  52. 4:09デモの最大幅は十五レムに絞るので、長い文字列はそのままでは収まりません。
  53. 4:15ここで最後の行にワードブレーク、ブレークオールを指定すると、文字列が箱の右端で折り返されて、
  54. 4:20全体が枠の中に収まります。
  55. 4:24次に最後の行だけをノーマルへ置き換えると、切れる場所がない文字列は折り返されず、
  56. 4:29はみ出しが目立つようになります。
  57. 4:33この一行の違いが比較のポイントです。
  58. 4:36保存して再読み込みし、文字列の右端だけに注目してください。
  59. 4:41活用場面を考えてみましょう。
  60. 4:43ブレークオールが役立つのは、長いユーアールエルやファイルパス、途切れない英数字のコード文字列を表示する場所です。
  61. 4:50スマートフォンのような狭い画面のカードや、表のセルの中でも、はみ出しによるレイアウト崩れを防げます。
  62. 4:56一方で、本文のような普通の文章では、ノーマルのままが読みやすく、ブレークオールは基本的に不要です。
  63. 5:02つまり、ページ全体へ一律に付けるのではなく、はみ出しやすい部品へ絞って付けるのが実践的な使い方です。
  64. 5:08対象を絞るほど、読みやすさと収まりの両方を取りやすくなります。
  65. 5:12効かないときと、間違えやすい点を確認します。
  66. 5:16まず注意したいのは、ブレークオールは英単語の途中も切るため、読みやすさを落とす場合があることです。
  67. 5:24単にユーアールエルのはみ出しを防ぎたいだけなら、オーバーフローラップという関連プロパティも検討してください。
  68. 5:33こちらは、はみ出す場合に限って折り返す考え方です。
  69. 5:37そのうえで、開発者ツールで順番に調べます。
  70. 5:41ネットワークで取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
  71. 5:46コンピューテッドで最終的な値を確認してください。
  72. 5:51最後に、三百二十ピクセル程度の狭い画面幅でも内容を利用できるか確認しましょう。
  73. 5:57ブラウザー互換性を確認します。
  74. 6:00記事が参照するエムディーエヌの記録では、クロームは一以降、エッジは十二以降、
  75. 6:07ファイアフォックスは十五以降、サファリは三以降と、古い版から対応が示されています。
  76. 6:14アンドロイド版クロームは十八以降、アイオーエス版サファリは二以降です。
  77. 6:20値ごとに見ても、ブレークオールとノーマルで対応の範囲は共通しています。
  78. 6:26古くから広く使えるプロパティといえますが、プロパティが使えることと、すべての値が同じように使えることは別です。
  79. 6:36対象の値まで含めて、実物のブラウザーで確認すると安心です。
  80. 6:41最後に練習とまとめです。
  81. 6:43まとめます。
  82. 6:44ワードブレークは、行末で単語の途中に折り返してよいかどうかを決める設定で、
  83. 6:48初期値はノーマル、継承はしました。
  84. 6:53ノーマルは単語の区切りを大切にし、ブレークオールは箱に収めることを優先してどこでも切り、
  85. 6:58キープオールは単語のまとまりを保ちました。
  86. 7:03練習として、まずブレークオールとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて、
  87. 7:09結果がどう変わるかを比べてみてください。
  88. 7:14お疲れさまでした。
  89. 7:16関連するオーバーフローラップも一緒に学ぶと、文字列のはみ出し対策を使い分けられるようになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

word-breakの役割と主な指定値を解説。英字の長い語が箱の幅に合わせて途中で折り返されます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのword-breakの使い方：指定値・実例・効かない原因とブラウザー互換性 →