【CSS】改行制御の方法を実例付きで徹底的に解説|サンプルコード付

※本サイトにはプロモーション・広告が含まれています。

(最終更新日:2023年6月)

✔この記事は以下のような方におすすめです

「CSSでの改行方法について詳しく知りたい」
「CSSの改行コードが分からない」
「実践的なCSS改行の例を見てみたい」

✔この記事を読むことで得られる情報

  • CSS改行の基本知識
  • CSSでの改行方法とその適用
  • CSS改行の具体的な例

本記事では、CSSを使った改行の基本から、実践的な使い方やオプションを駆使した応用例まで、具体的な内容をわかりやすく解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロジェクトマネージャー/SE(元外資系金融機関営業)

【副業】ブログ(月間15万PV)/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

CSSの改行制御を理解するための前提知識

こちらでは、CSSの基本について見ていきましょう。

まずは基本を理解のうえ、改行制御へ進んでください。

  • CSSとは?
  • 改行制御の重要性

改行制御の重要性

CSSで改行を制御することは、ウェブサイトのデザインやレイアウトを整える上で極めて重要な要素のひとつ。

その理由は以下のとおり。

  • レスポンシブデザインのサポート:コンテンツの適切な表示と読みやすさが向上する
  • レイアウトの柔軟性:特定の箇所で改行を防止し、デザイン上の制約を回避できる
  • 視覚的な整形:不自然な折り返しや断片化を防ぎ、読みやすさや視覚的な美しさを向上させる
  • テキストのハイライトやコピーの制御:不自然な選択やコピーを防止
  • 読みやすさと視覚的な一貫性:統一感のあるウェブサイトやアプリケーションを実現する

CSSで改行を制御する方法とプロパティ

CSSでの改行制御は、いくつかのプロパティを使うことで可能になります。

それぞれの特性を理解し、適切に使い分けることが重要です。

  • white-spaceの使い方と設定方法
  • line-breakの使い方と設定方法
  • word-wrapの使い方と設定方法
  • その他の改行に関連するプロパティ

white-spaceの使い方と設定方法

改行を制御するために、white-spaceについて理解しましょう。

  • white-spaceプロパティの概要
  • white-spaceの主な値

white-spaceプロパティの概要

white-spaceプロパティは、要素内の空白や改行をどのように扱うかを指定するためのプロパティです。

空白とは改行だけでなく、スペースやタブも含みます。

このプロパティを使うと、テキスト内の空白を詳細に指定できます。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .nowrap {
    white-space: nowrap;
  }

  .pre {
    white-space: pre;
  }

  .pre-wrap {
    white-space: pre-wrap;
  }
</style>

<div class="container">
  <div class="nowrap">
    This text will not wrap and will stay on a single line.
  </div>

  <div class="pre">
    This text will preserve whitespace and line breaks.
    It will be displayed exactly as it is written in the HTML source code.
  </div>

  <div class="pre-wrap">
    This text will preserve whitespace but will wrap to the next line if necessary.
    Line breaks will be preserved as well.
  </div>
</div>

white-spaceの主な値

white-spaceプロパティの主な値は、以下のとおり。

  • normal:連続する空白を1つの空白として扱い、改行も自動でおこなう
  • nowrap:改行を抑制し、テキストを一行に表示する
  • pre:HTML内の空白や改行をそのまま表示する
  • pre-line:空白をまとめて扱いますが、改行はそのままにする
  • pre-wrap:空白も改行もそのままにする

以下がそれぞれのサンプルコードです。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .normal {
    white-space: normal;
  }

  .nowrap {
    white-space: nowrap;
  }

  .pre {
    white-space: pre;
  }

  .pre-line {
    white-space: pre-line;
  }

  .pre-wrap {
    white-space: pre-wrap;
  }
</style>

