HOME内部対策 > Pタグとは~段落を使ってHTMLをわかりやすくする3つのコツ

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

2017/03/28内部対策[最終更新日]:2017/03/29
このエントリーをはてなブックマークに追加

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

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

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR

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>

<p>タグの中に<p>タグ

以下のよう、pタグの中にpタグは入れることができません。
pタグの中に入れていいのは、「aタグ」「imgタグ」「spanタグ」「strongタグ」「emタグ」といったインライン要素のみです。

記述例:
<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対策で順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly