HTML <p> タグ

定義と用法

<p> タグで段落を定義します。

ブラウザは自動的に各 <p> 要素の前後には一つの空行を追加します。

ヒント：CSSを使用してください 段落のスタイルを設定する。

も参照してください：

HTML 教程：HTML 段落

HTML DOM 参考マニュアル：Paragraph オブジェクト

例

例 1

このように段落をマークします：

<p>これは段落の中の一部のテキストです。</p>

自分で試してみる

例 2

段落の中のテキストをアライメントします（CSSを使用）：

<p style="text-align:right">これは段落の中の一部のテキストです。</p>

自分で試してみる

例 3

使用 CSS で段落のスタイルを設定します：

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>
<p>中国、公式名人民共和國中国（PRC）は、東アジアに位置する国です。人口は14億を超える世界で2番目に人口が多い国です。中国は5つの時帯にわたって広がり、陸地で14カ国と国境を接しています。面積は約960万平方キロメートル（370万平方マイル）で、総面積では世界で3番目に大きな国です。この国は22の省、5の自治区、4の市、および2の準自治特別行政区に分かれています。北京は首都で、上海は人口が最も多い都市で最大の金融中心です。</p>
</body>
</html>

自分で試してみる

例 4

多くの段落：

<p>
ソースコードでは
この段落
多くの行を含んでいます
しかし、ブラウザ
それを無視します。
</p>

自分で試してみる

例 5

HTMLでの詩の問題：

<p>
　　朝、白帝城の彩雲間に別れ
　　千里の江陵は一日で還る
　　两岸の猿の声が止まらない
　　軽舟は万重山を越えて
</p>

自分で試してみる

グローバル属性

<p> タグは以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<p> タグは以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <p> 要素：

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート