VIDEO LESSON

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

再生時間 7:26動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、オーバーフローラップです。
0:06これは、長い単語やユーアールエルが箱の幅に収まらないとき、単語の途中で折り返してもよいかどうかを決めるプロパティです。
0:15通常の文章はスペースの位置で折り返せますが、スペースのない長い文字列には切れる場所がありません。
0:22そのままだと文字が横にはみ出し、レイアウトが崩れてしまいます。
0:27オーバーフローラップは、そうしたはみ出しが起きる場面に限って、文字列の途中での折り返しを許可します。
0:35この動画では三つの値の違いを、長いユーアールエルを使った実例で比べながら解説します。
0:41スマートフォンで見る場面を想像すると、その大切さがよく分かります。
0:46まず基本の書き方です。
0:47セレクターを書いたら、オーバーフローラップと書き、コロンのあとに値、最後にセミコロンを付けます。
0:54スライドの例では、エニウェアを指定しています。
0:57これで、長い文字列が箱に収まらないときに、任意の位置で折り返せるようになります。
1:02エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:11まずはこの一行を書き、長い文字列の右端がどう変わるか確かめてみましょう。
1:16値のスペルを間違えると宣言ごと無効になるので注意してください。
1:20一行だけの指定ですが、表示への影響ははっきり表れます。
1:24代表的な値を一つずつ見ていきます。
1:26まずはノーマルです。
1:27これは初期値で、通常の改行ルールだけを使って折り返します。
1:31スペースやハイフンなど、もともと切ってよい位置でのみ改行するので、単語の途中では基本的に切りません。
1:38そのため普通の文章の読みやすさは保たれますが、スペースのない長いユーアールエルでは、
1:43切れる場所が見つからず、文字列が箱からはみ出してしまいます。
1:48普段の文章では、このノーマルが自然で安全な選択です。
1:51まずは通常の見え方として覚えておきましょう。
1:54迷ったときは、まずこの初期値の見え方を基準に比べると分かりやすくなります。
1:59次はブレークワードです。
2:01これは、通常の位置で折り返すことを基本にしながら、それでも行が箱からはみ出してしまう場合に限って、
2:07単語の途中でも折り返してよいとする指定です。
2:13普段は単語のまとまりを大切にし、いざというときだけ途中で切る、控えめなはみ出し対策だと考えてください。
2:21長いユーアールエルを表示する場所では、まずこの値で十分なことが多くなります。
2:28次に紹介するエニウェアとの違いは、最小の幅の計算に影響するかどうかです。
2:34その点に注目して聞いてください。
2:37本文全体ではなく、必要な要素だけに付けるのが基本です。
2:41三つ目はエニウェアです。
2:43これはブレークワードと同じように、はみ出す場合に任意の位置での折り返しを許します。
2:49違いは、要素がどれだけ小さく縮められるかという、最小内容幅の計算にも、この折り返しの可能性が反映されることです。
2:58そのため、横並びのレイアウトなどで、箱がより小さく縮みやすくなります。
3:03続いて初期値と継承です。
3:05オーバーフローラップの初期値はノーマルで、このプロパティは親から通常は継承します。
3:11親に指定すれば子にも伝わるので、指定する範囲の広さには注意しましょう。
3:17横並びで箱が縮まないと感じたら、この違いを思い出してください。
3:21ここからは記事の実例です。
3:23エイチティーエムエルでは、ステージというクラスを付けた箱の中に、デモというクラスを付けた箱を入れます。
3:31その中身は、スペースのない、とても長いユーアールエルの文字列です。
3:36途中に切れる場所がない文字列だからこそ、折り返しルールの違いがはっきり表れます。
3:41頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:47比べたいのはオーバーフローラップだけなので、文章や箱の構造といった土台は固定したままにします。
3:53親と子の入れ子の構造を先に頭に入れておきましょう。
3:57構造がシンプルだからこそ、値の違いだけに集中できます。
4:01土台のシーエスエスです。
4:03ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。
4:09デモの最大幅は十五レムに絞るので、長い文字列はそのままでは収まりません。
4:15ここで最後の行にオーバーフローラップ、エニウェアを指定すると、文字列が箱の右端で折り返されて、
4:19全体が枠の中に収まります。
4:24次に最後の行だけをノーマルへ置き換えると、切れる場所がない文字列は折り返されず、
4:28はみ出しが目立つようになります。
4:32この一行の違いが比較のポイントです。
4:35保存して再読み込みし、文字列の右端だけに注目してください。
4:39ブラウザーで実際に切り替えて、自分の目で確かめることが大切です。
4:44活用場面を考えてみましょう。
4:46オーバーフローラップが役立つのは、長いユーアールエルやファイルパス、メールアドレスのように、
4:50利用者が貼り付けた長い文字列を表示する場所です。
4:55スマートフォンのような狭い画面のカードや、コメント欄、表のセルの中でも、
4:59はみ出しによるレイアウト崩れを防げます。
5:02記事でも勧められているように、すべての文章をワードブレーク、ブレークオールにする前に、
5:07まずこの指定で解決できないか試すのがおすすめです。
5:11必要な場所に絞って付けることで、読みやすさを保ちやすくなります。
5:16利用者が入力する内容を表示する場所では、特におすすめの対策です。
5:20効かないときと、間違えやすい点を確認します。
5:23特に間違えやすいのは、ワードブレークとの混同です。
5:27ワードブレークのブレークオールは通常の文章まで細かく切ってしまいますが、
5:32オーバーフローラップははみ出す場合に限って切るので、影響が控えめです。
5:37目的に合わせて選びましょう。
5:39そのうえで、開発者ツールで順番に調べます。
5:42ネットワークで取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
5:46コンピューテッドで最終的な値を確認してください。
5:51最後に三百二十ピクセル程度の狭い画面幅でも読めるか確認しましょう。
5:55原因を一つずつ切り分けると、解決までの時間が短くなります。
6:00ブラウザー互換性を確認します。
6:02記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが二十三以降、
6:09エッジが十八以降、ファイアフォックスが四十九以降、サファリが七以降で対応しています。
6:15アンドロイド版クロームは二十五以降、アイオーエス版サファリは七以降です。
6:21ただし値によって差があり、今回の主役であるエニウェアは、クロームとエッジが八十以降、
6:27ファイアフォックスが六十五以降、サファリが十五点四以降と、やや新しめです。
6:34本体が使えることと、使いたい値が使えることは別なので、値まで含めて確認してください。
6:41新しい値を使うときほど、この確認を丁寧に行いましょう。
6:45最後に練習とまとめです。
6:47まとめます。
6:48オーバーフローラップは、長い文字列がはみ出すときに、途中で折り返してよいかどうかを決める設定で、
6:53初期値はノーマル、継承はしました。
6:58ノーマルは通常の位置でのみ切り、ブレークワードははみ出す場合に限って途中でも切り、
7:04エニウェアはそれに加えて最小幅の計算にも影響しました。
7:09練習として、まずエニウェアとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:18お疲れさまでした。
7:20関連するワードブレークやホワイトスペースも一緒に学ぶと理解が深まります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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