【2026年8月最新】CSSで改行ルールを簡単設定！改行をコントロールする方法

「長い文章がレイアウトからはみ出す」「英単語の途中で不自然に改行される」「意図した場所で改行してくれない」——CSSで改行を扱うとき、こうした悩みにぶつかった経験がある方は多いのではないでしょうか。

CSSにおける改行制御は、実は複数のプロパティが絡み合う、意外と奥が深い領域です。「なんとなくword-wrapを設定したら直った」という経験則だけで対応していると、レスポンシブ対応やテキストの言語（日本語/英語混在）が変わったときに、思わぬ崩れが発生することがあります。

この記事では、CSSで改行を制御する4つのプロパティを整理し、目的別の実装パターン、レスポンシブ対応でのつまずきポイントまでを網羅的に解説します。さらに後半では、「CSSを書く」作業そのものをAIに任せるという選択肢について、AI鬼管理を運営する株式会社GENAIの実例を交えて紹介します。

この記事を読み終える頃には、次のことが明確になっています。

01 BASICS CSSで改行を制御するとは なぜHTMLの改行だけでは足りないのか

HTMLには<br>タグという改行専用のタグがあります。しかし、実際のWebサイト制作では「画面幅によって改行位置を変えたい」「特定の条件でだけ改行を防ぎたい」といった、<br>タグだけでは対応できない要件が頻繁に発生します。こうした「改行するかどうかの挙動そのものを、CSS側でコントロールする」のが、この記事のテーマです。

1-1. なぜ改行の制御でつまずきやすいのか

改行に関わるCSSプロパティは複数存在し、それぞれの役割が微妙に重なっているため、「どれを設定すればいいか分からない」という状態に陥りがちです。加えて、日本語と英語では改行の適切な位置のルールが異なるため、英語圏で書かれた解説記事の設定をそのまま日本語サイトに適用すると、意図しない崩れが起きることがあります。

02 PROPERTIES 改行に関わる4つのプロパティ それぞれの役割を切り分けて理解する

改行の挙動をコントロールするCSSプロパティは、主に次の4つです。まずは全体像を一覧で押さえておきましょう。

プロパティ	主な役割	代表的な値
white-space	空白文字・改行文字の扱い方を制御	normal / nowrap / pre / pre-line / pre-wrap
word-break	単語の途中で改行してよいかを制御	normal / break-all / keep-all
overflow-wrap（旧word-wrap）	はみ出しそうな長い単語を強制改行するか	normal / break-word / anywhere
line-break	日本語などの禁則処理の厳しさを制御	auto / strict / normal / loose

2-1. white-space：空白と改行文字そのものの扱い

white-spaceは、HTMLソース内の半角スペースや改行（Enter）を、ブラウザがどう扱うかを制御するプロパティです。通常HTMLでは、ソースコード内で複数の空白や改行を入れても、ブラウザは1つの半角スペースにまとめて表示します。この挙動を変えたいときに使います。

.no-wrap {
  white-space: nowrap; /* テキストを折り返さず横一列に表示 */
}

.keep-linebreak {
  white-space: pre-line; /* ソース内の改行(\n)をそのまま改行として反映 */
}

2-2. word-break：単語の途中で改行してよいか

word-breakは、長い単語やURLがコンテナ幅を超えたときに、単語の途中で改行してよいかを制御します。break-allを指定すると、文字単位でどこでも改行できるようになり、はみ出しを強制的に防げます。一方、日本語の文章で英単語が混在する場合は、単語の途中で切れると読みにくくなるため注意が必要です。

.force-break {
  word-break: break-all; /* どの文字の間でも改行可能にする */
}

.keep-word {
  word-break: keep-all; /* CJK文字の単語区切りでの改行を抑制 */
}

2-3. overflow-wrap（word-wrap）：長い単語のはみ出し対策

