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

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

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

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

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

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

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

表示サンプルです。

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

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

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

表示サンプルです。

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新