スマホ時の改行調整

2025.07.12

inline-blockによる調整

見出しなどの文章で、PC表示では問題なくても、スマホ表示（画面幅が狭い状態）になると、文字が1文字だけ改行されて不自然になることがあります。

<h2 class="title">あなたを「正直に」サポートする<br>安心バリアフリー住宅です。</h2>

このような場合、スマホ時に意図的に改行したい位置を <span> で囲い、display: inline-block を指定すると、自然な場所で改行させることができます。

<h2 class="title">あなたを<span class="inline-block">「正直に」サポートする</span><br>安心バリアフリー住宅です。</h2>

これにより、「正直に」サポートするというまとまりを1行として保ちつつ、画面幅が狭くなった時にきれいに改行できます。

特定の幅以下でのみ改行したい場合には、<br> タグにクラスをつけて、メディアクエリで表示を制御すると便利です。

<h2 class="title">あなたを<br class="md-hidden">「正直に」サポートする<br>安心バリアフリー住宅です。</h2>

@media (min-width: 768px) {
  .md-hidden {
    display: none;
  }
}

このようにすることで、PC時には改行を非表示、スマホ時には強制的に改行といった柔軟な調整が可能です。

中央揃えのテキストは、スマホでもそのまま中央揃えにすると、改行位置が不自然になったり読みにくくなったりすることがあります。

上記のinline-blockかbrで位置を調整してもいいですが、メディアクエリで text-align: center を解除して左揃えにすることで、自然な読みやすさを保てます。

<p class="md-text-center">お問い合わせはメール、もしくはお電話にて承ります！<br>車に関するお悩みやご相談は、お気軽にご連絡ください！！</p>

@media (min-width: 768px) {
  .md-text-center {
    text-align: center;
  }
}

どの方法が「正解」というわけではありませんが、状況に応じて以下のような調整を行うと、読みやすくデザイン性の高いレイアウトにできます。

それぞれの特徴を理解して、用途に合わせて使い分けてみてください。