Houn

sp-br-center
2019.08.19

Web制作メモ

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

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

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

br-pc

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

br-pc-focus

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

br-sp-before

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

・・・ム

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

br-sp-after

この場合、

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

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

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

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

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

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

こんな感じのページで

center-pc

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

center-pc-focus

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

center-sp-before

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

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

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

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

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

すると

center-sp-after

断然マシになりますね。

まとめ

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

Share on SNSシェア