【CSS】改行ルールの設定方法！brタグを使わずに改行しよう

あなたのご希望に沿った案件が必ず見つかります
【フリーランス向け】高収入・好待遇の案件をご紹介

≫まずは簡単30秒で無料お問い合わせから≪

CSSで改行設定するメリット

Webページにおいて見やすさは重要です。そのうえでテキストの改行が不自然だと読みづらくなります。なお、そのサイトを表示しているデバイスの幅によっても一行に表示できる文字数は異なります。また、改行に関して、テキストが読みづらくなる主な原因には次のようなものがあります。

• 単語の途中で改行される
• 行頭に記号が来る
• 英単語の途中で改行される

見やすさという点で改行が重要になってきますが、かといって、HTMLのbrタグで改行させるのはレスポンシブ対応や保守性という面でおすすめできません。そこで、CSSで改行設定を行うことで自動的に読みやすい文章にさせることができます。

改行に関するプロパティ

white-space	改行・スペース・タブの扱いを指定する
word-break	テキストを折り返す際に単語の途中で改行するかを設定する
overflow-wrap	領域内に収まりきらない英単語に関する改行ルールを設定する
line-break	禁則処理のルールを設定する

各々説明していきます。

white-spaceプロパティ

「white-space」プロパティは、HTML要素内の空白文字（改行・スペース・タブ）の扱いを指定するプロパティです。「white-space」プロパティは、すべての要素に適用可能です。

【サンプルコード】

セレクタ名{
  white-space:[値];
}

【使用可能な値】

値によって改行方法・表示が異なります。

値	連続した改行・半角スペース・タブ	改行	折り返し
normal （初期値）	1つの半角スペースとしてまとめて表示する	ボックス横幅到達時のみ改行する	自動で折り返す
nowrap	1つの半角スペースとしてまとめて表示する	ボックス横幅到達時でも改行しない	折り返さない テキストははみ出して（または横スクロールで）表示される
pre	そのまま表示する ※1	ボックス横幅到達時でも改行しない	折り返さない テキストははみ出して（または横スクロールで）表示される
pre-wrap	そのまま表示する	ボックス横幅到達時テキスト内の改行を反映する	自動で折り返す
pre-line	1つの半角スペースとしてまとめて表示する	ボックス横幅到達時テキスト内の改行を反映する	自動で折り返す

※1：整形済みテキストとして表示する（空白文字類を有効にする）場合は<pre>タグを使用しましょう。

はみ出た部分の扱い

overflowプロパティ

はみ出た部分の表示にはoverflowプロパティを使います。これはボックスに収まりきらない内容の表示方法を指定するプロパティです。デフォルトだとボックスからテキストがはみ出てしまいます。

値	はみ出た部分
hidden	非表示にする
scroll	スクロール表示にする

word-breakプロパティ

word-breakプロパティは、テキストを折り返す際に単語の途中で改行するかを設定するプロパティです。ブロック型の要素に適用できます。※word-breakプロパティはInternet Exp.などの独自拡張機能であり、CSS3では定義されていません。

値	はみ出た部分
normal （初期値）	禁則処理ルールに従って単語を折り返す 英語は単語の区切りで折り返す 日本語は行末で折り返す
break-all	どんな位置でも単語の途中で折り返す 英単語の途中でも折り返す
break-word	できるだけ単語の区切りで改行する
keep-all	単語の途中で改行しない 単語の区切りで改行する 日本語の場合は、単語の区切りでは改行しない（読点で区切られる）

overflow-wrapプロパティ

overflow-wrapプロパティは、英単語に関する改行ルールを設定するプロパティです。領域内に収まりきらない英単語を途中で改行するか、英単語ごとに改行するかを指定できます。置換でないインライン要素に適用できます。CSS3でword-wrapからoverflow-wrapに改称されました。ただ、Internet Exp.などのブラウザでは、word-wrapのみ対応しています。

overflow-wrapプロパティは、標準外のプロパティであるword-wrapと同じように動作します。

