【コピペで使える】レスポンシブデザインでいい感じにテキストの改行位置を調整する方法

概要

今回は、レスポンシブデザインでテキストの改行位置を調整する実装方法について紹介したいと思います。

横幅が固定されているPC専用デザインの場合は、指定のフォントサイズであれば改行位置というのも概ね決まってくるため、<br>タグを使えば改行位置を調整することが可能でした。

しかし、画面幅によってコンテンツやフォントサイズが自動的に変わる昨今のレスポンシブデザインとなると、そのままテキストを書いただけでは、以下の例のように、意図せぬ場所での改行が生じてしまいます。

本来であれば、”ア”で切れてしまうのではなく、”アドバイス”のような単語は一塊で見せた方が読みやすいですよね。

本文であればまだしも、見出しやキャッチコピーとなるとこの辺の改行位置はこだわりたいところになると思います。
 

inline-block（インライン・ブロック）を使おう

結論から言いますと、inline-block（インライン・ブロック）という要素を使うとレスポンシブデザインでの改行調整ができます。

inline-block（インライン・ブロック）とは、インライン要素とブロック要素の性質の両方を併せ持つ要素です。

一塊のテキストをinline-block（インライン・ブロック）にして、そのテキストを小さなブロックにすることで改行時にその塊ごと改行するようにできます。

実装は非常に簡単です。
 

HTML部

<span class="ib">タドワークス</span><span class="ib">では、</span><span class="ib">SEO対策</span><span class="ib">に関する</span><span class="ib">継続的な</span><span class="ib">アドバイス</span><span class="ib">と、</span><span class="ib">ウェブサイト運用</span><span class="ib">に関する</span><span class="ib">各種相談</span><span class="ib">や</span><span class="ib">実作業</span><span class="ib">までを</span><span class="ib">パッケージ化</span><span class="ib">して</span><span class="ib">提供します。</span>

上記のように、途中で改行させたくない一塊のテキストを、<span class=”ib”></span>で囲います。

おすすめの分割方法は、単語、また、接続詞や助詞を一塊として分割するとどの幅でもそれなりに見栄えのよい改行になるかと思います。
 

CSS部

.ib { display:inline-block; }

まとめ

ソースコードは少々見づらくなってしまうのですが、見出しや目立たせたい文章は読みやすいように改行調整はした方がよいとは思います。

是非活用してみてください。