◀ 2.

HTML p 要素 (段落) 完全ガイド

▶
編集
この記事の要点
  • <p> は段落 (paragraph) を表すブロックレベル要素
  • デフォルトで上下に margin: 1em 0 が付き、段落間の空きを作る
  • 内側に置けるのは インライン要素のみ (span / a / strong / em 等)。div / ul / table 等のブロック要素は配置不可
  • CSS の text-align / line-height / text-indent でタイポグラフィを制御
  • 住所は <address>、引用は <blockquote> など、意味に応じて他要素も使い分ける

p 要素とは

<p> は HTML で最も基本的な段落 (paragraph) 要素です。文章の論理的なまとまりを表現し、ブラウザはデフォルトで前後に余白 (margin) を入れて視覚的に分離します。

<p>これは一つ目の段落です。文章を自由に書けます。</p>
<p>これは二つ目の段落です。<strong>強調</strong>や <a href="#">リンク</a> も入ります。</p>

ブロックレベル要素である

<p> はブロックレベル要素なので、改行を伴い、親要素の幅いっぱいに広がります。

/* ブラウザのデフォルトスタイル (おおむね) */
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

中に置ける要素・置けない要素

<p> の中にはインライン (phrasing content) のみ配置可能です。ブロック要素を入れるとブラウザが自動で </p> を補完して閉じてしまい、レイアウトが崩れます。

OK (インライン)NG (ブロック)
<span> <a> <strong> <em><div> <p> <ul> <ol>
<img> <br> <code><table> <form> <section>
<time> <mark> <abbr><h1>〜<h6> <pre>
 
<!-- ❌ NG: 自動で </p> が挿入され、div が外に出る -->
<p>段落の中に
  <div>ブロック要素</div>
を入れた</p>

<!-- ブラウザが解釈する結果 -->
<p>段落の中に</p>
<div>ブロック要素</div>
<p>を入れた</p>

<!-- ✅ OK -->
<p>段落の中に <span>インライン</span> を入れる</p>

改行は <br> で

段落内で改行したい場合は <br> を使います。ただし、本来は別段落にすべき内容を <br> でつなぐのは避けましょう。

<!-- 詩・住所など、改行が意味を持つ場面 -->
<p>
  〒100-0001<br>
  東京都千代田区千代田1-1<br>
  皇居内
</p>

<!-- ❌ 単に段落の区切りに br を使うのはダメ -->
<p>
  一段落目です。<br><br>
  二段落目です。
</p>

<!-- ✅ 段落は p で分ける -->
<p>一段落目です。</p>
<p>二段落目です。</p>

CSS でのスタイル制御

段落のタイポグラフィを整えるための主要プロパティ:

p {
  /* 行間 */
  line-height: 1.7;

  /* 段落間スペース */
  margin: 1.2em 0;

  /* 字下げ (日本語の伝統的レイアウト) */
  text-indent: 1em;

  /* 揃え */
  text-align: justify;     /* 両端揃え */
  text-align-last: left;   /* 最終行は左揃え */

  /* 禁則処理 (日本語) */
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;

  /* 文字色・サイズ */
  color: #333;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

/* リード文 (最初の段落) を強調 */
article > p:first-of-type {
  font-size: 1.2em;
  font-weight: 500;
}

white-space プロパティ

HTML 内の改行・連続スペースは通常 1 つの空白に詰められます。これを変えたい場合は white-space を使います:

値挙動用途
normal連続空白を 1 つに、改行を空白に通常の文章
nowrap折り返しなしボタンラベル
pre空白も改行も保持コード表示
pre-wrap空白保持・改行も保持・自動折り返しもあり長いコード
pre-line改行のみ保持・連続空白は詰める掲示板の投稿

SEO への影響

<p> 自体は SEO に直接の影響はありません。しかし、論理的に段落で区切られた文章は Google の自然言語処理によって理解されやすくなり、結果的にランキングに有利に働きます。「全部 div で書く」より「意味に応じて p / h2 / ul を使い分ける」方が、構造化データとして評価されます。

他の意味のある要素との使い分け

場面推奨要素
住所・連絡先<address>
長い引用<blockquote>
図のキャプション<figcaption>
項目箇条書き<ul> / <ol> / <li>
コード片<pre> + <code>
注釈・補足<aside> / <small>

現代的なタイポグラフィ

/* 読みやすい長文記事の典型例 */
article p {
  /* 最大幅 (66 文字程度が読みやすい) */
  max-width: 38em;

  /* 行間広め */
  line-height: 1.8;

  /* CJK 用に段落間広め */
  margin: 1.5em 0;

  /* 日本語 + 英数字の混在で空き調整 */
  text-spacing: auto;

  /* 約物を整える */
  font-feature-settings: "palt";
}

FAQ

Q: 空の <p></p> でスペースを開けてもよい?
A: 非推奨です。意味の無い段落になり、スクリーンリーダーが「空段落」と読み上げる場合があります。CSS の margin で間隔を調整してください。

Q: 段落の中にもう一つ段落を入れたい
A: できません。HTML 仕様で禁止されています。リスト (<ul>) や <div> でグループ化してください。

Q: 終了タグ </p> は省略可能?
A: HTML5 では一定条件下で省略可能ですが、可読性のために常に書くのが推奨です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 07:29:05 guest 224

人気ページ

最近更新/作成されたページ