【CSS】 overflow、white-spaceの基本の使い方｜HTML＆CSS入門講座（18）のPodcast
下記のPodcastは、Geminiで作成しました。
ストーリーブック
はじめに
ウェブサイトを制作していると、「枠の中に文字が入りきらない」「文章が勝手に改行されてしまう」といった問題に必ず直面します。これらを解決するために欠かせないのが、overflow（オーバーフロー）とwhite-space（ホワイトスペース）という2つのプロパティです。本記事では、初心者の方向けにこれら2つの基本から、2024年〜2025年に標準化された最新のテクニックまでを丁寧に解説します。特に、日本語の文章を美しく見せるための最新機能についても触れていきます。
overflowプロパティの基本：はみ出しをどう扱うか
overflowプロパティは、要素のボックス（枠）から中身のコンテンツがはみ出したときに、それを「見せる」のか「隠す」のか、あるいは「スクロールさせる」のかを決定するものです [1]。このプロパティを正しく使うには、要素に必ず「幅（width）」や「高さ（height）」、あるいは「最大幅・高さ」が指定されている必要があります。
主要な4つの値と挙動
もっともよく使われる基本の値は以下の4つです。
visible（初期値）: はみ出したコンテンツをそのまま表示します。枠を突き抜けて表示されるため、後ろにある他の要素と重なってしまうことがあります [1]。
hidden: はみ出した部分をバッサリと切り取って隠します。見た目はスッキリますが、隠れた部分をユーザーが読むことはできません [1]。
scroll: 常にスクロールバーを表示します。中身がはみ出していなくてもバーが表示されるため、デザインが固定されるメリットがあります [1]。
auto: 中身がはみ出したときだけ、自動的にスクロールバーを表示します。実務で最も多く使われる便利な設定です [1]。
進化した「clip」と「hidden」の違い
最近のCSSでは、hiddenに似た新しい値としてclipが登場しました [1]。
hiddenは、実は「JavaScriptなどを使えば中身をスクロールさせることができる」という特徴を持っています。これに対し、clipはプログラムによるスクロールも一切禁止し、より厳密に「切り取る」挙動をします [1]。
また、overflow-clip-marginというプロパティを併用することで、「枠から数ピクセルだけはみ出させてから切り取る」といった高度な調整も可能になっています [1]。
論理プロパティによる方向制御
これまでは横方向をoverflow-x、縦方向をoverflow-yと呼んでいましたが、現在は「書字方向（縦書きか横書きか）」に基づいた制御が推奨されています。これを「論理プロパティ」と呼び、以下の2つが2025年現在の主要なブラウザで広く利用可能です [1]。
overflow-inline: 文の流れに沿った方向（横書きなら左右方向）の制御。
overflow-block: 文が積み重なる方向（横書きなら上下方向）の制御。
多言語展開や、日本語の縦書きデザインを行う際には、これらを使うことでレイアウト崩れを防ぎやすくなります。
scrollbar-gutterで「ガタつき」を防ぐ
初心者がoverflow: autoを使った際に困るのが、中身が増えてスクロールバーが出現した瞬間に、コンテンツ全体が数ピクセル横にズレて「ガタつく」現象です。これを解決するのがscrollbar-gutterプロパティです [4]。
scrollbar-gutter: stable; と指定すると、スクロールバーが出ていないときでも、将来表示されるための「スペース（溝）」をあらかじめ予約しておいてくれます [4]。これにより、ページのレイアウトが常に安定し、ユーザーにとって快適な体験を提供できます [4]。
white-spaceプロパティの基本：空白と改行の魔法
white-spaceプロパティは、HTMLコード内に書いた「半角スペース」「タブ」「改行」をブラウザがどう処理するかを決めます [6]。
覚えておくべき主要な設定
normal（初期値）: 連続するスペースや改行を1つのスペースにまとめ、枠の端で自動的に折り返します [6]。
nowrap: 改行を無視して、すべてを1行で表示し続けます。はみ出しても折り返しません [6]。
pre: HTMLに書いた通りにスペースや改行を表示します（`<pre>`タグと同じ）。自動折り返しはしません [6]。
pre-wrap: スペースや改行を維持したまま、枠の端に来たら自動で折り返します [6]。
最新仕様：ショートハンドへの移行
現在、white-spaceは2つの新しいプロパティをまとめる「ショートハンド（略記）」として再定義されました [6]。
white-space-collapse: 空白を詰めるか、そのままにするか [8]。
text-wrap-mode: テキストを折り返すか、しないか [9]。
2024年以降、主要なブラウザはこの新しい考え方（Baseline 2024）に基づいて動作しており、より論理的なテキスト制御が可能になっています [8]。
text-wrapによる「美しい折り返し」の自動化
これまでのCSSでは、改行位置を細かく指定するには`<br>`タグなどを手動で入れる必要がありました。しかし最新のtext-wrapプロパティを使えば、ブラウザが自動的に美しいバランスを計算してくれます [10]。
text-wrap: balance;: 見出しなどで、1行目と2行目の文字数が同じくらいになるように調整します（最大6行まで有効） [10]。
text-wrap: pretty;: 段落の最後の一行に「1文字だけ」が残ってしまうような不格好な改行を防ぎます [10]。
日本語の場合、英語に比べると文字幅が均等なため効果が分かりにくいこともありますが、短いキャッチコピーやカード型のタイトルなどで活用すると、デザインの質が格段に向上します [10]。
日本語に最適な改行：auto-phrase
2024年から導入が進んでいる非常に強力な機能が、word-break: auto-phraseです [11]。
これは、日本語の「文節（意味の区切り）」をAI技術などで解析し、不自然な場所での改行を防ぐ機能です [7]。例えば、「今日は / 良い / 天気です」のように、言葉の意味を損なわない場所で折り返してくれるようになります [7]。
これを利用するには、HTMLのトップレベル（`<html>`タグなど）に lang="ja" を正しく設定しておくことが必須条件です [7]。
実践テクニック：はみ出しと省略の組み合わせ
現場で最もよく使われるのは、これらを組み合わせて「長すぎるテキストを...で省略する」方法です [12]。
一行だけ表示して省略する（三種の神器）
以下の3つをセットで使うのがお約束です。
CSS
.title {
white-space: nowrap; /* 1. 改行させない */
overflow: hidden; /* 2. はみ出た分を隠す */
text-overflow: ellipsis; /* 3. 消えた部分を「...」にする */
}
このどれか一つが欠けても、綺麗な省略表示にはなりません [5]。
複数行で省略する（line-clamp）
「3行目までは表示して、それ以降は...にする」といった場合には、line-clampプロパティを使用します [13]。
CSS
.description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ここで表示行数を指定 */
overflow: hidden;
}
-webkit-という接頭辞が必要ですが、2025年現在、事実上の標準としてすべての主要なスマホ・PCブラウザで安定して動作します [13]。
まとめ
overflowとwhite-spaceは、一見地味ですがウェブデザインの基礎を支える非常に重要なプロパティです。近年、scrollbar-gutterによるガタつき防止や、text-wrap: balanceによる美しい見出しの実現など、ブラウザ側で高度な制御をしてくれる機能が次々と追加されました。まずは「中身がはみ出したときにどう見せたいか（overflow）」と「文章の折り返しをどう制御したいか（white-space）」を整理し、最新の機能を少しずつ取り入れてみてください。
参考資料
1. MDN Web Docs: overflow, https://developer.mozilla.org/ja/docs/Web/CSS/overflow
2. MDN Web Docs: white-space, https://developer.mozilla.org/ja/docs/Web/CSS/white-space
3. MDN Web Docs: text-wrap, https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap
4. MDN Web Docs: scrollbar-gutter, https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-gutter
5. MDN Web Docs: line-clamp, https://developer.mozilla.org/ja/docs/Web/CSS/line-clamp
6. MDN Web Docs: overflow-wrap, https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap
7. MDN Web Docs: word-break, https://developer.mozilla.org/ja/docs/Web/CSS/word-break
8. Chrome for Developers: CSS text-wrap: balance, https://developer.chrome.com/docs/css-ui/css-text-wrap-balance
9. Chrome for Developers: Introducing four new international features in CSS, https://developer.chrome.com/blog/introducing-four-new-international-features-in-css
10. MDN Web Docs: CSS overflow (Guide), https://developer.mozilla.org/ja/docs/Web/CSS/CSS_overflow
11. MDN Web Docs: white-space-collapse, https://developer.mozilla.org/ja/docs/Web/CSS/white-space-collapse
12. MDN Web Docs: text-wrap-mode, https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap-mode
13. CSS-Tricks: line-clamp, https://css-tricks.com/almanac/properties/l/line-clamp/
14. MDN Web Docs: text-overflow, https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
コメント