12周年記念パーティ開催! 2024/5/10(金) 19:00

レスポンシブデザインにおけるテキストのコントロール 前編 テキストの折り返しを制御する

モバイルデバイスの登場により、Webサイトがさまざまな画面幅で表示されるようになりました。どんなデバイスで表示しても、意図通りにテキストが表示されるようにコントロールするにはどのような方法があるか、ピクセルグリッドとCodeGridのリニューアル作業を例に解説します。

発行

著者 坂巻 翔大郎 フロントエンド・エンジニア
レスポンシブデザインにおけるテキストのコントロール シリーズの記事一覧

読みやすくするためのテキストコントロール

ピクセルグリッドのコーポレートサイトが2016年の4月にリニューアルしました。今回のリニューアルでは、あまり派手な変化は起きませんが、レスポンシブデザインを採用しています。このとき、特に気を遣ったのが表示するデバイスによるテキストの見え方でした。

上図は、狭い画面と広い画面で表示したときのピクセルグリッドサイトのトップページです。「株式会社ピクセルグリッドはJavaScriptの会社です」というキャッチテキストは、どの画面幅でも「株式会社ピクセルグリッドは」と「JavaScriptの会社です」の2行で表示されます。また、その下の文章も広い画面幅では中央揃えで適当な位置で改行していますが、狭い画面では左揃えにし、改行をなくしています。細かい変化ですが、読みやすく、伝わりやすくするために、こういったことを行っています。

このような表示の制御はどう行ったのか。本記事では、筆者らの経験と今回のリニューアル時の知見を元に、レスポンシブデザインにおけるテキストのコントロール方法を紹介します。

折り返したくない文節

特定の画面幅によっては、文章が半端な箇所で折り返してしまい、あまり見た目のいい状態でない場合があります。ピクセルグリッドサイトのトップページなどでは、display: inline-block;を使い、折り返し位置を調節しています。

サイト制作途中に文言を調節していた際に、画面幅によって文章の最後の1文字が折り返していました。たとえば、図のようにトップページの「著書があるスタッフが多数在籍」という見出しが、画面幅によっては文章の最後の1文字が折り返していたのです。

もし1行に収めるのであれば、メディアクエリを使用して文字サイズを調節するという手段もありますが(その手段については後述します)、ここでは文字サイズを調節せずに、折り返し位置を調節する方法を取りました。

まずは調整後の折り返し位置を調節した状態を見てみましょう。

1行目が「著書があるスタッフが」になり、2行目が「多数在籍」となっています。この部分のHTMLとCSSは、次のようになっています(実際のソースコードを簡略化しています)。

<h2 class="title">
  <span class="text">著書があるスタッフが</span>
  <span class="text">多数在籍</span>
</h2>
.title { text-align: center; }
.text { display: inline-block; }

折り返しを調節するために、調節したい文字列をdisplay: inline-block;である.textで囲んでいます。要は広い画面では文字の幅分のカラムが2つ並んでいて、収まりきらない画面幅になるとカラム落ちが発生するようにしています。そのため、前掲の図のように特定の箇所で折り返すような見た目になりました。

コラム:メディアクエリを使用してプロパティ値を切り替える

折り返し位置を調節したい箇所に<br>を挟み、メディアクエリを使用して、特定のブレークポイントをきっかけに、その<br>displayプロパティ値を切り替えることで文章の改行位置をコントロールすることもできます。ただ、この見出しの場合は、どの画面幅で折り返すかがわからなかったということと、メディアクエリを多用し過ぎるとメンテナンスコストがかかるため、display: inline-block;を使用し調節しました。

なお、メディアクエリを使用してプロパティ値を切り替えることで改行を調整する方法は、後述します。

折り返したくない見出し行(列)のテキスト

表の見出し列は、どうしても折り返しなしの1行で表示したい。そういった箇所にはwhite-space: nowrap;を使用しています。たとえば、次の図はピクセルグリッドサイトの求人情報ページにある表の、調整前の状態です。

この表では、特に列幅を指定していません。そのため、自動的に各列の幅が算出されます*。日本語などでは、ほとんどの場合で望んだ見た目になっていないでしょう。この例でも、左側の見出し列が意図しない場所で改行しています。

*注:自動テーブルレイアウトにおけるセル幅

自動テーブルレイアウトのセル幅がどのように決まるかは、CSS再入門 | 第24回 表の幅指定 3を参照してください。

今回のデザインでは、各列の幅は特に指定しないけれど、見出し列はその列のセルの中でも一番長い文字に合わせた幅になるようにする必要がありました。調整後は次の図のようになりました。