<div class="container">
  <div class="normal">
    This text has multiple spaces and line breaks.
    It will be displayed with normal white space handling.
  </div>

  <div class="nowrap">
    This text has multiple spaces and line breaks.
    It will be displayed on a single line without wrapping.
  </div>

  <div class="pre">
    This text has multiple spaces and line breaks.
    It will be displayed exactly as it is written in the HTML source code.
  </div>

  <div class="pre-line">
    This text has multiple spaces and line breaks.
    It will be displayed with collapsed white space but preserving line breaks.
  </div>

  <div class="pre-wrap">
    This text has multiple spaces and line breaks.
    It will be displayed exactly as it is written, preserving both white space and line breaks.
  </div>
</div>

line-breakの使い方と設定方法

line-breakは、改行位置を制御するプロパティです。

主に、日本語や中国語などの全角文字を扱う際に使われます。

設定できる値はこちら。

  • auto
  • loose
  • normal
  • strict

このプロパティを利用することで、文節や単語の途中での改行を防いだり、制御したりすることができます。

<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .auto {
    line-break: auto;
  }

  .loose {
    line-break: loose;
  }

  .normal {
    line-break: normal;
  }

  .strict {
    line-break: strict;
  }
</style>

<div class="container">
  <div class="auto">
    This is a longwordwithoutspaces. It will be automatically broken into multiple lines as needed.
  </div>

  <div class="loose">
    Thisisalongwordwithoutspaces.Itwillbebrokendowninto multiple lines with loose line breaking.
  </div>

  <div class="normal">
    Thisisalongwordwithoutspaces.Itwillbebrokendownintomultiplelineswithnormal linebreaking.
  </div>

  <div class="strict">
   Thisisalongwordwithoutspaces.Itwillbebrokendownintomultiplelineswithstrictlinebreaking.
  </div>
</div>

word-wrapの使い方と設定方法

word-wrapプロパティは、長い単語やURLをどのように折り返すかを指定するプロパティです。

このプロパティにはnormalbreak-wordの2つの値を指定できます。

  • normal:単語の途中での改行を防ぐ
  • break-word:必要に応じて単語の途中でも改行する
<style>
  .container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .normal {
    word-wrap: normal;
  }

  .break-word {
    word-wrap: break-word;
  }
</style>

<div class="container">
  <div class="normal">
    Thisisalongwordwithoutanyspacesorbreakpointsinbetweenit.Itwillcontinuetoflowononesingleline.
  </div>

  <div class="break-word">
    Thisisalongwordwithoutanyspacesorbreakpointsinbetweenit.Itwillbebrokenintomultiplelineswiththebreak-wordproperty.
  </div>
</div>

その他の改行に関連するプロパティ

上記以外にも改行に関するプロパティがあります。

当記事では以下をご紹介します。

  • line-height
  • letter-spacing
  • text-align

line-height

line-heightプロパティは、行の高さを指定するためのプロパティです。

この値を調整することで、行間の空きをコントロールできます。

これにより、テキストの見やすさやレイアウトの調整が可能となるのです。

p {
    line-height: 1.5;
  }

letter-spacing

letter-spacingプロパティは、文字間のスペースを調整するためのプロパティです。

このプロパティを適切に使用することで、テキストの可読性を向上させられます。

p {
    letter-spacing: 0.1em;
  }

text-align

text-alignプロパティは、テキストの水平方向の位置を指定するプロパティです。

leftrightcenterjustifyなどの値を使い、テキストの揃え位置を調整できます。

text-align: center;

テキストは中央揃えになります。

実践!CSSで典型的な改行制御

こちらでは、前述したプロパティを使って具体的な改行制御を行う方法を説明します。

具体例をご覧いただければ、すぐに使いこなせるようになるでしょう。

  • まるでbrタグのように改行する方法
  • 改行を抑制する方法
  • 英単語途中での改行を防ぐ方法
  • 記号による改行を制御する方法

まるでbrタグのように改行する方法

CSSで<br>タグのように強制的に改行を入れるために、white-spaceプロパティを使いましょう。

<style>
  .text {
    white-space: pre;
  }