overflow-wrap（古いブラウザ向けの記法としてword-wrapも同じ意味で使われます）は、URLや長い英単語のように、通常は途中で区切らない文字列がコンテナ幅を超えそうなときだけ、強制的に改行させるプロパティです。word-break: break-allとの違いは、「必要な場合にだけ」単語を分割する点にあります。

2-4. line-break：日本語の禁則処理の厳しさ

line-breakは、句読点や記号の前後で改行してよいかという、日本語特有の「禁則処理」の厳しさを制御するプロパティです。例えば「、」や「。」が行の先頭に来てしまう不自然な改行を防ぐために使われます。値はauto（既定）・loose（緩い）・normal（標準）・strict（厳格）の4段階があり、既定はautoですが、明示的にstrictを指定するケースが多く見られます。

03 PATTERNS 目的別の実装パターン コピーしてすぐ使えるコード例つき

3-1. brタグのように任意の位置で改行したい

ソースコード内の改行（Enterキーの入力）をそのまま画面上の改行として反映させたい場合は、white-space: pre-lineを使います。これにより、HTML側で<br>タグを使わずに、テキストデータの改行コードだけでレイアウトを制御できます。

.pre-line-text {
  white-space: pre-line;
}

<!-- HTML側の改行(\n)がそのまま反映される -->

3-2. 改行させたくない（一行に収めたい）

ボタンのラベルやナビゲーションのメニュー項目など、何があっても一行で表示したい場合はwhite-space: nowrapを指定します。コンテナ幅が足りない場合ははみ出すため、overflow: hidden; text-overflow: ellipsis;と組み合わせて「...」で省略する処理が定番です。

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* はみ出た分を...で省略 */
}

3-3. 英単語の途中で改行させたくない

日本語の文章中に英単語が混じる場合、意図せず単語の途中で改行されると読みにくくなります。この場合はword-break: normal（既定値）を維持しつつ、はみ出す場合のみoverflow-wrap: break-wordで対応するのが基本パターンです。word-break: break-allを安易に使うと、英単語もまとめて途中で切れてしまうため注意が必要です。

.natural-break {
  word-break: normal;
  overflow-wrap: break-word; /* はみ出す場合のみ強制改行 */
}

3-4. 記号・句読点で改行させたくない（禁則処理）

日本語の文章で「、」や「）」が行頭に来てしまうのを防ぎたい場合は、line-break: strictを指定します。多くのモダンブラウザでは既定でも一定の禁則処理が働きますが、明示的に指定することで挙動を安定させられます。

.japanese-text {
  line-break: strict;
  word-break: normal;
}

04 RESPONSIVE レスポンシブ対応との付き合い方 画面幅が変わると改行位置も変わるという前提を持つ

スマートフォン・タブレット・PCと、閲覧される画面幅が多様化した現在、「PCでは綺麗に見えていたのに、スマホ表示だと改行位置がおかしい」というトラブルは非常によく発生します。これは、コンテナ幅が変わることで、自動改行される位置そのものが変わってしまうためです。

4-1. メディアクエリで改行方針を切り替える

見出しなど、特定の位置で必ず改行してほしい要素については、画面幅に応じて<br>タグの表示・非表示を切り替えるテクニックが使われます。CSSのdisplay: noneと組み合わせることで、PC表示ではA地点で改行、スマホ表示ではB地点で改行、といった出し分けが可能です。

<h2>AI活用で<br class="sp-only">業務効率化を実現</h2>

/* CSS側 */
.sp-only { display: none; }
@media (max-width: 600px) {
  .sp-only { display: inline; }
}

4-2. 見出しは特に慎重にチェックする

特に見出し（H2・H3）やキャッチコピーは、改行位置によって印象が大きく変わります。「AIで」という2文字だけが次の行に取り残される、といった「孤立行（宙ぶらりんな1〜2文字）」は、デザイン上の見た目を損ねるため、複数の画面幅で実機確認することが推奨されます。

05 COMMON MISTAKES よくある実装ミスとチェックリスト 公開前に確認しておきたいポイント

