Pタグとは～段落を使ってHTMLをわかりやすくする3つのコツ
PタグでHTMLマークアップし、段落を使った見やすいページにしながら、サイト構築する方法があります。
今回は、WordpressのPタグ、Pタグの行間、Pタグと改行について中心に解説したいと思います。
Pタグとは
Pタグとは、Paragraphの略で、「段落」を意味するHTMLタグのことです。
Pタグは、＜p＞～＜/p＞でマークアップすることで、段落を作ることができます。
記述例：
|
1 |
<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でのマークアップ例：
|
1 2 3 4 |
<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などの単位指定もできます。
記述例：
|
1 2 3 |
p { line-height:160%; } |
Pタグのマージン（余白）
「margin」プロパティを使い、左右上下の余白が調整できます。
記述例：
|
1 2 3 |
p { margin:10px 0 10px;/*上 左右 下*/ } |
また、デフォルトでPタグに上下左右などマージン（余白）が入ってる場合、以下のよう「margin:0;」を指定することで回避できます。
記述例：
|
1 2 3 4 5 6 |
p { margin-left:0;/*左*/ margin-top:0;/*上*/ margin-right:0;/*右*/ margin-bottom:0;/*下*/ } |
Pタグの色
「color」プロパティで、「#333」などの黒系フォントカラー指定が一般的です。
記述例：
|
1 2 3 |
p { color:#333; } |
Pタグの中央寄せ
「text-align」プロパティの値である「center」を指定することで中央寄せができます。
記述例：
|
1 2 3 |
p { text-align:center; } |
Pタグの入れ子について
「＜li＞タグの中に＜p＞タグ」「＜p＞タグの中に＜p＞タグ」といったPタグの入れ子について、以下解説します。
※参考：【HTML】 もう悩まない！タグの入れ子ルールまとめ
＜li＞タグの中に＜p＞タグ
以下のよう、liタグの中にpタグやdivタグなどのブロックレベル要素を入れたりすることが可能です。
記述例：
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>SEO <p>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p> </li> <li>●●●●●●● <p>○○○○○○○○○○○○○○○○○○○○○○</p> <p>○○○○○○○○○○○○○○○○○○</p> </li> </ul> |
＜p＞タグの中に＜p＞タグ
以下のよう、pタグの中にpタグは入れることができません。
pタグの中に入れていいのは、「aタグ」「imgタグ」「spanタグ」「strongタグ」「emタグ」といったインライン要素のみです。
記述例：
|
1 |
<p>ホームページの順位を上げるために<strong>SEO対策が必要</strong>です。</p> |
HTML5でのPタグの使い方
HTML4.01からHTML5へのバージョンアップにより、Pタグの使い方として、以下のようなポイントを抑えましょう。
※参考：＜p＞－HTML5タグリファレンス
- align属性が廃止 HTML5では、p要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用する
- 追加された新しい要素を使う Pタグの段落よりも適切な場合は、＜article＞＜aside＞＜nav＞＜section＞ などの新しい要素を活用する
まとめ
Pタグで適切にマークアップし、ユーザービリティを高めましょう。
見やすく・認識しやすいコンテンツにし、サイト価値を高めながら、SEO対策で順位上昇を目指すことが重要です。
