p要素

HTMLでは、段落を示すことができます。

本ページでは、p要素について説明します。

p要素とは

pは、段落を示す要素です。p要素のコンテンツとして、テキストなどを記述することで段落になります。ブロックボックスで表示されるため、次の要素は改行して表示されます。

pの定義は、以下のとおりです。

終了タグを省略できる条件は、以下です。

次の要素が、address、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table、ulの場合
親要素内で次の要素がなく、親要素がa、audio、del、ins、map、noscript、video、自律カスタム要素でない場合

以下は、pを使ったHTMLの例です。

【pの利用例】

<p>これは、段落を示します。段落は、文書を記述して1つの段落の中では改行しません。次の要素が別のp要素のため、終了タグは省略可能です。</p>
<p>これは、次の段落を示します。次の段落は、改行して表示されます。複数の段落によって、記事が構成されます。</p>

これをブラウザで表示すると、以下になります。

CSSを以下のように記述したとします。

【cssの記述例】

p {
  line-height: 180%;
  text-indent: 1em;
}

line-heightは、行の高さを指定します。180%にすると、行間が広がります。また、text-indentは行頭のインデント(字下げ)を指定します。1emと指定しているため、1文字分の字下げが行われます。

上記により、以下のように表示されます。

行間が少し広がり、字下げも行われています。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
p	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
p	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。