5-1. デバッグの進め方

改行崩れが発生したときは、まずブラウザの開発者ツールで該当要素にどのCSSプロパティが適用されているかを確認することから始めます。継承元のスタイルやCSSフレームワークの初期設定が影響しているケースも多いため、「自分で書いたCSSだけ」を疑うのではなく、適用されているスタイル全体を俯瞰することが早期解決のコツです。

5-2. CSSフレームワーク利用時の注意点

BootstrapやTailwind CSSなどのフレームワークを使っている場合、フレームワーク側が独自の初期設定（リセットCSS）を当てていることがあります。改行の挙動が想定と異なる場合は、フレームワークのドキュメントで該当プロパティの初期値を確認し、必要であれば個別のクラスで上書きするようにしましょう。

06 BEYOND CSS 【独自】「CSSを書く」から「AIに意図を伝える」時代へ プロパティを覚えなくても、レイアウト調整が完結する時代

ここまで、CSSの改行制御を目的別に整理してきました。実務でCSSを書くエンジニア・デザイナーにとって、これらのプロパティの理解は今も必須です。一方で、「LPの見出しの改行位置がおかしいのを直したいだけなのに、CSSは分からない」という経営者・広報担当の方にとっては、もう1つの選択肢が現実的になっています。それが、AIコーディングエージェントに直接依頼する方法です。

6-1. 【GENAI独自データ】LP・ブログのCSS調整をAIに任せている実例

弊社（株式会社GENAI）では、AIコーディングエージェント「Claude Code」をMax 20xプラン（月額$200・約30,000円）で契約し、LPやブログ記事のレイアウト微調整・CSSの改行崩れ修正・レスポンシブ対応などを、エンジニアを都度アサインすることなく、その場で完結させています。

作業内容	従来（自分でCSSを書く）	AIエージェント（Claude Code）
見出しの改行位置調整	white-space/brタグの知識が必要	「ここで改行してほしい」と伝えるだけ
スマホ表示の崩れ修正	メディアクエリの記述が必要	崩れているスクリーンショットを見せて依頼
作業にかかる時間	調査・実装・確認で数十分〜数時間	数分〜十数分程度で複数案が出てくる
必要な知識	CSSプロパティの理解が前提	日本語で状況を説明できれば十分

6-2. 「CSSを覚える」と「AIに任せる」は対立しない

誤解してほしくないのは、CSSの知識が不要になるという話ではないという点です。AIエージェントが提示した修正案が本当に正しいかを判断するには、最低限「見た目がおかしい」と気づける目と、修正後にどこを確認すべきかという勘所は必要です。「細かい実装はAIに任せつつ、全体の判断は人間が行う」という役割分担が、現実的で持続可能な付き合い方だと弊社では考えています。

07 GETTING STARTED 【独自】非エンジニアがAIでレイアウト調整をする3ステップ CSSのプロパティ名を覚える必要はない

「CSSは分からないが、自社のLPやブログの見た目を自分で直したい」という方に向けて、AIエージェントを使ってレイアウトを調整するまでの3ステップを紹介します。

7-1. ステップ1：崩れている箇所をそのまま見せる

専門用語で説明しようとする必要はありません。「スマホで見たときに、このタイトルの2文字だけが次の行に飛び出していて気になる」というように、見たまま・感じたままを伝えるだけでAIエージェントは状況を理解し、原因になっているCSSプロパティを特定してくれます。

7-2. ステップ2：理想のイメージを伝える

「ここで改行してほしい」「一行に収めてほしい」といった希望を伝えると、AIエージェントが該当するプロパティ（white-space、overflow-wrapなど）を判断し、実装案を提示してくれます。この記事で紹介したプロパティ名を覚えていなくても、意図さえ伝われば十分です。

7-3. ステップ3：複数の画面幅で確認する