特に小難しい技術は使用していません。th { white-space: nowrap; } と指定しただけです。こうしておけば、どんなテキストがthに入ったとしても、thはそれらが収まるように伸縮し、テキストが折り返すことはありません。

ただ、折り返さなくなるということはデメリットになることもあります。それは多言語対応など、日本語以外の文字が入る場合です。あくまで筆者の経験上ですが、日本語以外の言語は、日本語よりも文字数が多くなる傾向にあります。そうなった際に見出し列が広がりすぎたり、表が広がりすぎて画面からはみ出ることがあるかもしれません。そのようなことが考えられる場合は、自動レイアウトではなく、固定レイアウト(table-layout: fixed;)などで列幅を固定するほうが良いでしょう。

画面幅に応じてdisplayプロパティを切り替える

ピクセルグリッドサイトのヘッダ付近には、そのページのタイトルと概要文を表示しています。

500px幅(スマートフォン向けの表示)では、概要文の改行がなくなります。

この部分では次のようなHTML/CSSとなっています。

<div class="title">
  <h1 class="heading">求人情報</h1>
  <div class="text">ピクセルグリッドでは、<br>「JavaScriptを利用したWebアプリ開発・Webサイト制作」を一緒に行う、<br>正社員スタッフを募集しています。</div>
  </div>
</div>
@media only screen and (max-width: 500px) {
  .text br {
    display: none;
  }
}

スマートフォン向けの表示ではなるべく高さを取りたくないため、画面幅が500px以下では概要文内のbrdisplay: none;にし、改行をなくして表示しています。

なお、brdisplayプロパティの初期値はinlineです。そのため、上記とは逆にbrを「通常は非表示、条件に合わせて表示」としたい場合には、条件に応じて次のようにdisplay: inline;を設定します。

.text br {
  display: none;
}

@media only screen and (max-width: 500px) {
  .text br {
    display: inline;
  }
}

コラム:brと同様の挙動をする文字コード

U+000Aは改行(LINE FEED (LF))を意味する文字コードです。これを文字列として挿入すると、<br>と同様の挙動が実現できます。

一行目<span style="white-space: pre;">&#x000A;</span>二行目

また、同様の実装はCSSの::before::afterでも実現可能です。

span.break::before {
    content: "\A";
    white-space: pre;
}

こういった方法を覚えておくとどこかで役に立つことがあるかもしれません。

画面幅に応じてフォントサイズを調節する

表示する画面幅によって、フォントサイズを調整することもできます。特に難しいことはなく、メディアクエリを使用して、次のように画面幅ごとにフォントサイズを指定します。

.text { font-size: 34px; }

@media only screen and (max-width: 540px) {
  .text { font-size:32px }
}

このコードは、通常の表示ではフォントサイズが34pxだけれども、540px以下の小さい画面幅で表示する場合は32pxで表示するように指定した例です。

狭い画面にしては、文字が大きく感じるような場合などに、フォントサイズの調整を行うことがあります。しかしブレークポイントが増えれば増えるだけ、管理や確認が面倒になっていきます。そういったリスクも考慮しつつ、慎重に調整していくことをおすすめします。

コラム:画面幅を基準にしたフォントサイズ

vw単位(初期包含ブロックの幅の1%)をfont-sizeプロパティ値に利用すれば、画面幅を基準としたフォントサイズになります。画面幅が800pxのときに、2vwとすれば、16px相当の文字サイズとなります。

.text {
  font-size: 2vw; /* 画面幅が800pxの時に16px相当 */
}

筆者は案件で利用したことはないのですが、vw単位指定はタイポグラフィなどで活躍するのではないかと思います。

vw単位について詳しくは、次の記事を参照してください。

まとめ

本記事では、レスポンシブデザインにおけるテキストのコントロールを紹介しました。レスポンシブデザインを実装していく際に、本記事の手法を参考にしていただければ幸いです。

微妙な位置で改行が入ることで、文章を読むリズムが崩れたり、別の意味として捉えてしまう可能性もあります。今回紹介した方法を使うことで、そういったことがなるべく起きないように、制作者が意図する見え方で、違和感を覚えずに文章を伝えられることができるようになるでしょう。

ただ、さまざまな画面サイズのことを考えて対応していくと、HTMLやCSSが複雑になることも考えられます。複雑になった場合、運用が面倒になる可能性もあります。そういったことを踏まえて、HTMLやCSSだけ無理に対応するのでなく、元々の文章やレイアウトを工夫するといったことも大事だと筆者は考えています。

次回は、英単語や数字、URLの折り返しの制御について、フロントエンド・エンジニアの小山田が解説する予定です。