テキストを中央揃えにしたとき、スマホで見たときにちょうど良いところへ改行を入れて、綺麗に読めるように。
でもそれだとPCでは改行が多すぎる・・・なんてとき、ありませんか？
またはその逆で、PCでは良い位置で改行設定をしたけれど、スマホでは適切な位置にならない・・・。
今回はそんなPCとスマホで起こりうる改行問題を解決するための方法を紹介します。
CSSコードをコピペで簡単に実装できるので、必要に応じて利用してみてください。
br改行有無を実装した結果のイメージ
概要としては、PC or スマホ端末で指定した<br>タグが改行として反映しないようcssを仕込んでおく形。
文字だけだとイメージが伝わりづらいかと思い、横100%の画像の下へテキストを入力するパターンのイメージを作成しました。
PCでのイメージは今回改行なしタイプ
スマホでのイメージは改行を任意の場所に入れたタイプ
htmlはbrタグにclass指定を入れておく
<br class="nobr"><br>タグに対して1つclassを指定しました。
すべての<br>へ適用させるわけにもいかないと思うので、必要な<br>にだけ適用させるようclassを指定してあげます。
上記プレビュー画像で実際のhtmlはこんな感じ。
<p>テキスト情報はPCとスマホで<br class="nobr">改行される位置が違うので、<br class="nobr">スマホ表示をメインにする場合は<br class="nobr">PCでの見栄えが気になる。</p>スマホで見たときに綺麗に見えるよう改行を3箇所入れました。
コピペするCSS
@media screen and (min-width:767px){
br.nobr{display:contents;}
}CSSはこんな感じ。
<br>に「display: contents;」を指定することで改行が消えます。
そしてそれをメディアクエリ（@media）で指定することにより、端末の横幅が767pxよりも大きくなったとき<br class=”nobr”>を指定した改行が反映しないようになる。（主にPCで改行したくないとき向け）
もちろん「min-width:767px」のところを「max-width:767px」にすれば、767pxよりも小さくなったときに効果が発動します。（主にスマホで改行したくないとき向け）
逆にスマホのときだけ<br>の改行を反映したくないときも簡単ですね。
<br>タグをPCまたはスマホのときだけ反映しないようにする方法についてまとめ
cssに仕込んでおけば、端末のサイズによって良い感じの改行ができる。
センタリングを基調にしたコンテンツだと便利に使えそう。
文章コンテンツというより、画像メインに注釈を入れるようなコンテンツで主に利用できそうなテクニックですね。
良きWEBデザインをっ！