Close
<p>タグは、段落を表す際に使用します。
以下のサンプルは、p要素のシンプルな使用例です。
<p>
池のほとりにかえるが住んでいました。
かえるは自分の名前があまり好きではありませんでした。<br>
<i>「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」</i><br>
かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。<br>
<i>「そうだ、神様にお願いして新しい名前をつけてもらおう。
神様ならきっと素敵な名前をつけてくださるはずだよ。」</i><br>
そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
池のほとりにかえるが住んでいました。
かえるは自分の名前があまり好きではありませんでした。
「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」
かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。
「そうだ、神様にお願いして新しい名前をつけてもらおう。
神様ならきっと素敵な名前をつけてくださるはずだよ。」
そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
p要素の終了タグ </p> は省略可能と理解している人がいるかもしれません。
その理解でおおむね誤りではありませんが、
厳密に定義するなら </p> は以下のいずれかの条件を満たす場合に省略可能です。
以下のサンプルは、p要素を使用してフォームの入力項目を区切っています。
フォームの入力項目を区切る目的には、br要素で改行させるよりもp要素で段落を分けるほうが適切です。
<fieldset>
<legend>個人情報</legend>
<p>
<label>名前: <input name="n"></label>
<label><input name="anon" type="checkbox"> 他のユーザーには非表示にする</label>
</p>
<p><label>住所: <textarea name="a"></textarea></label></p>
</fieldset>
p要素よりも具体的な要素の方が適切な場合は、そちらを優先して使用してください。
例えば、連絡先を表す際にp要素でマークアップしても技術的には誤りではありませんが、
連絡先はaddress要素でマークアップした方がより適切でしょう。
p要素より具体的な要素の方が適切な場合には、そちらを使用します。
以下のサンプルの場合、p要素でマークアップしても技術的には誤りではありませんが…
<section>
<p>最終更新日: 2001-04-23</p>
</section>例えば、以下のようにマークアップした方がより適切でしょう。
<section>
<footer>最終更新日: 2001-04-23</footer>
</section>あるいは、以下のようにマークアップしても良いでしょう。
<section>
<footer>
<p>最終更新日: 2001-04-23</p>
<address>作成者: </address>
</footer>
</section>
ol要素やul要素などのリスト要素は、
p要素の子にすることはできません。
文の途中に箇条書きが含まれている場合、箇条書きの前に終了タグ </p> を記述してp要素を閉じ、
箇条書きの後に開始タグ <p> を記述して新しいp要素にすると良いでしょう。
ol要素やul要素などのリスト要素は、p要素の子になることはできません。
以下のサンプルでは、ul要素の前後でp要素が区切られている点に注意してください。
<p>私が特に好きなのは</p>
<ul>
<li>はまち
<li>サーモン
<li>えび
</ul>
<p>ですが、もちろん他も食べます。</p>私が特に好きなのは
ですが、もちろん他も食べます。
尚、ol要素やul要素などのリスト要素は、
div要素の子にすることができます。
リスト要素の前後でp要素を分割してしまうと、CSSによるスタイリングがしにくくなることがあります。
そのような場合には、p要素の代わりにdiv要素で全体を囲んでしまうのも一案でしょう。
p要素は、一般的なブラウザ（ユーザーエージェント）では、前後を空白行で区切ったブロックとして表示されます。
ただし、スタイルシートの指定方法やユーザーエージェントによっては、
異なる方法で段落の区切りが表現される可能性があります。
例えば、段落の始めか終りにパラグラフマーク（ ¶ ）をつけて、
段落の区切りを表すユーザーエージェントがあるかもしれません。
どのカジノが自分に最適か分からないですか?