HTML5における<p>タグの使い方

<p>タグは、段落を指定するのに使用する要素で、段落の意味を持つparagraphの略です。今回は、HTML5における<p>タグの使い方をご紹介します。

HTML5における<p>タグの使い方

<p>要素は、段落を指定する際に使用します。

<p>〜</p>

上記の記述で文章中の段落を囲むことで、区切りをつけることができます。ただ文章を入力しただけでは、下の画像のように表示されてしまいます。

スクリーンショット 2016-06-28 16.51.42

そこで、「区切りです。」を境に<p>タグで囲んでみたのが、下のサンプルコードです。

<p>TEXTTEXTTEXTTEXTTEXTTEXT、区切りです。
</p>
<p>TEXTTEXTTEXTTEXTTEXTTEXT。
</p>

表示サンプルです。

スクリーンショット 2016-06-28 16.53.04

<p>タグで区切った部分で段落として表示されています。

また、CSSで段落の横幅などを使用すると、より便利に<p>要素を利用することができます。下のサンプルコードでは、P要素の文字色を赤に、横幅を100pxに指定してみました。

p {
  color: red;
  width: 100px;
}

表示サンプルです。

スクリーンショット 2016-06-28 17.00.23

段落で区切られつつ、色や横幅の設定が追加されるようになりました。


イベント

購読

平日・毎朝更新中