スマホで美しく改行、文字寄せ切り替えをするCSSの書き方

その１.美しく改行しよう

まず、PCだとこんな感じに表示されるページがあったとしまして

こう、見出しがありますやね。

こちらを、幅を狭めてスマホでの見え方にしてみます。

いやー、最悪ですね。美しくない。カウンセリングルー

・・・ム

これはさすがに直したほうが良いです。こうしたいですよね。

この場合、

<h2>カウンセリング<br>ルーム</h2>

といった感じでbrタグで改行したいのですが、PCでは改行要りません。スマホ時のとき、幅が狭くなって変なところで行落ちしないように改行を入れたいのです。だからちょっとひと手間、brタグにクラスを当てて・・。

<h2>カウンセリング<br class="sp-br">ルーム</h2>

このsp-brにこういうCSSを当てます。

これでサイト幅が559px以下になったとき（この数値はもちろんお好みで）、ヒュッと任意の場所に改行が入ってくれるようになります。

その２.文字寄せを美しく切り替えよう

こんな感じのページで

こういうリードコピーって、人間なんだか中央寄せにしたくなります。

このままサイト幅を縮めていくと・・

酷いですね。中央寄せテキストで行が落ちたときの間抜け感ってすごいです。あと普通に読みづらい。

個人的には、複数行に渡るテキストでの中央寄せはキケンだと思ってます。かといって随所に改行を入れても文字数が多いぶんうっとおしい。無難に左寄せにすべきです。

この場合の書き方だと、テキスト全体をラップしちゃってクラス当てて

<div class="text-align-switch">
ビリケンは〜〜想いを込めています
</div>

このクラスにスタイルを当てます。text-alignを切り替えるCSSですね。

すると

断然マシになりますね。

まとめ

このくらい気を遣ってあげると、だいぶ見やすくて美しくなります。