HTMLで段落を作るpタグの使い方｜改行との違い・CSS調整を初心者向けに解説

HTMLで文章を書いたものの、改行や段落の分け方が合っているのか迷うことがありますよね。空白を作るためにbrタグを何個も入れたり、文章全体を1つのタグで囲んだりすると、あとから読みづらくなってしまいます。

HTMLで段落を作るときは、pタグ（p要素）を使います。pは「paragraph（段落）」の略で、文章を意味のまとまりごとに分けるための要素です。

この記事では、pタグの基本からbrタグとの違い、段落間の余白や行間をCSSで整える方法、よくある間違いまで、実際の表示画像を見ながら進めます。

HTMLの段落はpタグで作る
pタグは文章を意味のまとまりに分ける
pタグとbrタグの違い
段落の余白ができる理由
CSSで段落を読みやすく整える
1. line-heightで行間を調整する
2. 段落の先頭を1文字下げる
実際の記事ページでpタグを使う例
pタグでよくある間違いと対処方法
WordPressで段落を作る方法
HTMLの段落でよくある疑問
HTMLの基本文法も確認しよう
まとめ

HTMLの段落はpタグで作る

まずは結論から試してみましょう。次の表示では、導入文と2つの本文を、それぞれ別のpタグで囲んでいます。

index.htmlを開き、bodyタグの中へ次のコードを記述してください。開始タグのから終了タグのまでが、1つの段落です。

<h1>HTMLで段落を作る</h1>

<p class="lead">
  pタグを使うと、文章を意味のまとまりごとに分けられます。
</p>

<p>
  最初の段落です。この段落では、p要素の基本的な役割を説明しています。
</p>

<p>
  次の段落です。段落を分けると、文章の話題が切り替わったことを読み手へ伝えやすくなります。
</p>

HTMLファイル内で読みやすくするために空行を入れても、通常のブラウザ表示では空行がそのまま増えるわけではありません。表示上の段落は、p要素で意味を付けて分けます。

pタグは文章を意味のまとまりに分ける

WHATWGのHTML Standardでは、p要素は段落を表すものと定義されています。見た目に1行空いているかどうかだけではなく、「ここからここまでが1つの話題」という文章の構造を示す役割があります。

次の図では、2つのp要素を青い枠で示しています。それぞれが別の箱となり、その間に余白があることを確認してください。

同じ話題が続く文章は、1つのp要素へまとめます。
話題や主張が切り替わるところで、新しいp要素に分けます。
見出しは段落ではないため、h1〜h6要素を使います。

p要素の中には、文字、リンク、strongによる強調など、文章の一部として使う要素を入れられます。一方、divや見出し、別のp要素を入れ子にはできません。

pタグとbrタグの違い

pとbrは、どちらも文章の途中で見た目が変わるため混同しやすいタグです。使い分けは、「新しい段落か」「同じ段落内での改行か」で判断します。

左側のお知らせは、内容が異なる2つの段落なのでpを2回使います。右側の営業時間は1つのまとまりの中で項目を改行したいため、brが適しています。

<!-- 内容が変わるため、段落を2つに分ける -->
<p>営業時間のお知らせです。</p>
<p>今月から土曜日も営業します。</p>

<!-- 1つの段落内で項目を改行する -->
<p>
  営業時間<br>
  平日 9:00〜18:00<br>
  土曜 10:00〜17:00
</p>

brを何個も重ねて段落間の余白を作るのは避けましょう。余白は文章の意味ではなく見た目の調整なので、CSSのmarginを使います。

段落の余白ができる理由

pタグを2つ続けると、多くのブラウザでは段落の間に余白が表示されます。これは、ブラウザが最初から持っているユーザーエージェントスタイルシートに、p要素の上下マージンが設定されているためです。

ただし、具体的な余白の値はブラウザやサイトのCSSによって変わります。デザインに合わせたい場合は、style.cssで値を明示します。

p {
  margin: 0 0 1.5em;
}

p:last-child {
  margin-bottom: 0;
}

margin: 0 0 1.5em;は、上・左右の余白を0、下の余白を文字サイズの1.5倍にします。:last-childは、親要素の最後にある段落だけ下余白を取り除く指定です。

CSSで段落を読みやすく整える

段落のHTMLが正しくても、1行が長すぎたり行間が狭すぎたりすると読みにくくなります。文章の見た目は、CSSのmax-width、line-height、marginを中心に調整しましょう。

line-heightで行間を調整する

次の比較では、左をline-height: 1.25;、右をline-height: 1.8;にしています。文章量やフォントにもよりますが、本文では少し余裕のある行間のほうが読みやすくなることが多いです。

style.cssの末尾へ、次のように追加します。単位を付けない数値にすると、段落内で文字サイズが変わっても、その文字サイズに合わせて行間が計算されます。

p {
  max-width: 42em;
  margin: 0 0 1.5em;
  line-height: 1.8;
}

max-width: 42em;：1行が横へ長くなりすぎないようにします。
margin-bottom: 1.5em;：次の段落との間隔を作ります。
line-height: 1.8;：文字サイズの1.8倍を目安に行の高さを設定します。

段落の先頭を1文字下げる

書籍のように段落の先頭を1文字分下げたい場合は、全角スペースを直接入力するのではなく、text-indentを使えます。

.article-text p {
  text-indent: 1em;
}

1emは、その要素の文字サイズ1個分です。ただし、Web記事では段落間の余白だけで区切るデザインも多いため、サイト全体の方針に合わせて使ってください。

