<p>

段落

HTML 1.0 ~ 利用可能

最終更新日: 2020.11.02

どんなタグ?
Webページ上の多くの文章は、
この<p>タグを使う。

サンプル
<body>
  <p>これが段落だ</p>
</body>

pタグはparagraph (パラグラフ) の略で、 <p></p> タグで挟んだ範囲が、段落 であることを表すタグです。Webサイト上のほとんどの概要文や説明文は、この <p> タグで挟みます。

どのカテゴリに属しているの?
pタグは フロー・コンテンツというコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
pタグに梱包できる要素コンテンツ・モデルは、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

しばひろめちゃくちゃよく使うタグです。

どうやって使うの?
段落として表したい文章を、
<p>タグで挟むだけ。

pタグは段落として表したい説明文や概要文を <p></p> で挟むだけです。

使い方
<p>段落にする文章</p>
サンプル
<body>
  <p>これ私は当時のらくらその運動院というののうちで臥せっします。</p>

  <p>まあ前へ約束者はひょろひょろその意味ましざるばかりをできるていですがはお話し被せるたあるから、まだには考えないましないた。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/p/sample01/
どこでも使えるの?
pタグは フロー・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
一般的なブラウザでpタグを表示した場合、pタグの 上下に1文字文のスペース(間隔) が確保されますが、スペースを空ける目的で利用するのやめましょう。

しばひろ挟むだけで使えるのでシンプルですね。

使える属性は?
HTML5では、グローバル属性しか
使わない。

<p> タグには、どの要素にでも使えるグローバル属性が使えます。
ただし、HTML4.01までは以下の属性も使えました。

align(アライン) 属性 HTML4.01 非推奨 HTML5 廃止

文字の行揃えを指定する属性です。
HTML4.01で非推奨、HTML5で廃止となりました。

属性値
left 初期値
左揃え
center
中央揃え
right
右揃え
justify
両端揃え

しばひろ今は、グローバル属性しか使いません。

サンプルが見たい
<p>タグを使ったサンプルを
いくつか紹介。

<p>タグを使ったサンプルを紹介します。

基本的な<p>タグのサンプル

サンプル
<body>
  <p>これ私は当時のらくらその運動院というののうちで臥せっします。</p>

  <p>まあ前へ約束者はひょろひょろその意味ましざるばかりをできるていですがはお話し被せるたあるから、まだには考えないましないた。</p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/p/sample01/

しばひろどれもシンプルなサンプルですね。

デフォルトスタイルは?
上下に1文字分のスペースが
空くようになっている。

一般的なブラウザでp要素を表示した場合、p要素の上下に1文字文のスペース(間隔)が確保されます。 具体的には、下記のCSSと同等のスタイルが適用されます。

p要素のデフォルトスタイル
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

しばひろスペースの調整はCSSでやりましょう。

対応ブラウザは?
基本的にどのブラウザでも
大丈夫。

<p>タグは HTML1以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar (6以降のみ) 2 ~
Edge
Edge 1 ~
Google Chrome
Google Chrome 1 ~
Firefox
Firefox 1 ~
Safari
Safari 1 ~
Opera
Opera 6 ~

しばひろどのブラウザでも問題ありません。

このリファレンスを書いた人

しばひろ

しばひろ

どうも。 コンテンツマーケティングからデザイン、コーティングまで、 だいたいなんでもやってます。 主にフロントエンド周りが専門です。 あと専門学校やスクール、訓練などで講師もやってます。 ちなみに、CreatorQuestという無料のWeb制作スキル学習サイトの中の人です。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて