• brタグを使う
• pタグを使う
• preタグを使う
• CSSのwhite-spaceを使う
• CSSのdisplayプロパティを使う

brタグを使う

HTMLで最も基本的な改行方法は<br>タグを使うことです。 例えば、以下のように記述すると改行されます：

        これは1行目です。<br>
        これは2行目です。
    

上記のコードは次のように表示されます：

これは1行目です。
これは2行目です。

ただし、<br>はインライン要素の途中で改行を入れるために使うものであり、 段落を分ける用途には適していません。

pタグを使う

<p>タグを使うと、段落ごとに自動的に改行され、適切な間隔が挿入されます。 例えば：

        <p>これは最初の段落です。</p>
        <p>これは2つ目の段落です。</p>
    

上記のコードは次のように表示されます：

これは最初の段落です。

これは2つ目の段落です。

preタグを使う

<pre>タグを使うと、改行やスペースをそのまま表示できます。 例えば：

        <pre>
        これは      スペースが維持されるテキスト
        ここで改行
        さらに改行
        </pre>
    

上記のコードは次のように表示されます：

これは      スペースが維持されるテキスト
ここで改行
さらに改行
    

<pre>タグはソースコードの表示などに便利ですが、 スタイリングの調整が難しい場合もあるため注意が必要です。

CSSのwhite-spaceを使う

CSSのwhite-spaceプロパティを使うと、HTML内の改行を適切に処理できます。 例えば、以下のCSSを適用すると、改行がそのまま反映されます：

        <div style="white-space: pre-line;">
        これは1行目です。
        これは2行目です。
        </div>
    

上記のコードは次のように表示されます：

white-spaceプロパティには以下の値があります：

• normal：デフォルトの動作（複数の空白や改行は無視）
• pre：空白や改行をそのまま保持
• pre-line：複数の空白は無視するが改行は保持
• pre-wrap：空白や改行を保持し、幅を超えると折り返す

CSSのdisplayプロパティを使う

CSSのdisplayプロパティを調整することで改行をコントロールできます。 例えば：

        <span style="display: block;">これは1行目です。</span>
        <span style="display: block;">これは2行目です。</span>
    

上記のコードは次のように表示されます：

これは1行目です。 これは2行目です。

display: block;を指定すると、<span>のような インライン要素でもブロック要素として扱われ、強制的に改行されます。