HTML改行の方法5選!初心者も簡単にマスター

HTML改行の方法を初心者向けに解説するイメージHTML
この記事は約3分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

HTMLでテキストを表示する際、改行が必要になるケースがあります。

しかし、初心者の方にとっては改行の方法が分からないことも多いでしょう。

この記事では、HTMLでの改行方法を5つ紹介し、使い方や対処法、注意点、カスタマイズ方法を徹底解説します。

●HTMLでの改行方法5選

ウェブページにおけるテキスト表示では、時に文章や段落の区切りで改行が欠かせません。

初めてHTMLを扱う方々にとっては、これがどのように実現されるのか疑問に思うこともあるでしょう。

ここでは、HTMLでの改行の方法を五つ紹介し、それぞれの使い分けや注意点を丁寧にご説明します。

  1. <br>タグを使う
  2. <p>タグで段落を分ける
  3. <pre>タグで改行を含むテキストを表示する
  4. CSSで行の高さやマージンを調整する
  5. ソースコード内での改行(開発者向け)

この5つの方法をそれぞれ紹介していきます。

それでは、1つずつ詳しく解説していきます。

●<br>タグを用いた改行

HTMLにおける最も簡単な改行方法は<br>タグの使用です。

このタグは、改行を挿入するための自己完結型のタグで、閉じタグは不要です。

これは一行目のテキストです。<br>ここから二行目です。

上の例では<br>タグによって、テキストが適切に改行され、次の行へと続いています。

ただし、<br>タグは文章の流れを区切るためではなく、単なる改行のために使われる点に注意が必要です。

●<p>タグによる段落の作成

段落を作成してテキストを改行するには、<p>タグが適しています。

このタグは段落を定義し、自動的に前後に改行が加わります。

<p>こちらは第一段落のテキストです。</p>
<p>こちらは第二段落のテキストです。</p>

ここでは、各<p>タグに囲まれたテキストが一つの段落として扱われ、ブラウザによって適切なスペースが挿入されています。

この間隔はCSSで調節することができます。

●<pre>タグでのリテラル改行

フォーマットを保持したテキスト表示には、<pre>タグが用いられます。

コードや詩など、書式を維持する必要があるテキストに最適です。

<pre>
こちらは
空白も含めて
そのまま表示される
テキスト例です。
</pre>

上記の例のように、<pre>タグ内のテキストは改行と空白を保持して表示されます。

●CSSを活用した改行のスタイリング

CSSを用いて、行間や段落間のスペースをカスタマイズすることも可能です。

行間やマージンの調整は、ウェブページの読みやすさを向上させるのに役立ちます。

<style>
p {
  line-height: 1.5;
  margin-bottom: 20px;
}
</style>

上記のスタイルを適用することで、行の高さや段落間のマージンを設定できます。

●ソースコード内での改行の扱い

HTMLエンティティを使用して、ソースコード内で見やすい改行を実現する方法もあります。

特にソースを表示する際に役立ちます。

&lt;p&gt;こちらは改行された&lt;br&gt;テキスト例です。&lt;/p&gt;

上記の方法を使うことで、コード内で改行を視覚的に表現できます。

まとめ

この記事では、HTMLでの改行方法を5つ紹介しました。

それぞれの方法には適切な使い方や注意点がありますので、目的に合わせて選択しましょう。