レスポンシブ対応のウェブサイト制作で、ディスプレイサイズによっては見出しや文章での改行位置が求める位置で行われないケースはありませんか？PCなどの幅が広い場合ですと問題ないが、スマホの画面で見た時に、単語の真ん中で改行されてしまっている、、と、機能要件には影響しなくても誰もが一目見て違和感を感じてしまう状態になってしまいます。   そこで今回はCSSを使って、このようなケースでの対応例を見ていきたいと思います。今回は見出しテキストを、デスクトップのディスプレイサイズと、モバイルのディスプレイサイズで見たときをサンプルとしていきます。 【HTML】※一部抜粋

<h1>
 見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい
</h1>

  デスクトップのディスプレイで見たときはこんな感じで1行に収まるかと思います。ただし、特別な対応をせずにそのままモバイルの画面で見た場合は、画面幅に合わせて意図しない場所で自動的に改行され複数行で表示されるのではないでしょうか。

// Desktop Display

見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい


// Mobile Display

見出し文字や文章のテキストでディス
プレイに合わせて改行位置をコント
ロールしたい

   

brタグを改行したい位置に入れて、モバイルの時だけ改行をさせる

そこで、よく見かける対応としてbrタグを入れて改行させるのですが、メディアクエリーで表示非表示を切り替える方法があります。このような感じであらかじめ改行位置にbrタグを入れてCSSで表示非表示を切り替えています。 【HTML・CSS】※一部抜粋

// HTML

<h1>
 見出し文字や文章のテキストでディスプレイに合わせて<br>改行位置をコントロールしたい
</h1>


// CSS

h1 > br {
 display: none;
}
@media screen and (min-width:480px) { 
 h1 > br {
  display: block;
 }
}

  こうすることで、同じくデスクトップで表示させた時には改行されずに1行で表示されますが、モバイルの場合は求める改行位置で改行されるようになります。

// Mobile Display

見出し文字や文章のテキストでディスプレイに合わせて
改行位置をコントロールしたい

  ただし、より小さいディスプレイで見た時に、さらに改行される箇所が発生した場合、下記のようにこの改行が違和感になる場合もあります。brタグを使う方法は対応できるケースとして限定的になってしまいます。

// Mobile Display（smaller than）

見出し文字や文章のテキストでディスプ
レイに合わせて
改行位置をコントロールしたい

   

インラインブロックを指定したspanを使う

そこで、改行させたくないテキストの範囲をdisplay: inline-block;のスタイルついたspanタグで囲む方法があります。具体的には下記のように対応します。 【HTML・CSS】※一部抜粋

// HTML

<h1>
 見出し文字や文章のテキストで<span>ディスプレイに合わせて</span><span>改行位置をコントロールしたい</span>
</h1>


// CSS

h1 > span {
 display: inline-block;
}

  これで実際に各サイズのディスプレイで見てみますとこのような感じになります。デスクトップの広さですともちろん1行で表示されます。そこからモバイルのディスプレイはばに変わると、spanタグで囲ったブロックごと改行されます。

// Desktop Display

見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい

// Mobile Display

見出し文字や文章のテキストでディスプレイに合わせて
改行位置をコントロールしたい

  このような形で改行されるので、さらに小さいディスプレイサイズでも求める改行位置で改行させることができ、brタグを使った方法より柔軟に対応できるようになります。

// Mobile Display（smaller than）

見出し文字や文章のテキストで
ディスプレイに合わせて
改行位置をコントロールしたい

  改行位置がおかしいからといって、重大な問題が発生するケースはまれかと思いますが、誰が見てもわかりますしクライアントさんによっては強い違和感を感じられるケースもあるかと思いますので、改行位置で困った場合には是非活用してみてはいかがでしょうか。