レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法

よくある改行位置のデザイン上の問題

まずは例です。

蒼く透き通った空と瀬戸内の柔ら // ここで要素の幅いっぱいになる
かな波の音

「柔らかな」で1つのまとまりにしたいところですが、「柔ら」の後で改行されてしまった様子です。例えばこれがホテルのWebサイトのトップページに掲載されるキャッチコピーだとしたら、だいぶ興醒めではないでしょうか。

なんとか「柔らかな」を分割させないようにしたいです。これを解決するためにはどうすれば良いのか？ ここでは2つの方法を紹介します。

方法1. inline-blockを使う

古典的にはinline-blockをつかう方法があります。

改行してほしくない箇所を span で囲います。

<p>
  <span>蒼く</span>
  <span>透き通った</span>
  <span>空と</span>
  <span>瀬戸内の</span>
  <span>柔らかな</span>
  <span>波の音</span>
</p>

そして span を inline-block にします。

span {
  display: inline-block;
}

結果：

蒼く 透き通った 空と 瀬戸内の
柔らかな 波の音 // 「柔らかな」が分割されない

冒頭の例で「柔ら」のすぐうしろで改行していた文章が、「柔らかな」でひとつのかたまりとなって次の行に送られました。

しかしよく見てみると、spanごとに改行して書いていたので、不要なスペースがはさまってしまっています。

これを消すために、HTMLを改行せずに書いてあげましょう。

<p>
  <span>蒼く</span><span>透き通った</span><span>空と</span><span>瀬戸内の</span><span>柔らかな</span><span>波の音</span>
</p>

結果：

蒼く透き通った空と瀬戸内の
柔らかな波の音

半角スペースがなくなってきれいになりました。

方法2. flexboxを使う

もう1つの方法はflexboxをつかう方法です。次のHTMLは方法1と同じHTMLです：

<p>
  <span>蒼く</span>
  <span>透き通った</span>
  <span>空と</span>
  <span>瀬戸内の</span>
  <span>柔らかな</span>
  <span>波の音</span>
</p>

CSSは　flexbox を使ってみましょう。

p {
  display: flex;
  flex-wrap: wrap;
}

こうしてみてみると、方法1のinline-blockよりは方法2のflexboxの方がシンプルに書けるようにみえます。flexboxの場合は、HTML上で改行していても隙間が空くことがないのが良いところですね。

ただ、CSSを見ただけでは「改行位置の制御のためのflexboxである」ということを直感的に理解するのは難しいかもしれません。あまりに乱用してしまうと、かえってメンテナンスコストがかかる、なんてことも起こりうると思います。

入れ子にするとより詳細に指定ができる

すこし話がややこしくはなりますが、入れ子にすることでもっと細かな改行位置の指定ができます。

つぎの例では、幅の広い画面では前半と後半とで文章を分けて改行。そして狭い画面では前半後半それぞれの塊の中で改行するようにします。

<p>
  <span>
    <span>蒼く</span>
    <span>透き通った</span>
    <span>空と</span>
  </span>
  <span>
    <span>瀬戸内の</span>
    <span>柔らかな</span>
    <span>波の音</span>
  </span>
</p>

span {
  display: inline-block;
}

// or

p,
p > span {
  display: flex;
  flex-wrap: wrap;
}

結果：

蒼く透き通った空と
瀬戸内の柔らかな波の音

やりすぎると理解しにくくなるので、やるとしても2階層くらいまでが現実的でしょう。

指定しないほうが読みやすい場合も

モバイル端末のような画面幅がせまいときは、改行位置を指定するよりは流してあったほうが読みやすい場合もあります。どちらがよいかは文字サイズや内容にもよるので一概には言えないですが、経験的には流した方が読みやすいケースのほうが多いです。

もし流したほうが読みやすい場合は、メディアクエリーで素直にinlineにするなりflexboxをやめると良いです。

span {
  display: inline-block;
  @media screen and (max-width: 425px) {
    display: inline;
  }
}

https://jsfiddle.net/murata_s/s7zd1o3m/latest/