★HTML Living Standard リファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

<p> …… 段落を表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<p>タグは、段落を表す際に使用します。

■使用例

以下のサンプルは、p要素のシンプルな使用例です。

HTMLソース

<p>
池のほとりにかえるが住んでいました。
かえるは自分の名前があまり好きではありませんでした。<br>
<i>「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」</i><br>
かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。<br>
<i>「そうだ、神様にお願いして新しい名前をつけてもらおう。
神様ならきっと素敵な名前をつけてくださるはずだよ。」</i><br>
そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>

↓↓↓

ブラウザ上の表示

池のほとりにかえるが住んでいました。
かえるは自分の名前があまり好きではありませんでした。
「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」
かえるはまいにちそう考えて暮らしていました。

ある朝かえるは思いました。
「そうだ、神様にお願いして新しい名前をつけてもらおう。
神様ならきっと素敵な名前をつけてくださるはずだよ。」

そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。

</p> の省略について

p要素の終了タグ </p> は省略可能と理解している人がいるかもしれません。
その理解でおおむね誤りではありませんが、
厳密に定義するなら </p> は以下のいずれかの条件を満たす場合に省略可能です。

■使用例

以下のサンプルは、p要素を使用してフォームの入力項目を区切っています。
フォームの入力項目を区切る目的には、br要素で改行させるよりもp要素で段落を分けるほうが適切です。

HTMLソース

<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要素でマークアップしても技術的には誤りではありませんが…

HTMLソース(技術的には誤りではありませんが…)

<section>
 <p>最終更新日: 2001-04-23</p>

</section>

例えば、以下のようにマークアップした方がより適切でしょう。

HTMLソース(適切なマークアップ1)

<section>
 <footer>最終更新日: 2001-04-23</footer>

</section>

あるいは、以下のようにマークアップしても良いでしょう。

HTMLソース(適切なマークアップ2)

<section>
 <footer>
  <p>最終更新日: 2001-04-23</p>
  <address>作成者: </address>
 </footer>
</section>

リスト要素とp要素

ol要素ul要素などのリスト要素は、
p要素の子にすることはできません。
文の途中に箇条書きが含まれている場合、箇条書きの前に終了タグ </p> を記述してp要素を閉じ、
箇条書きの後に開始タグ <p> を記述して新しいp要素にすると良いでしょう。

■使用例

ol要素ul要素などのリスト要素は、p要素の子になることはできません。
以下のサンプルでは、ul要素の前後でp要素が区切られている点に注意してください。

HTMLソース

<p>私が特に好きなのは</p>
<ul>
 <li>はまち
 <li>サーモン
 <li>えび
</ul>
<p>ですが、もちろん他も食べます。</p>

↓↓↓

ブラウザ上の表示

私が特に好きなのは

  • はまち
  • サーモン
  • えび

ですが、もちろん他も食べます。

尚、ol要素ul要素などのリスト要素は、
div要素の子にすることができます。
リスト要素の前後でp要素を分割してしまうと、CSSによるスタイリングがしにくくなることがあります。
そのような場合には、p要素の代わりにdiv要素で全体を囲んでしまうのも一案でしょう。

p要素のブラウザ上の表示

p要素は、一般的なブラウザ(ユーザーエージェント)では、前後を空白行で区切ったブロックとして表示されます。
ただし、スタイルシートの指定方法やユーザーエージェントによっては、
異なる方法で段落の区切りが表現される可能性があります。

例えば、段落の始めか終りにパラグラフマーク( ¶ )をつけて、
段落の区切りを表すユーザーエージェントがあるかもしれません。

■関連項目

  • <p> …… 段落を表す
  • <div> …… 特別な意味を付加せず子要素をまとめる
  • <span> …… 特別な意味を付加せず範囲指定する
  • <br> …… 改行を表す
  • <wbr> …… 改行箇所の候補を表す
  • <hr> …… 段落レベルのテーマ区切りを表す
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
  • <article> …… 自己完結する内容であることを表す
  • <section> …… 一般的なセクションを表す
  • <nav> …… ナビゲーションリンクのセクションを表す
  • <aside> …… メインコンテンツとは別のコンテンツであることを表す
広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
50 users signed up
もっと表示する