p
要素とは
p
要素は、<p>
〜 </p>
で挟んだ範囲が、段落であることを表す要素です。Webサイト上のほとんどの概要文や説明文は、このp
要素を使います。
<p>俺が、伝説のWebクリエーターになる男だ。</p>
RERUN
- 意味・役割
- 段落を表す要素。
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
- (HTML5より前:ブロックレベル要素)
- コンテンツ・モデル(梱包できる要素)
-
フレージング・コンテンツ
(HTML5より前:インライン要素) - この要素を配置できる親要素
- フロー・コンテンツが配置できる要素
p
要素で使える属性
p
要素には、どの要素にでも使えるグローバル属性が使えます。
なお、HTML5より前のバージョンにおいては、以下の属性も使えました。
align属性 XHTML 1.1で廃止
要素内の行揃えを指定する属性。
この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align
プロパティで行うようにしましょう。
- 属性値
-
- "left": 左揃え(初期値)
- "center": 中央揃え
- "right": 右揃え
- "justify": 両端揃え(複数行の英文に有効)
- 利用できるバージョン(HTML4.01以降) HTML4.01で非推奨
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<p align="center">中央揃え</p>
<p align="right">右揃え</p>
<p align="justify">両端揃え:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
RERUN
p
要素のデフォルトスタイル
一般的なブラウザでp
要素を表示した場合、p
要素の
上下に1文字文のスペース(間隔)
が確保されます。
具体的には、下記のCSSと同等のスタイルが適用されます。
p
要素のデフォルトスタイルp {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
p
要素のサンプル
説明文や概要文などは、このp
要素でマークアップします。
p
要素の例<p>
まず、はじめてお伝えしておくと、これは1つ目の段落です。・・・
</p>
<p>
次にお伝えしたいことは、これが2つ目の段落ということです。・・・
</p>
RERUN
なお、p
要素よりふさわしい要素がある場合はそちらを使いましょう。
仕様
- HTML5.1
- 4.4.1. The p element
- HTML5
- 4.4.1 The p element
- HTML4.01
- 9.3.1 Paragraphs: the P element
関連する要素
<br>
要素