letter-spacingで文字間隔も変えられますが、本文へ大きな値を指定すると、かえって読みにくくなります。まずは標準の間隔を使い、必要な場合だけ小さく調整すると安全です。

実際の記事ページでpタグを使う例

段落は、説明文、お知らせ、商品紹介、ブログ記事など、ほとんどのWebページで使います。次は、記事の導入、補足、重要ポイントを3つのp要素に分けた実用例です。

index.htmlのbodyタグ内へ、次のHTMLを記述します。重要なまとめだけnoteクラスを付け、CSSで見た目を変えられるようにしています。

<article class="article-card">
  <header class="article-header">
    <p class="category">HTML/CSS 入門</p>
    <h1>読みやすい文章の作り方</h1>
  </header>

  <div class="article-body">
    <p>
      Webページでは、話題ごとに段落を分けると内容を追いやすくなります。
      1つの段落へ多くの話題を詰め込まないことがポイントです。
    </p>

    <p>
      見た目の余白は、空のpタグやbrタグを重ねるのではなく、
      CSSのmarginで調整します。
    </p>

    <p class="note">
      HTMLで文章の意味を示し、CSSで読みやすい見た目に整えましょう。
    </p>
  </div>
</article>

続いて、style.cssの末尾へ次のCSSを追加します。

.article-card {
  max-width: 720px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

.article-header {
  padding: 30px 42px;
  color: #fff;
  background: #1d4ed8;
}

.category {
  margin: 0 0 10px;
  color: #bfdbfe;
  font-weight: 700;
}

.article-header h1 {
  margin: 0;
}

.article-body {
  padding: 34px 42px 42px;
}

.article-body p {
  margin: 0 0 1.5em;
  line-height: 1.85;
}

.article-body .note {
  margin-bottom: 0;
  padding: 18px 20px;
  border-left: 5px solid #f59e0b;
  background: #fffbeb;
}

同じp要素でも、クラスを付ければ重要な段落だけ装飾できます。段落としての意味は保ったまま、CSSで役割に合う見た目へ調整している点がポイントです。

pタグでよくある間違いと対処方法

pタグの中へdivや見出しを入れている

p要素の中へ入れられるのは、基本的に文章中で使う要素です。div、見出し、箇条書き、別のp要素を入れると、ブラウザがpを自動的に閉じ、想定外の構造になることがあります。

<!-- 間違い：pの中へdivを入れている -->
<p>
  商品について説明します。
  <div class="product">商品情報</div>
</p>

<!-- 正しい：段落とdivを分ける -->
<p>商品について説明します。</p>
<div class="product">商品情報</div>

空のpタグやbrタグで余白を増やしている

 や連続したbrで余白を作ると、文章構造が不自然になります。画面幅や文字サイズが変わったときも間隔を管理しにくいため、marginやpaddingを使ってください。

HTMLファイルで改行したのに表示が変わらない

通常のHTMLでは、コード内の連続する半角スペースや改行は、画面上で1つの空白として扱われます。新しい段落なら別のp要素、同じ段落内で必要な改行ならbrを使い分けましょう。

すべての文章を1つのpタグへ入れている

1つの段落が長すぎると、スマートフォンでは画面が文字で埋まり、内容を追いにくくなります。話題や主張が切り替わるところで段落を分け、1段落を1〜3文程度から調整すると読みやすくなります。

WordPressで段落を作る方法

WordPressのブロックエディターでは、通常の文章を入力すると「段落」ブロックが作られ、公開時にはp要素として出力されます。ビジュアル編集で本文を書くときに、毎回を直接入力する必要はありません。

HTMLコード自体を例として表示したい場合は、コード用のブロックを使います。文章の途中でEnterキーを押すと新しい段落、Shift＋Enterを押すと同じ段落内の改行になる点も覚えておくと便利です。

HTMLの段落でよくある疑問

pタグはブロック要素ですか？

一般的なブラウザの初期スタイルでは、p要素はブロックとして表示されます。ただし、「ブロック要素」という呼び方だけで内容のルールが決まるわけではありません。p要素には文章中で使う内容を入れる、と役割で覚えるほうが正確です。

pタグの終了タグは省略できますか？

HTMLの仕様上、後ろに続く要素によってはを省略できる場合があります。ただし、初心者が手書きするときは開始タグと終了タグをセットで記述したほうが、構造を確認しやすく間違いを防げます。

段落の途中で文字を太くしてもよいですか？

問題ありません。重要な語句にはstrong、補足的な範囲にはspan、リンクにはaなど、文章の一部として使える要素をpの中へ入れられます。

HTMLの基本文法も確認しよう

pタグを書けるようになったら、開始タグと終了タグ、属性、要素の入れ子も確認しておくと、エラーを減らせます。基本文法は次の記事で実例を使って解説しています。

HTMLの基本文法を初心者向けに解説｜タグ・属性・入れ子と基本構造

この記事の要素ルールは、WHATWG HTML Standardのp要素も参照しています。

まとめ

HTMLで段落を作るときは、文章をとで囲みます。別の話題へ移るときは新しいp要素に分け、同じ段落内で必要な改行だけbrを使ってください。

段落間の余白や行間は、空のタグではなくCSSのmarginとline-heightで調整します。まずは基本コードをindex.htmlへ書き、ブラウザで段落のまとまりと間隔を確認してみましょう。