◀ 2.

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

▶
編集
この記事の要点

  • は段落 (paragraph) を表すブロックレベル要素

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

p 要素とは

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

これは一つ目の段落です。文章を自由に書けます。


これは二つ目の段落です。強調や リンク も入ります。

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

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

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

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

の中にはインライン (phrasing content) のみ配置可能です。ブロック要素を入れるとブラウザが自動で

を補完して閉じてしまい、レイアウトが崩れます。

OK (インライン)NG (ブロック)


〜

 


段落の中に
  
ブロック要素

を入れた




段落の中に


ブロック要素


を入れた




段落の中に インライン を入れる

改行は
で

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




  〒100-0001

  東京都千代田区千代田1-1

  皇居内






  一段落目です。


  二段落目です。





一段落目です。


二段落目です。

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 への影響

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

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

場面推奨要素
住所・連絡先
長い引用
図のキャプション
項目箇条書き
    /
      /
コード片
 +
注釈・補足

現代的なタイポグラフィ

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

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

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

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

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

FAQ

Q: 空の

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

Q: 段落の中にもう一つ段落を入れたい
A: できません。HTML 仕様で禁止されています。リスト (