CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法
レスポンシブデザインが主流の昨今ですが、CSSでセンタリングしたテキストの改行位置って悩ましいものです。そのままだと、最後の行が「す。」になってみたり、下手をすれば「。」なんて事も…。センタリングされた「。」なんて、カッコ悪いですよね。
プロの業者に依頼して作ってもらったサイトでも、テンプレートに流し込むだけの格安業者などの場合は結構そのままで、なんの対処もしていません。
という事で、今回はCSSで中央寄せした複数行（になるかもしれない）テキストの改行位置を指定して、画面サイズに左右されずに綺麗に整える小技を書いてみたいと思います。
～ 目次 ～
<br>を使う方法
1つ目の方法は、<br>を使います。この記事にたどり着いた方ならご存知かと思いますが、HTMLの改行タグです。XHTMLで記述されたサイトですと<br />が使用されている場合もあるかと思いますが、意味は同じです。
普通に<br>を使用してしまうと、当然PCでもスマホでも改行が入りますね。これで見栄えが整うのなら、それでOKです。しかし、レスポンシブデザインの場合、なかなかそうはいきません。そこで、画面幅に合わせた専用の改行タグを作って対応します。
|
1 2 3 4 5 6 7 8 9 10 |
@media screen and (max-width:767px){ .pc{ display:none; } } @media screen and (min-width:768px){ .sp{ display:none; } } |
上のようにCSSに記述すると、pc用（768px以上）の改行タグと、sp用（767px以下）の改行タグの完成です。ブレイクポイントは768pxで書いてありますが、サイトに合わせて書き換えてもOKですし、さらに何通りも用意してもいいですね。
|
1 2 3 4 5 |
<!-- スマホ限定の改行タグ --> <br class="sp"> <!-- PC限定の改行タグ --> <br class="pc"> |
使い方は、上のように改行タグにクラスを付けます。クラス名はすでに使われているものでなければ、”sp”でなくても構いません。
<br>を使用した例
実際に<br>を使用してデバイスごとに改行位置を変えた場合を見てみましょう。
適用前
今日は晴れ。明日の天気はわからない。明後日も同じ。そのまた次の日だって、やっぱりわからない。人生はわからないから面白いのだ。
<br>＋メディアクエリで改行位置を指定
今日は晴れ。
明日の天気はわからない。
明後日も同じ。
そのまた次の日だって、
やっぱりわからない。
人生はわからないから
面白いのだ。
PCとスマホで見比べると、スマホの方が改行位置が増えていると思います。この例では普通の<br>とスマホだけに有効な<br class=”sp”>を使用しています。キッチリと意図したところで改行してくれるので、緻密にデザインできますね。
inline-blockを使用する方法
2つ目の方法は、CSSのinline-blockを使用する方法です。個人的にはこちらの方が手軽で好きです。<br>を使用した場合はメディアクエリで指定された画面幅のデバイスで見た場合は必ず改行が入りますが、こちらは違います。
改行位置を指定するというよりは、「改行されない文節を作る」という感覚です。
具体的にはCSSに下のように記述します。すでに同じ内容のクラスが存在すれば、それを使用してもOKです。
|
1 2 3 |
.ib{ display:inline-block; } |
HTML中に書く時は以下のようにします。
|
1 |
<p>今日は晴れ。明日の天気は<span class="ib">わからない。</span><span class="ib">明後日も同じ。</span><span class="ib">そのまた次の日だって、</span><span class="ib">やっぱりわからない。</span></p> |
inline-blockを使用した表示例
実際にどうなるのか見てみましょう。
適用前
今日は晴れ。明日の天気はわからない。明後日も同じ。そのまた次の日だって、やっぱりわからない。人生はわからないから面白いのだ。
inline-blockを適用
今日は晴れ。明日の天気はわからない。明後日も同じ。そのまた次の日だって、やっぱりわからない。人生はわからないから面白いのだ。
ウィンドウを縮小したりして、画面幅を変えて見てみて下さい。<span class=”ib”>～～～</span>の中が、途中改行されない文節になっているのがわかると思います。変なところで改行が入るのを防いだだけで、見栄えがかなりよくなりますね。
word-breakやwhite-spaceなどの指定にもよりますが、基本的にinline-blockを指定しても分節自体の長さがボックスに収まらなくなれば、改行されてしまいますので、確実に収まる長さを一分節にしましょう。
font-sizeにvwを使用する方法
これは画面サイズよって使えるシーンと使えないシーンがあるため、小画面デバイス向けの調整を行うときに便利です。
vwは画面幅を基準にした単位です。画面幅が小さくなればテキストのサイズも同じ比率で小さくなりますので、コンテンツ幅が幅100%の時などは非常に便利です。
font-size:3vwを指定した場合
今日は晴れ。
明日の天気はわからない。
明後日も同じ。
そのまた次の日だって、
やっぱりわからない。
人生はわからないから
面白いのだ。
PCで見るとバカでかくなってしまいますが、iPhoneSEやnokiaなんちゃら等の小画面スマホで見ても、改行位置は狂わないはずです。
実際に改行が入っている箇所は<br>で改行を入れた箇所です。5～600PX以下あたりのブレイクポイントからなら、この方法も使いやすいと思います。
最後に
<br>を使う方法は、キッチリと指定箇所に改行を入れたい時に向いています。また、inline-blockを使う方法は、変なところで改行されるのが防げれば事足りる場合に向いています。
ケースに合わせて使い分けて、どんな画面でも読みやすく綺麗なセンタリングテキストに仕上げましょう。
