このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

p”要素:段落

記事Apr. 8th,2015
July 7th,2020
段落を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

p”要素は段落を表す要素です。

一般的なブラウザでは段落の前後を改行して1行分程度の余白を入れて表示します。

サンプルコード

<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。
</p>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
<p>
バナナにはビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>

バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナにはビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

HTMLの“段落”

“段落”は一般的には特定のテーマについて書かれた複数の文の集まりですが、HTMLでの“段落”はこのような意味上の概念というよりも構造上の概念なのでもっと雑多なテーマ分けにも“段落”を使用することができます。いくらかのフレージング・コンテンツの集まりは“段落”であり、住所やフォームの一部、記事の署名、詩節も“段落”となります。

p”要素は明示的に段落を表す要素ではありますが、必ずしもすべての“段落”が“p”要素でマークアップされるわけではなく、他に適切な要素があればその要素でマークアップする必要があります。

例えば、“p”要素の中にul”要素を配置することはできないので、リストを含む意味上の段落はそのまま“p”要素に含むことはできません。

間違ったマークアップ
<p>
昨日お店で見かけた
<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
はすべて南国で作られる果物だ。
</p>

正しくマークアップするには“p”要素をul”要素の前後に分割しますが、これは間違ったマークアップではありません。

<p>
昨日お店で見かけた
</p>
<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
<p>
はすべて南国で作られる果物だ。
</p>

昨日お店で見かけた

  • バナナ
  • マンゴスチン
  • ドリアン
  • バンレイシ

はすべて南国で作られる果物だ。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
過去に定義されていた属性
属性
属性 説明 説明
align=""注意 内容の水平方向の位置 left 左寄せ
center 中央揃え
right 右寄せ
justify 両端揃え

仕様書

p”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<p>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLParagraphElement : HTMLElement {
[HTMLConstructor] constructor();

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
unicode-bidi: isolate;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
p {
unicode-bidi: bidi-override;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク