pタグとは？

pタグの意味は「Paragraph（パラグラフ）」の略で、日本語では「段落」の意味になります。
p要素は文章の段落を表します。
段落とは文章内でひとかたまりになっている文章のことで、通常は複数の文によって構成されています。

【使用例:<p>~</p>で指定することで段落を作ることができます。】

<p>鈴懸の木の道で「君の微笑みを夢に見る」と
言ってしまったら僕たちの関係はどう変わってしまうのか、
僕なりに何日か考えた上でのやや気恥ずかしい結論のようなもの</p>

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

pタグとbrタグの違いについて

pタグと改行（brタグ）は、意味や仕様が異なります。
brとは「Break」の略で、日本語では「改行」の意味になります。
pタグは、段落を作るときに使用し、brタグで文章を改行するときに使います

【例1:HTML】

<p>鈴懸の木の道で「君の微笑みを夢に見る」と言ってしまったら
<br />僕たちの関係はどう変わってしまうのか、<br />
僕なりに何日か考えた上でのやや気恥ずかしい結論のようなもの</p>
<p>思い立ったが吉日、ならばその日以降は全て凶日。
今やるべきことは今やることが大切である。</p>

【例1:表示例】

鈴懸の木の道で「君の微笑みを夢に見る」と言ってしまったら

僕たちの関係はどう変わってしまうのか、
僕なりに何日か考えた上でのやや気恥ずかしい結論のようなもの


思い立ったが吉日、ならばその日以降は全て凶日。
今やるべきことは今やることが大切である。

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

応用編:pタグに蛍光マーカーを入れたい時

pタグで指定した際に、重要な文言にマーカーを引きたいなーなど思った時に使用できます。
簡単に蛍光マーカー風に引けるので便利です。

【例2:HTML】

<p>鈴懸の木の道で<span class="highlightYellow">「君の微笑みを夢に見る」</span>と言ってしまったら
僕たちの関係はどう変わってしまうのか、<br />僕なりに何日か考えた上でのやや気恥ずかしい結論のようなもの</p>
<p>思い立ったが吉日、ならばその日以降は全て凶日。
<span class="highlightGreen">今やるべきことは今やることが大切である。</span></p>

【例2:CSS】
※蛍光ペンマーカーのCSSは「linear-gradient()属性」(グラデーション)を使います。
数値が高いほど細くなります。

linear-gradient(transparent 線の太さ, 線の色 0%)

.highlightYellow {

     background: linear-gradient(transparent 60%, #ffff66 60%);
}
.highlightGreen {

     background: linear-gradient(transparent 60%, #66FFCC 60%);

}

【例2:表示例】

鈴懸の木の道で「君の微笑みを夢に見る」と言ってしまったら
僕たちの関係はどう変わってしまうのか、僕なりに何日か考えた上でのやや気恥ずかしい結論のようなもの


思い立ったが吉日、ならばその日以降は全て凶日。
今やるべきことは今やることが大切である。

⬆︎上記HTMLのように<span>で挟まれたところにlinear-gradientを指定することで蛍光マーカー風に強調することができます。

最後に

以上が段落の指定方法<p>タグについての説明になります、このようにpタグを使うことで段落ができ長い文章なども読みやすくすることが可能になります。
CSSも入れることでより読みやすくすることもできますので覚えておくと良いでしょう。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
,