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

ピクセルグリッドのコーポレートサイトが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つ並んでいて、収まりきらない画面幅になるとカラム落ちが発生するようにしています。そのため、前掲の図のように特定の箇所で折り返すような見た目になりました。

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

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

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

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

特に小難しい技術は使用していません。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以下では概要文内のbrをdisplay: none;にし、改行をなくして表示しています。

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

.text br {
  display: none;
}

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

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

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で表示するように指定した例です。

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

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

まとめ

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

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

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

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