HTMLのbrタグ以外で改行する方法を簡単に解説

公開：2024年9月3日更新：2025年10月28日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLのbr以外で改行する方法
pタグで改行する
CSSのwhite-spaceプロパティで改行する
preタグで改行する
リストタグで改行する

HTMLのbr以外で改行する方法

HTMLのbrタグを使わず、改行を実現する方法は複数存在します。brタグはシンプルな改行を提供しますが、レスポンシブ対応やSEOの観点から、より構造的なマークアップが推奨されています。

HTMLのbr以外で改行する方法として、以下の4つがあります。

pタグで改行する
CSSのwhite-spaceプロパティで改行する
preタグで改行する
リストタグで改行する

それぞれの方法は異なる特徴を持ち、使用シーンに応じて使い分けることができます。以下では、各方法について詳しく解説していきます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

pタグで改行する

pタグは段落を作成するHTMLタグで、最も基本的な改行方法です。各段落は独立したブロック要素として扱われ、自動的に前後の段落との間に適切な余白が挿入されます。

<!DOCTYPE html>
<html>
<body>
  <p>これは最初の段落です。ブラウザは自動的にこの段落の後に改行と余白を挿入します。</p>
  <p>これは次の段落です。前の段落とは別のブロックとして表示されます。</p>
  <p>これは3つ目の段落です。それぞれの段落が独立して表示されます。</p>
</body>
</html>

上記のコードでは、3つのpタグを使用してそれぞれの段落を定義しています。ブラウザは各pタグの前後に自動的に余白を挿入するため、視覚的に段落が区切られて表示され、brタグを複数使用する必要がありません。レスポンシブ対応では、画面幅に応じて自動的にテキストが折り返されます。

CSSのwhite-spaceプロパティで改行する

CSSのwhite-spaceプロパティは、テキスト内のスペースや改行をどのように扱うかを指定するプロパティです。HTMLコード内に記述した改行をそのまま反映したり、逆に改行を禁止したりできます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .preserve-newline {
      white-space: pre-wrap;
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="preserve-newline">
このテキストは、
HTMLコード内の改行が
そのまま反映されます。
また、画面幅を超える長いテキストがある場合は自動的に折り返されます。
  </div>
</body>
</html>

上記のコードでは、white-space: pre-wrapを使用してHTMLコード内の改行をそのまま表示しています。pre-wrapは改行を反映しつつ画面幅に応じた自動折り返しも実現するため、brタグの代わりとして非常に便利です。他にもnowrapで改行を禁止したり、preで整形済みテキストとして表示したりできます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

preタグで改行する

preタグはプレフォーマットテキストを表示するHTMLタグで、HTMLコード内の改行やスペースをすべてそのまま保持して表示します。CSSを使わずにHTMLタグだけで整形済みテキストを表現できます。

<!DOCTYPE html>
<html>
<body>
  <pre>
これはプレフォーマットされたテキストです。
    インデントも
        そのまま
            表示されます。

複数の空行も保持されます。
  </pre>
</body>
</html>

上記のコードでは、preタグ内のテキストがHTMLコード内で記述した通りに表示されます。インデントや空行もすべて保持されるため、視覚的な構造をそのまま伝えることができます。

コードスニペットや詩、ASCIIアートなど、特定のフォーマットを維持する必要があるコンテンツに適したbr以外の改行方法です。

リストタグで改行する

リストタグは複数の項目を列挙する際に、各項目を自動的に改行して表示するHTMLタグです。ulタグで順序なしリスト、olタグで順序ありリストを作成でき、brタグを使わずに視覚的に整理された情報を提供できます。

<!DOCTYPE html>
<html>
<body>
  <h3>Webサイト制作に必要なスキル</h3>
  <ul>
    <li>HTMLの基礎知識</li>
    <li>CSSのスタイリング技術</li>
    <li>JavaScriptの基本構文</li>
    <li>レスポンシブデザインの理解</li>
  </ul>
  
  <h3>Webサイト公開の手順</h3>
  <ol>
    <li>HTMLファイルを作成する</li>
    <li>CSSファイルでデザインを整える</li>
    <li>ドメインとサーバーを契約する</li>
    <li>ファイルをサーバーにアップロードする</li>
  </ol>
</body>
</html>

上記のコードでは、ulタグで順序なしリスト、olタグで順序ありリストを作成しています。各liタグは自動的に改行されて表示されるため、brタグを使わずに項目ごとに区切られたリストを作成できます。箇条書きや手順など、情報を構造的に整理したい場合に適した方法です。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。