レスポンシブに改行タグを無効化 1

ウェブページの中には、テキストを中央寄せに配置しているものがあります。中央寄せは、タイトルや見出しに使われるようです。そして、中央寄せの文はしばしば訳の分からない位置で改行されます。例えば以下のような場合です。

左端から右端まで、長い長い1行が終わって
すぐにまた新しい行がそれに続く。

これが次のように表示されることがあります。

左端から右端まで、長い長い1行が終わっ
て
すぐにまた新しい行がそれに続く。

色々見てみたところ、モバイル端末で表示すると変な開業になるようです。きっと、デスクトップパソコンのような、表示幅にたっぷり余裕があるデバイスでの閲覧を想定しているんだと思います。その場合、横にずっと長く続く文はタイトルや見出しであることがわかりにくくなるかもしれません。逆に、適当な箇所で改行して、中央寄せすれば、タイトルであることを強調できます。この発想にはなんの問題もありません。

ただし、モバイル端末で表示すると、十分な表示幅が取れないので、文字列が右端に達した場合の改行と、brタグによる意図的な改行が混在します。その結果、やたらと短い文字列の行ができてしまいます。今回はこの問題の解消方法を考えます。

CSSで表示幅ごとの場合分け

CSS3ではウィンドウの大きさに合わせて、styleを変えることができます。これを利用すれば、スマートホン、タブレット、デスクトップＰＣなど大まかな大きさを規定して、その時のフォントサイズや改行タグの有効無効を指定できます。

<p id = "header-text">左端から右端まで、長い長い1行が終わって<br class = "can-br">
    すぐにまた新しい行がそれに続く。</p>

次のmax-widthとmin-widthで場合分けをしています。　.can-brというクラスのbrタグは、ウインドウ幅が320より小さい場合は、display:noneで無効化されます。

@media screen and (max-width: 320px){
  p {
    font-size: 18pt;
    text-align: center;
  }
  .can-br {
   display:none;
  }
}
@media screen and (min-width: 320px){
  p {
    font-size: 30pt;
    text-align:center;
  }

}

まとめ：完全ではないが、かなりの改善

表示幅に関して大まかに設定するので、完全におかしな改行をなくすことはできません。でも、フォントの縮小と改行タグの無効化を合わせて使うと読みやすくなると期待できます。