スマホの見出しが4行に崩れる原因｜幅・余白・キャッシュの確認
見出しを短くしても改行が直らない時に、画面幅ではなく実際に使える幅、CSS、キャッシュを切り分ける手順です。
匿名化方針実際の対応を基に、顧客名・地域名・URL・管理画面の識別情報・個人を特定できる数値を省いて構成しています。
- スマホだけ見出しが想定以上に改行される
- 文字を小さくしても別の端末で崩れる
- CSSを直したのに本番表示が変わらない
スマホの画面幅が十分に見えても、左右の余白、親要素の最大幅、文字サイズ、字間を引いた「実際に文字を置ける幅」は狭くなります。まず使用可能幅と適用中のCSSを確認し、その後に文章、余白、文字サイズ、キャッシュを順番に直します。
- 画面幅と文字を置ける幅の違い
- 4行になる原因を切り分ける順番
- CSS更新が反映されない時の確認
実際の修正例：見出しを変えても4行のままだった
文章を短くした後も、一部のスマートフォンでは見出しが4行になりました。端末の横幅だけを見るのではなく、コンテンツの左右余白と見出し要素へ実際に割り当てられた幅を確認しました。
- ブラウザの端末表示で複数の幅を試し、見出し要素の実測幅を確認しました。
- 親要素の余白、見出しの文字サイズ、字間、改行指定、固定高さを順番に外して影響を比べました。
- 短い2行の文章へ調整し、CSSのURLへ更新識別子を付け、実機でも最新版が読まれることを確認しました。
結果：原因は単純な文字数だけでなく、左右余白で狭くなった使用可能幅と古いCSSの混在でした。見出しの意味を保ったまま2行へ収めました。
匿名化：実際のサイト名、地域名、見出し文、端末の識別情報は掲載していません。
画面幅と、文字を置ける幅は違う
スマートフォンの表示幅から、ページ全体の左右余白、カード内の余白、装飾の幅を引いた残りが見出しの領域です。さらに太字や字間によって1行に入る文字数が変わります。
「この端末は横幅が広いから入るはず」と考えず、開発者ツールで見出し要素そのものの幅を確認します。
最初に見るCSS
見出しだけでなく、親要素に設定された幅や余白が影響します。固定のwidthやmax-width、左右padding、font-size、letter-spacing、line-height、white-spaceを確認します。
高さを固定していると、改行した文字が切れたり次の要素へ重なったりします。文章量が変わる場所では、必要な高さへ伸びる設定を基本にします。
文章を短くする前に、強制改行を確認
HTMLにbrが入っている、CSSで特定の語を改行させている、white-spaceの指定がある場合は、文章を変えても同じ位置で折り返します。まず意図しない固定改行を外します。
日本語は単語の途中でも折り返されやすいため、助詞だけが次の行へ残らないかも実機で見ます。
文字を小さくし過ぎない直し方
最初に左右余白、見出しの最大幅、不要な字間を見直し、それでも難しい時に文章を短くします。文字サイズだけを下げると、読みやすさを失っても端末差が残ることがあります。
画面幅に応じて緩やかに変わる文字サイズを使い、最小と最大を決める方法もあります。最終的には狭い幅と文字拡大でも情報が欠けないか確認します。
直したCSSが本番へ届いているか
ローカル画面だけ直っている場合は、CSSが公開対象へ含まれているか、本番URLのファイル内容が新しいかを確認します。次にプライベートウィンドウや別端末で見ます。
CSSのURLにバージョンやハッシュを付けると、古いキャッシュとの混在を防ぎやすくなります。毎回むやみにキャッシュを消すのではなく、配信側の更新方法を整えます。
確認する画面幅と状態
一つの最新端末だけでなく、狭い画面、横向き、文字拡大でも確認します。見出しが3行になること自体が失敗ではありません。意味が読みやすく、次のボタンや写真を押し下げ過ぎないかで判断します。
- 狭いスマートフォン幅
- 標準的なスマートフォン幅
- 横向き表示
- ブラウザの文字拡大・ズーム
- 長い日本語と英数字が混ざる場合
状況から最初の対応を決める
見え方から、調べる場所を分けます。
| 今の状況 | 最初の判断 | 確認する理由 |
|---|---|---|
| 全端末で同じ位置に改行 | br・white-spaceを確認 | 強制改行の可能性がある |
| 狭い端末だけ4行 | 実測幅と余白を確認 | 使用可能幅が足りない |
| 文字が切れる・重なる | 固定高さを外す | 内容に合わせて伸びていない |
| 修正端末だけ直らない | 本番CSSとキャッシュを確認 | 新旧ファイルが混ざっている可能性 |
迷ったら、この順番で進めてください
- 01見出し要素の幅を測る
端末幅ではなく実際の領域を見る
- 02固定指定を一つずつ確認
改行、幅、余白、高さ、文字設定を切り分ける
- 03意味を保って短くする
小さ過ぎる文字で押し込まない
- 04本番と実機で再確認
CSSの配信とキャッシュも見る
よくある疑問に答えます
見出しは必ず2行にすべきですか？
必ずではありません。重要なのは読みやすさと次の操作が見えることです。端末差を無視して固定し過ぎないようにします。
brで改行位置を固定してよいですか？
意図したデザインには使えますが、狭い幅や文字拡大で不自然にならないか確認します。必要なら画面幅ごとに扱いを変えます。
強制再読み込みで直れば解決ですか？
確認には役立ちますが、利用者へ毎回操作を求められません。更新時に新しいCSSが配信される設計も見直します。
この記事の根拠と確認範囲
実際のWeb運用・支援で確認した流れと、各機関の公式情報を基に構成しています。管理画面や仕様は変わるため、作業前に最新の公式情報も確認してください。