値	はみ出た部分
normal （初期値）	英単語の途中で折り返さない 半角英数字以外の文字が溢れそうなときは自動する
break-word	ほかに改行できる箇所がなければ単語の途中でも折り返す

「overflow-wrap」と「word-break」の主な違い

両者の主な違いは、禁則処理の設定に関する意識の強さです。word-breakプロパティが禁則処理を強く意識しているのに対し、overflow-wrapプロパティは禁則処理よりも「単語の折り返し」を強く意識しています。

テーブルセル内でoverflow-wrapプロパティが効かないときの対処法

overflow-wrapプロパティが効かないケースとしてtableタグで使われているということが考えられます。テーブルに関するCSSのデフォルト設定は「table-layout:auto」となっています。このプロパティはテキストによってレイアウトを計算するものでテキストの長さとコンテナの幅を自動計算するoverflow-wrapプロパティと似た仕組みになっています。そのため、テーブルセル内でテキストを自動で改行させるには、tableタグに直接ではなく、「width」と「div」タグを使用することで、overflow-wrapプロパティが反映されるようになります。

line-breakプロパティ

line-breakプロパティとは、禁則処理のルールを設定するプロパティです。ブロック型の要素に適用できます。※Internet Exp.の独自拡張機能であり、CSS3では定義されていません。

禁則処理とは？

禁則処理とは、テキストの読み易さや見た目を整えるために句読点や括弧、「！」や「？」、「…」などの記号文字が行頭（または行末）になる改行を避ける処理を指します。

例）行頭禁則文字： 「、」「 。」「 ）」「 」」 「々」「…」「:」「;」「！」「？」
例）行末禁則文字： 「（ 」「「」

【サンプルコード】

セレクタ名{
  line-break:[値];
}

【使用可能な値】

値によって禁則処理ルールの厳しさが異なります。

auto （初期値）	禁則処理をしない
loose	最低限の禁則処理ルールを適用する
normal	一般的な禁則処理ルールを適用する 「々」「…」「:」「;」「!」「?」が行頭に来なくなる
strict	厳密な禁則処理うルールを適用する 「ッ」や「ぃ」などの小さい文字や、「ー」や「…」などの記号が行頭に来なくなる

【目的別】改行の設定方法

ここまで紹介したプロパティ・値の組み合わせによって目的に合った改行方法を実現できます。ここからは代表的な組み合わせ方を紹介します。

CSSでテキストをbrタグのように改行する

たとえば、spanタグで区切った直後にCSSで改行する場合は次のように記述します。

【HTML実行コード】

<span class=test>あいうえお</span>かきくけこ

【CSS実行コード】

.test::after{
 content:"\A";
 white-space:pre;
}

【実行結果】

スタイルシートのcontentプロパティで設定している「”\A”」は改行を示す値です。white-spaceプロパティの値に「pre」を設定しているため、文字コードによる改行を可能にしています。ちなみに、contentプロパティは、擬似要素（::before、::after）以外には無効です。擬似要素を挿入する要素はインライン要素である必要があります。

改行させない

改行させない場合はwhite-spaceプロパティで、ボックス横幅で改行をしない値を指定する必要があります。

【HTML実行コード】

あいうえおかきくけこさしすせそたちつてとなにぬねの

【CSS実行コード】

.test{
 white-space:pre;
 width:200px;
 height:50px;
 border:medium solid #0000ff;
}

【実行結果】

英単語の途中で改行させない

英単語の途中で改行するのを防ぐにはword-wrapプロパティを使用し、値にbreak-wordを指定します。

【HTML実行コード】

<span class=test>abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz</span>

【CSS実行コード】

.test{
  word-wrap:break-word;
}

【実行結果】

記号で改行させない

「！」や「？」などの記号の前に改行が入るのを防ぐにはline-breakプロパティを使用します。厳密に行うには値にstrictを指定します。

【HTML実行コード】

<span class=test>あいうえお！かきくけこ！さしすせそ！</span>

【CSS実行コード】

.test{
  line-break:strict;
}

【実行結果】

CSSの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

HTML/CSSとは？関係性や書き方を解説

Webサイトの作り方は？制作手順と作成後の注意点を解説