Pタグとは～段落を使ってHTMLをわかりやすくする3つのコツ

2018/03/15

PタグでHTMLマークアップし、段落を使った見やすいページにしながら、サイト構築する方法があります。

今回は、WordpressのPタグ、Pタグの行間、Pタグと改行について中心に解説したいと思います。

Pタグとは
WordPressのPタグ
Pタグと改行について
PタグにCSSを適用する
Pタグの入れ子について
1. ＜li＞タグの中に＜p＞タグ
2. ＜p＞タグの中に＜p＞タグ
HTML5でのPタグの使い方
まとめ

Pタグとは

Pタグとは、Paragraphの略で、「段落」を意味するHTMLタグのことです。

Pタグは、＜p＞～＜/p＞でマークアップすることで、段落を作ることができます。

記述例：

＜p＞ホームページの順位を上げるためにSEO対策が必要です。＜/p＞

Pタグは、主にテキスト文章を見やすくするために使われ、行間の調整に有効です。

WordPressのPタグ

サイト構築できるCMSで最も有名なWordpressのPタグについて、以下のようなケースと対処法があるようです。

WordPressで勝手に入る（自動挿入される）Pタグを削除（除去）する方法が、以下サイトで紹介されてます。

・wordpressに自動挿入されるPタグを削除する3つの方法
wordpressには皆さんのご存知の通り、Enterキーで改行すると自動的にpタグを挿入されます。
この自動的にpタグを入れてくれる機能は単純に文章を書くだけなら良いかもしれませんがwordpressにwebデザインを反映させようと思うと邪魔になる時があります。
初心者にとっては便利な機能でも、中級者・上級者ともなると何とかしたいですよね。

WordPressでPタグ・BRタグが消える件について、以下サイトで紹介されてます。

・【絶対解決】記事投稿時にテキストエディタでpタグ、brタグが消える
ワードプレスでブログを書いていると、何かの拍子にpタグやbrタグがwysiwygの投稿画面から消えますよね。。。

Pタグと改行について

Pタグと改行（BRタグ）は、意味や仕様が異なります。

Pタグは、段落を作るときに使用し、BRタグで文章を改行します。

HTMLでのマークアップ例：

＜p＞ホームページの順位を上げるためにSEO対策が必要です。＜/p＞

＜p＞SEO対策とは、GoogleやYahooなどの検索エンジンでより多くサイト表示させるために、＜br /＞ホームページを上位表示させる対策のことです。＜/p＞

ブラウザでの表示例：

ホームページの順位を上げるためにSEO対策が必要です。

SEO対策とは、GoogleやYahooなどの検索エンジンでより多くサイト表示させるために、
ホームページを上位表示させる対策のことです。

上記のよう、基本的に長い文章の中で「物事の切れ目」や「一区切り」ごとに＜p＞タグで段落付けします。
＜br /＞タグをうまく使い、読みやすさなどの文章パフォーマンスをより高めることが可能です。

PタグにCSSを適用する

PタグにCSSを適用するときに、利用頻度が高めなパターンは以下のようになります。

Pタグの行間

「line-height」プロパティを使い、150％か160％の行間指定が一般的となります。
その他、pxやemやexなどの単位指定もできます。

記述例：

p {
line-height:160%;
}

Pタグのマージン（余白）

「margin」プロパティを使い、左右上下の余白が調整できます。

記述例：

p {
margin:10px 0 10px;/*上左右下*/
}

また、デフォルトでPタグに上下左右などマージン（余白）が入ってる場合、以下のよう「margin:0;」を指定することで回避できます。

記述例：

p {
margin-left:0;/*左*/
margin-top:0;/*上*/
margin-right:0;/*右*/
margin-bottom:0;/*下*/
}

Pタグの色

「color」プロパティで、「#333」などの黒系フォントカラー指定が一般的です。

記述例：

p {
color:#333;
}

Pタグの中央寄せ

「text-align」プロパティの値である「center」を指定することで中央寄せができます。

記述例：

p {
text-align:center;
}

Pタグの入れ子について

「＜li＞タグの中に＜p＞タグ」「＜p＞タグの中に＜p＞タグ」といったPタグの入れ子について、以下解説します。
※参考：【HTML】もう悩まない！タグの入れ子ルールまとめ

＜li＞タグの中に＜p＞タグ

以下のよう、liタグの中にpタグやdivタグなどのブロックレベル要素を入れたりすることが可能です。

記述例：

＜ul＞
＜li＞SEO
＜p＞SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。＜/p＞
＜/li＞
＜li＞●●●●●●●
＜p＞○○○○○○○○○○○○○○○○○○○○○○＜/p＞
＜p＞○○○○○○○○○○○○○○○○○○＜/p＞
＜/li＞
＜ul＞