← カテゴリ一覧に戻る

段落

p

p 要素はテキストの段落を表すブロックレベル要素です。前後に自動的にマージンが付き、コンテンツを意味的なブロックに分割します。

デモ：段落の表示

これは最初の段落です。p 要素はブロックレベル要素で、前後に自動的にマージンが付きます。テキストを意味的なまとまりに分割するために使います。

これは2番目の段落です。段落と段落の間には自動的にスペースが入ります。Enterキーで改行しても段落は分かれず、新しい p タグが必要です。

これは3番目の段落です。段落内で改行したい場合は br 要素を使いますが、通常はCSSの margin や padding で間隔を調整します。

コード例

<p>最初の段落のテキストです。</p>

<p>2番目の段落のテキストです。
   HTMLではソース内の改行は無視されます。</p>

<!-- 段落内での強制改行 -->
<p>
  1行目のテキスト<br>
  2行目のテキスト（brで改行）
</p>

比較：p 要素 vs div 要素

観点<p>（セマンティック）<div>（汎用）
意味テキストの段落を表す意味を持たない汎用コンテナ
デフォルトマージン上下にマージンありマージンなし
内包できる要素インライン要素のみ（pやdivは入れられない）何でも入れられる
SEO・アクセシビリティ✅ 段落として認識される❌ 意味なし
使用場面本文テキスト、説明文レイアウト、グループ化

注意：p要素に入れられないもの

p 要素はインラインコンテンツのみ含めることができます。ブロック要素を入れると自動的に閉じられます。

<!-- ❌ 誤り：p の中に div -->
<p>テキスト<div>ブロック要素</div>テキスト</p>

<!-- ✅ 正しい -->
<p>テキスト</p>
<div>ブロック要素</div>
<p>テキスト</p>

TipsCSS text-wrap: balance（Chrome 114+）

見出しや短い段落のテキストの折り返しを均等にする新しいCSSプロパティです。最後の行だけ1〜2語になる"孤立語"を防げます。

p {
  text-wrap: balance; /* テキストを均等に折り返す */
}

p {
  text-wrap: pretty;  /* 孤立語を防ぐ（Chrome 117+）*/
}

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<p>` 要素に `<div>` や `<p>` を入れ子にできない理由を、HTML の仕様の観点から教えてください。
- `<p>` と `<div>` の使い分けを、セマンティクス・SEO・アクセシビリティの観点から教えてください。
- 段落内の改行に `<br>` を多用すべきでない理由と、代わりに CSS で余白を調整する方法を教えてください。
- CSS の `text-wrap: balance` と `text-wrap: pretty` の違いと、どちらをどんな場面で使うべきか教えてください。
- スクリーンリーダーは `<p>` 要素をどのように読み上げますか？段落の区切りはどう伝わりますか？

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo