タイトル: p要素
SEOタイトル: HTML p 要素 (段落) 完全ガイド
| この記事の要点 |
|
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> でつなぐのは避けましょう。
<!-- 詩・住所など、改行が意味を持つ場面 -->
<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: 空の でスペースを開けてもよい?
A: 非推奨です。意味の無い段落になり、スクリーンリーダーが「空段落」と読み上げる場合があります。CSS の margin で間隔を調整してください。
Q: 段落の中にもう一つ段落を入れたい
A: できません。HTML 仕様で禁止されています。リスト (<ul>) や <div> でグループ化してください。
Q: 終了タグ
は省略可能?A: HTML5 では一定条件下で省略可能ですが、可読性のために常に書くのが推奨です。