HTMLのpタグの使い方まとめ

HTMLのpタグについての情報をまとめました。
使い方から解説して、下記の内容について書いています。

pタグの使い方

pタグは、HTMLで段落を表すためのタグです。
<p>と</p>で囲まれた部分が段落として扱われます。

文章を構造化し、見やすくすることができます。

<p>これは最初の段落です。</p>
<p>これは2番目の段落です。</p>

上記のように記述すると、それぞれの段落が独立したブロックとして表示され、段落間に適切な余白が自動的に追加されます。

pタグのよく使う属性について

pタグ自体には、頻繁に使用される固有の属性は多くありません。
ですが、グローバル属性と呼ばれる、すべてのHTML要素で共通して使用できる属性は利用可能です。

その中でもよく使われるのはclass属性とstyle属性です。

• class属性：CSSでスタイルを適用するためのクラスを指定します。
• style属性：要素に直接CSSスタイルを記述します。

これらの属性については、後述の「pタグを中央寄せにする」「pタグを太字にする」「pタグに背景色をつける」「pタグの周りに余白をつくる」で具体的な使用例を示します。

pタグを中央寄せにする

pタグ内のテキストを中央寄せにするには、CSSのtext-alignプロパティを使用します。
style属性を使って直接記述する方法と、class属性でCSSクラスを指定する方法があります。

<p style="text-align: center;">この段落は中央寄せです。</p>

<style>
.center-text {
  text-align: center;
}
</style>
<p class="center-text">この段落も中央寄せです。(CSSクラスを使用)</p>

pタグを太字にする

pタグ内のテキストを太字にするには、CSSのfont-weightプロパティを使用します。

<p style="font-weight: bold;">この段落は太字です。</p>

<style>
.bold-text {
 font-weight: bold; /* または bolder, 700 など */
}
</style>
<p class="bold-text">この段落も太字です。(CSSクラスを使用)</p>

pタグに背景色をつける

pタグに背景色をつけるには、CSSのbackground-colorプロパティを使用します。

<p style="background-color: lightgray;">この段落は背景色がついています。</p>

<style>
.bg-color {
  background-color: lightblue;
  padding: 10px; /* 必要に応じてpaddingを追加 */
}
</style>
<p class="bg-color">この段落も背景色がついています。(CSSクラスを使用)</p>

背景色を設定する際は、文字色とのコントラストも考えないと見にくくなるため、気をつけましょう。
また、必要に応じてpaddingプロパティで内側の余白を調整すると見栄えが良くなります。

pタグの周りに余白をつくる

pタグの周りに余白を作るには、CSSのmarginプロパティを使用します。
上下左右個別に余白を設定する場合は、margin-top、margin-bottom、margin-left、margin-rightを使用します。

<p style="margin: 20px;">この段落は上下左右に20pxの余白があります。</p>

<style>
.margin-top-bottom {
 margin-top: 30px;
 margin-bottom: 15px;
}
</style>
<p class="margin-top-bottom">この段落は上下に余白がついています。(CSSクラスを使用)</p>

paddingはブロック内に詰めて、余白を作る形ですが、こちらはブロックの外部に余白をいれている形になります。

終わりに

今回はHTMLのpタグについて解説しました。

HTMLのpタグについての基本的な使い方、よく使う属性やスタイルについて書いてみました。
適切に活用して、見やすいページを作っていきましょう。