h1, h2, h3タグ内でのテキスト改行方法

このページでは、h1、h2、h3タグ内で長い見出しを読みやすく改行する方法を解説します。単に を入れるだけでなく、スマホ表示で崩れにくい判断基準も一緒に確認します。

確認日とこのページの使い方

確認日: 2026年5月19日。長い見出しがスマホで変に折れる、1文字だけ次の行に落ちる、英数字やURLがはみ出す時に、 で直すべきかCSSで直すべきかを整理します。

このページは、見出しタグの説明だけでなく、公開済みページを壊さずに見出しの折り返しを整えるための確認入口です。HTMLへ入れる改行、CSSへ入れる折り返し指定、AIへ相談する材料を分けて使ってください。

このページで整理できること

見出しの改行を、意味の区切り、見た目の調整、はみ出し対策に分ける
 、span、overflow-wrap のどれを使うか決める
スマホだけ見出しが読みにくい時、HTMLとCSSのどこを確認するか分ける
AIへ相談する時に、見出しHTML、関係するCSS、画面幅、起きている症状をメモにする

先に結論：見た目目的ならCSS、意味の区切りならbr

見出しの途中で改行したいとき、最初に決めるべきことは「文章の意味として区切りたいのか」「画面幅に合わせて読みやすくしたいだけなのか」です。

意味のまとまりを明確に分けたい場合は、 で意図した位置に改行します。
スマホで長い単語やURLがはみ出す場合は、CSSのoverflow-wrapを使います。
PCでは1行、スマホでは2行にしたい場合は、改行用の要素をCSSで切り替える方法が安全です。

検索結果やSNSで表示されるタイトル自体はHTML内の見出し改行とは別に扱われるため、SEO目的で無理に を入れる必要はありません。読者がページ上で読みやすいかを基準にします。

どこを直すか先に分ける

見出しの改行は、HTMLだけで直そうとするとPC表示が崩れ、CSSだけで直そうとすると意味の区切りが分かりにくくなることがあります。まず今の症状に近い行を選びます。

見えている状態	先に見る場所	使う方法
意味として2つに分けたい	HTMLの見出し本文	`<br>` または意味のある `span`
PCは1行、スマホだけ2行にしたい	HTMLの `span` とCSSのメディアクエリ	スマホ幅だけ `display: block;`
URL、ファイル名、英数字がはみ出す	見出しまたは親要素のCSS	`overflow-wrap: anywhere;`
1文字だけ次の行に落ちる	文章の区切り、文字数、スマホ幅	短い表現へ変えるか、意図した位置で `span` 分割

🔹 部分コード

<h1>これは長いタイトルです。
ここで改行します。</h1>
<h2>この見出しも長すぎるので
途中で改行します。</h2>
<h3>見出しのテキストが長い場合は、
ここで折り返しが行われます。</h3>

💻 完全動作コード（※このコピペのみでHTMLで動作するコード）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>h1, h2, h3タグ内でのテキスト改行</title>
</head>
<body>
  <h1>これは長いタイトルです。
ここで改行します。</h1>
  <h2>この見出しも長すぎるので
途中で改行します。</h2>
  <h3>見出しのテキストが長い場合は、
ここで折り返しが行われます。</h3>
</body>
</html>

🧩 応用と活用方法

h1、h2、h3タグ内で長すぎるテキストを途中で改行したい場合は、 タグを使用します。テキストが長くなった際に、明確にどこで改行したいかを指定する方法です。

🎯 改行の補足情報

 タグは、見出しのテキストや段落の任意の位置に改行を挿入する際に便利です。しかし、過剰に使用するとデザインに不整合をもたらす場合があるので、適切に使用しましょう。

📝 改行タグ使用のベストプラクティス

 タグは、主に固定されたレイアウトで明確に改行位置を決めたい時に使用されます。動的なコンテンツにはあまり使わない方が良いです。自動改行が必要な場合はCSSのプロパティを使用しましょう。

スマホで自然に2行に見せる書き方

PCとスマホで見出しの見え方を変えたい場合は、HTMLに区切り用のspanを入れ、CSSで表示を切り替える方法が扱いやすいです。

<h1 class="page-title">
  <span>最初に見る場所を</span>
  <span>ここで決める</span>
</h1>

<style>
.page-title span {
  display: inline;
}

@media (max-width: 640px) {
  .page-title span {
    display: block;
  }
}
</style>

この書き方なら、PCでは自然な横並びにしつつ、スマホでは意味のある位置で改行できます。日本語の見出しが変な場所で1文字ずつ折り返される場合にも使いやすい方法です。

見出しが横にはみ出すときのCSS

長い英単語、URL、ファイル名、エラー文などが見出しに入る場合は、 よりも折り返し用CSSを先に確認します。

h1, h2, h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

word-break: break-all;は日本語や英語を不自然な位置で切りやすいため、まずはoverflow-wrap: anywhere;から試すのがおすすめです。

📌 自動改行と強制改行の使い分け

HTMLの見出しタグや段落テキストは、コンテナの幅に合わせて自動的に改行（ワードラップ）されます。通常の文章であれば タグを使わなくても自然に折り返されるため、無理に改行位置を指定する必要はありません。

自動改行がうまく機能しないケース

ただし、長いURLや英数字の連続した文字列（例: ThisIsAVeryLongUnbreakableWordWithoutAnySpaces）など、単語の途中で改行できない場合があります。このようなケースでは、CSSのword-wrap: break-wordやoverflow-wrap: break-wordを使用すると良いでしょう。

強制改行の注意点

 タグを使った強制改行は、レスポンシブデザインでは問題を引き起こす可能性があります。画面幅が変わった場合、強制改行位置が不自然になることがあるため、可能な限り自動改行に任せるのがベストプラクティスです。

特殊なケースとして、white-space: nowrapを設定している要素では、明示的に タグを挿入しない限り改行されません。このプロパティを使用する場合は、改行が必要な箇所を慎重に検討してください。

実践的なアドバイス

見出しテキストの改行は、デザイン上の意図が明確な場合にのみ タグを使用し、それ以外は自然な改行に任せましょう。長い単語やURLがレイアウトを崩す可能性がある場合は、word-wrap: break-wordをコンテナ要素に適用するのが安全です。

公開済みページで見出しだけが崩れる場合は、まずスマホ幅で確認し、次にoverflow-wrap、最後に意図的な の順で調整すると、PC表示を壊しにくくなります。

AIに相談する時のメモ

AIへ相談する時は、見出しのHTMLだけでなく、関係するCSS、どの画面幅で崩れるか、PCとスマホでどう見せたいかを一緒に渡します。管理画面URL、FTP情報、非公開ファイルのパスは貼らないでください。

見出しの改行について相談します。

やりたいこと:
対象の見出しHTML:
関係するCSS:
PCでの見え方:
スマホでの見え方:
崩れる画面幅:
使ってよい方法:
- brで固定改行してよい:
- spanを追加してよい:
- CSSだけで直したい:

秘密情報や管理画面URLは貼っていません。

次に見るページ

HTMLタグの基本: 見出しタグや本文タグの役割を確認する
CSSセレクタと文字スタイル入門: classやCSSの当て方を確認する
Web公開トラブル症状別レスキュー: 公開後に表示が崩れた時の確認順へ戻る
AIに聞く前に状況を整理するツール一覧: 相談文や確認メモを作る
症状から探すHTMLサイトマップ: 近い症状から別の記事を探す

コピーしました！