Webサイト制作において、自分が意図していない箇所のテキストで改行が行われて、表示が崩れた経験はあるかと思います。仕方のないことだと諦めている人も多いかもしれませんが、テキストの改行は、CSSを使って設定変更することができます。
パラメータを設定し、自動的に綺麗な改行がされることで、サイト上のテキストも読みやすくなります。
目次
CSSで改行設定をする理由とは
多くのWebサイトが存在する中から自分たちのサイトを選んでもらうために重要なのが、サイトの見やすさです。サイトのデザインはもちろんですが、テキスト文章が中途半端なところで改行されていて、読みづらくなっていないでしょうか？
サイトで使われているテキストは、見ている人の実行環境によって一行に表示される文字数は変わってきます。そして、次の要因がテキストを読みづらくする主な原因です。
- 単語の途中で行が折り返される
- 記号文字から始まる行がある
- 1つの英単語が行をまたいで書いてある
上記以外にも、サイトのテキストが読みづらくなる原因はまだまだあります。
特にネットユーザーは、サイトが見づらいと思ったらすぐに別のサイトに遷移してしまいます。そのため、サイト制作では、内容にこだわるだけでなく、ユーザーに見やすいサイトを作ることも重要となってきます。
見やすいサイト制作に重要となってくるのがCSSの改行設定です。改行設定は、自動的に読みやすい文章にしてくれる有難い機能です。
CSSでテキストの改行を設定する方法
CSSで改行操作を設定するにはどうすれば良いのでしょうか。CSSで改行設定で、使用するパラメータは次の3つです。
- white-space：改行・スペース・タブの設定
- line-break：禁則処理の設定
- word-wrap：英単語の折り返し設定
サイトに合わせた設定を一度行えば、滅多に使う機会のないパラメータです。使い方も特別難しい手順はありません。
各パラメータを見直して、サイト制作者にとっては使いやすく、サイト閲覧者にとっては見やすい設定にしましょう。
それでは、各パラメータの使用方法について解説していきます。
white-space
white-spaceプロパティでは、テキスト内の改行・スペース・タブの扱いを設定することができます。改行操作に関する設定なら、まず最初に設定するのが、このwhite-spaceプロパティです。どの値が使いやすいかは、個人の好みによる影響が大きいので、自分が使いやすいように設定しましょう。
white-spaceプロパティは、CSSに次のように記述します。
|
1 2 3 |
.test{ white-space: [値]; } |
値に設定できるのは、「normal」「pre」「nowrap」「pre-wrap」「pre-line」の5種類です。どの値を設定するかによって、表示方法や改行規則が違います。各値の違いは、次の通りです。
| 値 | ソース内のホワイトスペースの表示 | ボックスサイズ 指定時の自動改行 |
|
|---|---|---|---|
| 改行 | 半角スペース＆タブ （連続） |
||
| normal | 半角スペース1つ | 半角スペース1つ | する |
| pre | そのまま表示 | そのまま表示 | しない |
| nowrap | 半角スペース1つ | 半角スペース1つ | しない |
| pre-wrap | そのまま表示 | そのまま表示 | する |
| pre-line | そのまま表示 | 半角スペース1つ | する |
各値によって、表示の仕方に違いがあるのがわかりますね。サイト閲覧者の見やすいサイト表示を実現するには、どの値を設定するのがサイト制作に適しているかを考えてみましょう。
なお、ソース内のホワイトスペース（改行、半角スペース、タブ）を意図して使っているのに、表示では変わってしまうため、毎回表示に合わせて修正している人は多いはずです。これは、特に設定をしていない場合には、初期設定の「normal」が設定してある状態のためです。
line-break
line-breakプロパティでは、禁則処理ルールの設定をします。禁則処理とは、テキストを読みやすくするために、句読点や括弧、「；」、「！」、「？」などの記号文字が、行頭（または行末）になる改行を防ぐことです。文章を読んでいて、行が「！」から始まると何か不自然に感じます。また、括弧の始まりが行の終わりにくるのも不自然ですね。
こういった違和感は、テキストの読みづらさにつながります。できるだけ違和感のない、自然な文章になるようにしましょう。
line-breakプロパティは、CSSに次のように記述します。
|
1 2 3 |
.test{ line-break: [値]; } |
値に設定できるのは、「auto」「loose」「normal」「strict」の4種類です。どの値を設定するかによって、禁則処理ルールの厳しさが変わります。各値の違いは、次の通りです。
| 値 | ルール |
|---|---|
| auto | 禁則処理をしない |
| loose | 最低限の禁則処理 |
| normal | 一般的な禁則処理 |
| strict | 厳密な禁則処理 |
初期値は「auto」が設定してある状態です。記号使用時の改行が原因で、サイト上のテキストが読みづらいと感じるのであれば、line-breakプロパティの設定を見直しましょう。
word-wrap
word-wrapプロパティでは、英単語に関する改行ルールを設定します。英単語の途中でテキスト幅の端に到達したときに、英単語を途中で切って改行するか、英単語ごと改行するかを設定します。
word-wrapプロパティは、CSSに次のように記述します。
|
1 2 3 |
.test{ word-wrap: [値]; } |
値に設定できるのは、「normal」「break-word」の2種類です。各値の違いは次の通りです。
| 値 | ルール |
|---|---|
| normal | 英単語の途中で改行しない |
| break-word | 英単語の途中でも改行する |
初期値は「normal」が設定してある状態です。特別な機会がなければ変更する機会はないでしょう。実際、英単語の途中で改行されると、とても読みづらいですよね。
CSSでテキストをbrタグみたいに改行する方法
CSSの改行設定について理解できたら、次は応用的な使い方を学びましょう。
参考として、CSSを使って、HTMLに記述したテキストをbrタグを使ったみたいに改行する方法について紹介します。
まずは、次のサンプルコードを見てください。
See the Pen
jOrZvNV by sho-go (@sho-go)
on CodePen.
CSSファイルでcontentプロパティに設定している”\A”は改行を意味するコードです。そして、white-spaceプロパティの値に「pre」を設定しているため、文字コードによる改行が可能となりました。
この設定を行っておけば、いちいちbrタグをつけ忘れるミスが減り、作業効率もアップしますね。
まとめ
今回は、CSSを使ったテキストの改行設定について解説しました。
一度設定してしまえば、後は自動的に設定どおりの改行をしてくれるのでとても便利です。
サイト上のテキストが読みやすくなることはもちろん、表示崩れが少なくなり、サイト制作の作業効率もきっと向上するでしょう。
皆さんもCSSを使った改行設定、ぜひ実践してみてくださいね。