</style>

<div class="text">
  This is the first line\nThis is the second line\nThis is the third line
</div>

これは、特定の場所で強制的に改行したい場合に便利です。

改行を抑制する方法

一行で表示したいテキストがある場合、white-space: nowrap;で、改行を抑制します。

これは、メニューバーや見出しなど、一行に収めたいテキストに有効です。

<style>
  .text {
    white-space: nowrap;
  }
</style>

<div class="text">This is a long text that should be displayed in a single line without any line breaks.</div>

英単語途中での改行を防ぐ方法

英単語やURLなど、途中で改行したくないテキストがある場合、word-wrap: normal;を指定します。

これにより、単語の途中で改行することを防げます。

<style>
  .text {
    word-wrap: normal;
  }
</style>

<div class="text">ThisIsALongWordThatShouldNotBeBrokenIntoMultipleLines</div>

記号による改行を制御する方法

記号(特に日本語の句読点や括弧など)による改行を制御するにはline-breakプロパティを使います。

例えば、line-break: strict;を指定することで、記号の前後での不自然な改行を防ぐことが可能です。

<style>
  .text {
    line-break: strict;
  }
</style>

<div class="text">これは、日本語の文章です。文中の句読点や括弧の前後での改行を防ぐためにline-breakプロパティを使用しています。</div>

レスポンシブデザインで改行を調整する方法

こちらでは、レスポンシブデザイン時の改行制御の方法と、そのコツを説明します。

  • メディアクエリを使った改行制御
  • 柔軟なレスポンシブデザインのコツ

メディアクエリを使った改行制御

レスポンシブデザインにおける改行の調整は、メディアクエリを使って行います。

メディアクエリを使用することで、特定の画面サイズに合わせてスタイルを適用することが可能です。

例えば、スマートフォンの画面サイズでは文字サイズを小さくし、一行の文字数を減らして改行を調整するなどが考えられます。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* デフォルトのスタイル */
    .text {
      font-size: 16px;
    }

    /* スマートフォン向けのスタイル */
    @media only screen and (max-width: 480px) {
      .text {
        font-size: 14px;
        word-wrap: break-word;
      }
    }

    /* タブレット向けのスタイル */
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      .text {
        font-size: 16px;
        word-wrap: normal;
      }
    }

    /* デスクトップ向けのスタイル */
    @media only screen and (min-width: 769px) {
      .text {
        font-size: 18px;
        word-wrap: normal;
      }
    }
  </style>
</head>
<body>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo ante non justo tincidunt, sit amet dignissim felis tristique. Nulla facilisi. Sed consectetur tincidunt ante, id finibus enim pulvinar et. Donec vestibulum turpis ac arcu finibus, et lacinia libero commodo. Morbi feugiat neque eu facilisis cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada elementum facilisis. Phasellus volutpat risus a enim rhoncus venenatis.
  </div>
</body>
</html>

柔軟なレスポンシブデザインのコツ

レスポンシブデザインで改行を調整する際のコツは、”コンテンツが最初”という考え方を持つこと。

つまり、デザインや改行の位置はコンテンツの内容や形によって変わるべきで、それを規定するのがCSSです。

そのため、まずはコンテンツをしっかりと理解し、それに合った改行の位置を設定することが大切です。

まとめ

当記事では、CSSでの改行制御の基本的な方法を学びました。

  • white-space、line-break、word-wrap:テキストの改行を自由自在にコントロールできる
  • line-heightやletter-spacing:行間や文字間のスペースも調整できる

これらの知識はあくまで基本であり、それらを活用し実際のウェブサイトに適用するには、多くの練習が必要です。

実際にウェブサイトを作り、必要なスタイルを適用し、ブラウザで結果を確認することで、CSSの挙動を理解し、それを自在に操る力が身につきます。

当サイトのコードを参考に、自身でカスタマイズを加えながら、手を動かして、学んでください。

タイトルとURLをコピーしました