VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ホワイトスペースです。
0:06これは、エイチティーエムエルの中に書かれた空白や改行を、画面にどう出すかを決めるプロパティです。
0:13普段の文章では、連続したスペースは一つにまとめられ、ソースの改行は無視されます。
0:20そのおかげで、見た目を気にせず自由に整形できます。
0:23一方、コードや整形済みの文章では、空白と改行をそのまま残したい場面もあります。
0:29今回は初期値のノーマルと、空白を保ちながら折り返すプリラップを中心に比べ、
0:34値の使い分けを分かりやすく解説します。
0:38この三つの扱いの組み合わせが、値ごとの違いを生んでいます。
0:42まず基本の書き方です。
0:44セレクターのあとにプロパティ名を書き、コロンを挟んで値を入れ、最後にセミコロンを付けます。
0:50スライドの例ではプリラップを指定しています。
0:54これで、連続した空白と改行を保ちながら、行が長くなれば折り返す表示になります。
0:59エイチティーエムエル側でクラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることが前提です。
1:07まずはこの一行を書き、空白と改行の残り方を確認してみましょう。
1:11値のつづりを誤ると宣言全体が無効になる点にも注意してください。
1:16値の部分だけを書き換えれば、他の指定はそのまま比較できます。
1:20代表的な値を順に見ていきます。
1:23まずはノーマルです。
1:25これは初期値で、ふだんの文章に使われる扱いです。
1:29連続したスペースやタブは一つのスペースにまとめられ、ソースの中の改行もスペースとして扱われます。
1:37そして行が箱の幅に達すると、自動で折り返します。
1:41たとえばエイチティーエムエルで三つ続けて打ったスペースは、画面では一つにしか見えません。
1:49読み物としての自然さを優先する指定なので、本文は基本的にこのままで問題ありません。
1:56まずは基準として、この見え方を覚えておきましょう。
2:01文章の意味は変わらず、見た目の整い方だけが変わる点もポイントです。
2:07次は、折り返さない二つの値です。
2:09まずノーラップは、空白のまとめ方はノーマルと同じですが、行の端でも自動で折り返しません。
2:17表の見出しやボタンの中など、一行で見せたい短い文字に使います。
2:22もう一つのプリは、連続した空白も改行も書いたまま保持し、折り返しもしません。
2:28プレ要素の既定の扱いと同じで、コードの表示に向きます。
2:32ただし長い行はそのまま横にはみ出すため、コードに使うときは横スクロールを一緒に用意するのが記事の注意点です。
2:41この二つは折り返さない点が共通しています。
2:45短い文字に絞って使うことで、はみ出しの事故を防ぎやすくなります。
2:50続いて、保持と折り返しを両立させる値です。
2:54プリラップは、連続した空白と改行をそのまま保ちながら、長い行は箱の端で折り返します。
3:01プリの欠点だったはみ出しを抑えられる、実用的な指定です。
3:06プリラインは、改行だけを保持し、連続した空白は一つにまとめます。
3:12利用者の入力した改行を残したいコメント欄などに向きます。
3:17さらにブレークスペーシズはプリラップに近く、行末の空白でも折り返せる細かな違いがあります。
3:25ここで初期値と継承を確認します。
3:28初期値はノーマルで、このプロパティは親から子へ継承します。
3:33入力内容をそのまま出したい場面で、特に力を発揮する値です。
3:38ここからは記事の実例です。
3:40エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:48デモの中身には、ハローのあとにスペースを三つ続けた部分と、文章の途中の改行が含まれています。
3:55空白の数と改行が、そのまま見えるかどうかが比べるポイントだからです。
4:00頭の部分では、スタイルシートをリンクで読み込んでください。
4:04比べるのはホワイトスペースだけなので、文章や構造などの土台は変えずに固定します。
4:10先に、この土台の形を頭に入れておきましょう。
4:14空白の数が分かるように、あえて目立つ形で用意した例です。
4:18土台のシーエスエスです。
4:20ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:27ここで最後の行にホワイトスペース、プリラップを指定すると、三つのスペースと改行が書いたまま残り、
4:32長い文章は端で折り返します。
4:38次に最後の行だけをノーマルへ換えると、スペースは一つにまとまり、改行も消えて文章が続けて表示されます。
4:47変わるのはこの一行だけです。
4:50ファイルを保存して再読み込みし、ハローの後ろの空白と、改行の位置だけに注目して比べてください。
4:58自分の目で確かめることが理解への近道です。
5:02違いが出る場所が限られるからこそ、初心者でも観察しやすい実例です。
5:08活用場面を整理します。
5:09コードを表示する場所では、空白と改行を保つプリかプリラップを使い、必要なら横スクロールも組み合わせます。
5:17利用者が入力した文章では、改行を残せるプリラップやプリラインが便利で、入力した形に近い表示になります。
5:24逆に、表の見出しやボタンの文字を一行に収めたいときはノーラップが役立ちます。
5:29ただしノーラップを長い本文に使うと横にはみ出しやすいので、短い要素に絞るのが安全です。
5:36目的に合わせて値を一つ選ぶ、という考え方を大切にしてください。
5:40迷ったら、まず保持したいものが空白か改行かから考えましょう。
5:44効かないときと間違えやすい点を確認します。
5:48まず、プリを指定したのに改行されない場合、エイチティーエムエルの中に実際の改行文字が入っているかを確かめてください。
5:56改行がなければ、保持する対象自体がありません。
6:00またプリは折り返さないため、長い行では横スクロールを用意しないと内容が読めなくなります。
6:07そのうえで開発者ツールを使い、ネットワークで取得、エレメンツでクラスの一致、
6:12スタイルズで上書きの有無、コンピューテッドで最終的な値を順に調べます。
6:18最後に狭い画面幅でも読めるか確認しましょう。
6:21原因を一つずつ切り分けると、解決までの時間が短くなります。
6:25ブラウザー互換性を確認します。
6:27記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
6:33エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、とても古くから対応しています。
6:39アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:44ただし値ごとに差があり、たとえばプリラップは、クロームは一以降、エッジは十二以降、
6:49ファイアフォックスは三以降、サファリは三以降となっています。
6:54本体が使えることと、使いたい値が使えることは別なので、値まで含めて確認する習慣を付けましょう。
7:00長く使われてきた基本のプロパティなので、安心して使えます。
7:04最後に練習とまとめです。
7:06まとめます。
7:07ホワイトスペースは、空白と改行を保持するか、折り返すかを決める設定で、初期値はノーマル、
7:10継承はしました。
7:13ノーマルは空白をまとめて折り返し、ノーラップは折り返さず、プリは保持して折り返さず、
7:18プリラップは保持しながら折り返し、プリラインは改行だけを保持しました。
7:23練習として、まずプリラップとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:30お疲れさまでした。
7:31関連するオーバーフローラップやワードブレークも一緒に学ぶと理解が深まります。
7:36実際にブラウザーで切り替えて見ることが、一番の練習になります。

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

この動画で学べること

white-spaceの役割と主な指定値を解説。HTML内の連続した空白と改行を保持するかどうかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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