AIが提示した修正案も、必ず複数の画面幅（スマホ・タブレット・PC）で見た目を確認することが重要です。「直したつもりが、別の画面幅で新たな崩れが発生した」というケースもあるため、修正後は一通りチェックする習慣を持つと安心です。

08 CONCLUSION まとめ ── 改行制御の基本と、AIに任せるという選択肢 目的に応じてプロパティを使い分け、必要ならAIにも頼る

この記事では、CSSで改行を制御する4つのプロパティ、目的別の実装パターン、レスポンシブ対応のポイント、よくある実装ミス、そしてAIにCSS調整を任せる時代の考え方までを整理しました。最後にポイントを振り返ります。

CSSの改行制御は、プロパティの意味を理解して自分で書けるようになることも、AIエージェントに意図を伝えて任せることも、どちらも有効な選択肢です。「今すぐ直したいだけ」なら後者、「継続的にサイト運営に関わる」なら前者の理解も深めておく、という使い分けをおすすめします。

どちらの道を選ぶにしても、大切なのは「なぜその改行になっているのか」を一度立ち止まって理解しようとする姿勢です。原因を理解せずに場当たり的な修正を重ねると、後から見返したときに誰も手を付けられないCSSになってしまいます。プロパティの役割を押さえておくだけでも、AIに依頼する際の説明の精度が上がり、より意図に近い修正が短時間で得られるようになります。

この記事で紹介した4つのプロパティと目的別のパターンを、ブックマークやメモに残しておくだけでも、次に改行トラブルに遭遇したときの対応スピードは大きく変わるはずです。ぜひ実際の案件で試してみてください。

CSSを覚える前に、AIに直接頼んでみませんか

自社サイトの見た目を整えたいなら、CSSを学ぶ前にAIエージェントで直せないか試す価値があります。
AI鬼管理では、Claude Codeを使ったサイト改善・業務自動化を無料相談で伴走支援しています。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの70〜80%が目安、月額基本料は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. word-breakとoverflow-wrapは何が違いますか？

A. word-breakは単語の途中でも改行を許可するかどうかを制御し、break-allを指定すると常に文字単位で改行できます。一方overflow-wrapは、通常の区切りでは収まらずはみ出しそうな場合にだけ、最終手段として強制改行するプロパティです。役割の強さと発動条件が異なります。

Q. word-wrapとoverflow-wrapは同じものですか？

A. ほぼ同じ意味を持つプロパティです。word-wrapは古い記法、overflow-wrapが標準化された正式なプロパティ名にあたります。現在ではoverflow-wrapを使うことが推奨されていますが、古いブラウザ対応のため両方を併記するケースもあります。

Q. CSSで改行を防ぐにはどうすればいいですか？

A. white-space: nowrapを指定すると、テキストが折り返されず一行で表示されます。ただしコンテナ幅を超えるとはみ出すため、overflow: hiddenやtext-overflow: ellipsisと組み合わせて、はみ出した分を省略表示するのが実務での定番パターンです。

Q. 日本語と英語が混在する文章で改行がおかしくなるのはなぜですか？

A. 日本語と英語では、適切な改行位置のルールが異なるためです。word-break: break-allのように文字単位で改行を許可する設定を全体に適用すると、英単語まで途中で分断されてしまいます。英語部分はoverflow-wrapで最終手段としての改行に留めるのが基本です。

Q. レスポンシブ対応で改行崩れを防ぐコツはありますか？

A. PC・タブレット・スマホの3パターンで実際に表示を確認することが基本です。見出しなど特に目立つ要素は、メディアクエリと組み合わせてbrタグの表示・非表示を画面幅ごとに切り替えるテクニックもよく使われます。

Q. CSSが分からなくてもAIにレイアウト修正を頼めますか？

A. 頼めます。Claude CodeのようなAIコーディングエージェントは、「ここの改行位置がおかしい」といった日本語の説明から該当箇所とCSSプロパティを特定し、修正案を提示してくれます。プロパティ名を覚えている必要はありません。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。