MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾

【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾

HTML&CSS
html-p-tag

HTMLの<p>タグは、文章の「段落」を定義し、読みやすいWebサイトを構築する使用頻度の高いタグです。

本記事では、pタグの文法や他のタグ（br・div）との使い分け、CSSによる文字装飾、余白（行間・マージン）の作り方、レイアウト崩れを防ぐ改行を解説します。

目次

HTMLのpタグとは？意味と書き方

Webページを作成する際、使用頻度が高いタグの一つが<p>タグです。

「p」は英語の「Paragraph（パラグラフ）」の頭文字をとったもので、「段落」という意味を持ちます。

HTMLにおける段落とは、「ひとつのテーマについて書かれた文章のまとまり」のことです。

見出し（<h1>〜<h6>）に続く本文を記述する要素であり、Webサイト構築において欠かせない基礎知識になります。

HTMLのpタグとは
  • pタグ（段落）の役割と基本構文
  • 属性（class・id・align）の指定方法

pタグ（段落）の役割と基本構文

pタグの書き方は、段落にしたい文章を<p>と</p>で囲むだけです。

ブラウザは<p>で囲まれた部分を段落として認識し、デフォルトのプロパティとして、段落の上下に適度な余白（マージン）を作ります。

HTMLを書き始めた時、よくやる文法エラーが2つあります。

  1. <p>の中にブロック要素を入れてしまう
    HTMLのルールとして、「<p>タグの中には、他のブロックレベル要素（<div>、<ul>、<h1>など）を入れてはいけない」という決まりがあります。
    文章の段落の中に「箱（div）」が入るのは構造的におかしいため、ブラウザ側でタグが分割されてレイアウトが崩壊する原因になります。
    <p> の中に入れていいのは、<a> や <span>、<br> などのインライン要素だけです。
  2. 余白を作る空の<p></p>を連打する
    「もう少し隙間が欲しい」という理由で、意味もなく<p><br></p>や<p>&nbsp;</p>を複数書いて余白を調整しようとするのは、最悪のパターンです。
    余白の調整はCSS（marginやpadding）で行うのがよいです。
⭕️ 正しい使い方（段落の作成）
ご挨拶

はじめまして。私たちのWebサイトへようこそ。
このサイトでは、HTMLの基礎から実践的なCSSのテクニックまで、幅広く役立つ情報を発信しています。

初心者の方でも分かりやすい解説を心がけておりますので、ぜひ学習の参考にしてください。

<p>はじめまして。…役立つ情報を発信しています。</p>
<p>初心者の方でも…参考にしてください。</p>

※意味のある文章のまとまりごとにpタグで囲んでいます。ブラウザが自動で段落間の余白を作ってくれます。

❌ 悪い使い方（文法エラー・余白目的）

以下のリストをご覧ください：

  • 項目1
  • 項目2



リストの説明は以上です。

<p>
  以下のリストをご覧ください：
  <ul>…</ul> <!– 絶対NG！ –>
</p>

<p><br></p> <!– 余白目的の空タグNG –>
HTMLコード表示
<div class="hp1-wrapper">
  
  <div class="hp1-demo-area">
    
    <div class="hp1-box">
      <div class="hp1-label" style="color:#198754;">⭕️ 正しい使い方（段落の作成）</div>
      
      <div class="hp1-content-good">
        <div>ご挨拶</div>
        <p>はじめまして。私たちのWebサイトへようこそ。<br>
        このサイトでは、HTMLの基礎から実践的なCSSのテクニックまで、幅広く役立つ情報を発信しています。</p>
        <p>初心者の方でも分かりやすい解説を心がけておりますので、ぜひ学習の参考にしてください。</p>
      </div>

      <div class="hp1-code hp1-code-good">
        <p>はじめまして。...役立つ情報を発信しています。</p><br>
        <p>初心者の方でも...参考にしてください。</p>
      </div>
      <p class="hp1-note" style="color:#198754;">※意味のある文章のまとまりごとにpタグで囲んでいます。ブラウザが自動で段落間の余白を作ってくれます。</p>
    </div>

    <div class="hp1-box">
      <div class="hp1-label" style="color:#dc3545;">❌ 悪い使い方（文法エラー・余白目的）</div>
      
      <div class="hp1-content-bad">
        <p>
          以下のリストをご覧ください：
          <ul class="hp1-bad-list">
            <li>項目1</li>
            <li>項目2</li>
          </ul>
        </p>
        <p><br></p>
        <p><br></p>
        <p>リストの説明は以上です。</p>
      </div>

      <div class="hp1-code hp1-code-bad">
        <span class="hp1-hl-red"><p></span><br>
          以下のリストをご覧ください：<br>
          <span class="hp1-hl-red"><ul>...</ul></span> <!-- 絶対NG！ --><br>
        <span class="hp1-hl-red"></p></span><br><br>
        <span class="hp1-hl-red"><p><br></p></span> <!-- 余白目的の空タグNG -->
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.hp1-content-good h2 {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #333;
}
.hp1-content-good p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 15px 0; /* ブラウザ標準マージンのシミュレート */
}
.hp1-content-good p:last-child { margin-bottom: 0; }

.hp1-content-bad p {
  font-size: 14px;
  color: #842029;
  background-color: #f8d7da;
  padding: 5px;
  margin: 0 0 10px 0;
  border: 1px dashed #dc3545;
}
.hp1-bad-list {
  background-color: #fff;
  border: 2px solid #dc3545;
  margin: 5px 0;
  padding-left: 25px;
}

.hp1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}

.hp1-code-good { border-left: 4px solid #198754; }
.hp1-code-bad { border-left: 4px solid #dc3545; }
.hp1-hl-red { color: #e06c75; font-weight: bold; }

.hp1-note {
  font-size: 13px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

属性（class・id・align）の指定方法

pタグには、文字色を変えたり太さを変えたりするCSSを適用させる目的で、様々な属性を指定できます。

よく使うのがclass属性やid属性です。

また、マウスを乗せた時にツールチップ（小さな補足説明）を表示させるtitle属性を設定することも可能です。

💡 title属性（ツールチップ）

HTMLとは、Webページを作成するための言語です。（※ここに乗せてみてください）

<p title=”HyperText…”>
  HTMLとは…
</p>
📐 文字の配置（中央寄せ・右寄せ）

❌ <p align=”center”> (非推奨)

⭕️ class=”center” (CSSでtext-align)

⭕️ class=”right” (CSSでtext-align)

/* HTML側にはclassだけを書き、配置はCSSで制御する */
.center {
  text-align: center;
}
.right {
  text-align: right;
}
HTMLコード表示
<div class="hp2-wrapper">
  
  <div class="hp2-demo-area">
    
    <div class="hp2-box">
      <div class="hp2-label">💡 title属性（ツールチップ）</div>
      
      <p class="hp2-text-title" title="HyperText Markup Languageの略称です">
        HTMLとは、Webページを作成するための言語です。（※ここに乗せてみてください）
      </p>

      <div class="hp2-code" style="border-left-color:#ffc107;">
        <p <span class="hp2-hl-yellow">title="HyperText..."</span>><br>
          HTMLとは...<br>
        </p>
      </div>
    </div>

    <div class="hp2-box">
      <div class="hp2-label" style="color:#0d6efd;">📐 文字の配置（中央寄せ・右寄せ）</div>
      
      <div class="hp2-align-demo">
        <p class="hp2-text-align-bad" align="center">❌ <p align="center"> (非推奨)</p>
        
        <p class="hp2-text-align-good hp2-center">⭕️ class="center" (CSSでtext-align)</p>
        <p class="hp2-text-align-good hp2-right">⭕️ class="right" (CSSでtext-align)</p>
      </div>

      <div class="hp2-code" style="border-left-color:#0d6efd;">
        /* HTML側にはclassだけを書き、配置はCSSで制御する */<br>
        .center {<br>
          <span class="hp2-hl-blue">text-align: center;</span><br>
        }<br>
        .right {<br>
          <span class="hp2-hl-blue">text-align: right;</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp2-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* title属性を分かりやすくする装飾 */
.hp2-text-title {
  font-size: 14px;
  color: #333;
  padding: 10px;
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  cursor: help; /* カーソルを「？」マークにしてホバーを促す */
  margin: 0;
}

/* 配置デモのスタイル */
.hp2-align-demo {
  background-color: #f1f3f5;
  padding: 15px;
  border-radius: 4px;
}

.hp2-text-align-bad {
  margin: 0 0 10px 0;
  padding: 8px;
  background-color: #f8d7da;
  color: #842029;
  font-size: 14px;
  font-weight: bold;
  /* align="center"の動作をシミュレート（実際はブラウザが解釈する） */
  text-align: center; 
}

.hp2-text-align-good {
  margin: 0 0 10px 0;
  padding: 8px;
  background-color: #d1e7dd;
  color: #0f5132;
  font-size: 14px;
  font-weight: bold;
}
.hp2-text-align-good:last-child { margin-bottom: 0; }

/* CSSでの配置制御 */
.hp2-center { text-align: center; }
.hp2-right { text-align: right; }

.hp2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}

.hp2-hl-yellow { color: #e5c07b; font-weight: bold; }
.hp2-hl-blue { color: #61afef; font-weight: bold; }

pタグと他のタグの違い・使い分け

HTMLには文字を表示・レイアウトするタグがいくつも存在します。

「とりあえず文字が出れば何でもいい」と適当なタグを使っていると、デザインが崩れるだけでなく、Googleなどの検索エンジンに内容が伝わらずSEOで不利になります。

ここでは、混同しやすいタグの使い分けと実務でのコーディングルールを解説します。

pタグと他のタグの違い・使い分け
  • brタグとの違い
  • divタグ・spanタグとの違い
  • pタグの中にpタグ（入れ子）はNG

brタグとの違い

文章を書いていると「改行したい」と思う場面が出てきます。

この時、<p>タグと<br>タグのどちらを使うべきかで迷う初心者は多いです。

  • <p>タグ
    ひとつの「段落（意味のまとまり）」を作ります。
  • <br>タグ
    段落の中で「単なる改行」を行います。

やってはいけないのが段落と段落の間に隙間を作りたいからといってbrタグを連打して余白を調整することです。

これは、音声読み上げソフトが「空白、空白」と不自然な読み上げをしてしまうなど、アクセシビリティの観点から失敗の実装です。

「意味のまとまりが変わるなら<p>タグを変える」「同じまとまりの中で行を変えたい時だけ<br>を使う」というのがよいです。

❌ 悪い例（br連打で余白を作る）
今日はいい天気ですね。
散歩に行きたい気分です。


明日は雨が降るそうです。
家で映画を見ようと思います。
今日はいい天気ですね。<br>
散歩に行きたい気分です。
<br><br><br> <!– 構造として最悪 –>
明日は雨が降るそうです。
⭕️ 良い例（pタグで段落を分ける）

今日はいい天気ですね。
散歩に行きたい気分です。

明日は雨が降るそうです。
家で映画を見ようと思います。

<p>
  今日はいい天気ですね。<br>
  散歩に行きたい気分です。
</p>
<p>
  明日は雨が降るそうです…
</p>
HTMLコード表示
<div class="hp-diff1-wrapper">
  
  <div class="hp-diff1-demo-area">
    
    <div class="hp-diff1-box">
      <div class="hp-diff1-label" style="color:#dc3545;">❌ 悪い例（br連打で余白を作る）</div>
      
      <div class="hp-diff1-content-bad">
        今日はいい天気ですね。<br>
        散歩に行きたい気分です。<br><br><br> 明日は雨が降るそうです。<br>
        家で映画を見ようと思います。
      </div>

      <div class="hp-diff1-code hp-diff1-code-bad">
        今日はいい天気ですね。<br><br>
        散歩に行きたい気分です。<br>
        <span class="hp-diff1-hl-red"><br><br><br></span> <!-- 構造として最悪 --><br>
        明日は雨が降るそうです。
      </div>
    </div>

    <div class="hp-diff1-box">
      <div class="hp-diff1-label" style="color:#198754;">⭕️ 良い例（pタグで段落を分ける）</div>
      
      <div class="hp-diff1-content-good">
        <p>今日はいい天気ですね。<br>散歩に行きたい気分です。</p>
        <p>明日は雨が降るそうです。<br>家で映画を見ようと思います。</p>
      </div>

      <div class="hp-diff1-code hp-diff1-code-good">
        <span class="hp-diff1-hl-green"><p></span><br>
          今日はいい天気ですね。<br><br>
          散歩に行きたい気分です。<br>
        <span class="hp-diff1-hl-green"></p></span><br>
        <span class="hp-diff1-hl-green"><p></span><br>
          明日は雨が降るそうです...<br>
        <span class="hp-diff1-hl-green"></p></span>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-diff1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-diff1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-diff1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-diff1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* 悪い例のスタイル（pタグがなく、テキストがベタ打ちされている状態） */
.hp-diff1-content-bad {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  padding: 15px;
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
}

/* 良い例のスタイル（pタグで構造化されている） */
.hp-diff1-content-good p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 20px 0; /* CSSで段落間の余白を作るのが正解 */
  padding: 10px;
  background-color: #d1e7dd;
  border-left: 4px solid #198754;
}
.hp-diff1-content-good p:last-child {
  margin-bottom: 0;
}

.hp-diff1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}
.hp-diff1-code-bad { border-left: 4px solid #dc3545; }
.hp-diff1-code-good { border-left: 4px solid #198754; }

.hp-diff1-hl-red { color: #e06c75; font-weight: bold; text-decoration: underline; }
.hp-diff1-hl-green { color: #98c379; font-weight: bold; }

divタグ・spanタグとの違い

HTMLを書いていると、「文字を囲む時に<p>、<div>、<span> のどれを使えばいいの？」と迷うことがあります。

この3つは役割が異なります。

  • <p>タグ
    意味を持ったブロック要素。
    中身が文章の段落であることを検索エンジンに伝えます。
  • <div>タグ
    意味を持たないブロック要素。
    複数タグをグループ化してCSSでレイアウトを組む「箱」です。
  • <span>タグ
    意味を持たないインライン要素。
    文章の一部だけ色を変えたい時などに使います。
    改行は伴いません。

コードレビューをしていると、サイト内全ての文章が<div>文字</div>で記述されているHTMLを見かけることがあります。

見た目はCSSでどうにかなりますが、Googleの検索エンジンからは「このサイトにはレイアウト用の箱があるだけで、意味のある文章（段落）が存在しない」と判断され、SEOで減点される可能性があります。

長い文章のまとまりは<p>を使うのがよいです。

📦 divタグ（ただの箱・グループ化）
これはdivタグです。横幅いっぱいに広がりますが、「文章」という意味は持ちません。主に他の要素をまとめるために使います。
<div class=”box”>
  レイアウト用の箱です。
</div>
📝 pタグ（意味のある段落）と spanタグ（一部装飾）

これはpタグで作られた「段落」です。検索エンジンに文章であることを伝えます。
文章の一部分だけ色を変えたい時には、改行されないspanタグを使います。

<p>
  これはpタグで作られた段落です。
  文章の<span class=”red”>一部分だけ</span>色を…
</p>

※pタグは横幅いっぱいに広がる「ブロック要素」ですが、spanタグは文字の幅しか持たない「インライン要素」です。

HTMLコード表示
<div class="hp-diff2-wrapper">
  
  <div class="hp-diff2-demo-area">
    
    <div class="hp-diff2-box">
      <div class="hp-diff2-label">📦 divタグ（ただの箱・グループ化）</div>
      
      <div class="hp-diff2-div-demo">
        これはdivタグです。横幅いっぱいに広がりますが、「文章」という意味は持ちません。主に他の要素をまとめるために使います。
      </div>

      <div class="hp-diff2-code">
        <div class="box"><br>
          レイアウト用の箱です。<br>
        </div>
      </div>
    </div>

    <div class="hp-diff2-box">
      <div class="hp-diff2-label" style="color:#0d6efd;">📝 pタグ（意味のある段落）と spanタグ（一部装飾）</div>
      
      <p class="hp-diff2-p-demo">
        これはpタグで作られた「段落」です。検索エンジンに文章であることを伝えます。<br>
        文章の<span class="hp-diff2-span-demo">一部分だけ色を変えたい時</span>には、改行されないspanタグを使います。
      </p>

      <div class="hp-diff2-code" style="border-left-color:#0d6efd;">
        <span class="hp-diff2-hl-blue"><p></span><br>
          これはpタグで作られた段落です。<br>
          文章の<span class="hp-diff2-hl-yellow"><span class="red"></span>一部分だけ<span class="hp-diff2-hl-yellow"></span></span>色を...<br>
        <span class="hp-diff2-hl-blue"></p></span>
      </div>
      <p class="hp-diff2-note">※pタグは横幅いっぱいに広がる「ブロック要素」ですが、spanタグは文字の幅しか持たない「インライン要素」です。</p>
    </div>

  </div>
</div>
CSSコード表示
.hp-diff2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-diff2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-diff2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-diff2-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* divタグの可視化 */
.hp-diff2-div-demo {
  border: 2px dashed #6c757d;
  background-color: #e9ecef;
  padding: 10px;
  font-size: 14px;
  color: #495057;
  margin-bottom: 15px;
}

/* pタグの可視化 */
.hp-diff2-p-demo {
  border: 2px solid #0d6efd;
  background-color: #e7f1ff;
  padding: 10px;
  font-size: 14px;
  color: #084298;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* spanタグの可視化 */
.hp-diff2-span-demo {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  font-weight: bold;
  padding: 0 4px;
}

.hp-diff2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #6c757d;
}

.hp-diff2-hl-blue { color: #61afef; font-weight: bold; }
.hp-diff2-hl-yellow { color: #e5c07b; font-weight: bold; }

.hp-diff2-note {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}

divタグの使い方や詳細な設定方法を知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

pタグの中にpタグ（入れ子）はNG

HTMLのコーディングにおいて、明確な文法違反になるルールがあります。

それが「<p>タグの中に、別の<p>タグを入れてはいけない」というルールです。

「段落の中に段落がある」というのは国語の文法としても不自然であり、HTMLにおいても同じ解釈がなされます。

初心者が文章の一部だけ行間を変えたいといった理由で、誤って<p>あいうえお<p>かきくけこ</p>さしすせそ</p>のように入れ子（ネスト）にしてしまうことがあります。

この時、画面が真っ白になるようなエラーは出ませんが、ブラウザが文法違反を検知し、裏側で<p></p>をバラバラに分割して解釈してしまいます。

その結果、CSSが効かなくなったり、予期せぬ余白が生まれたりして「コードは合ってるのにデザインが崩れる。」という状態を引き起こします。

段落の中で要素を分けたい場合は、インライン要素である<span>を使うのがよいです。

⚠️ pタグの入れ子は強制分割される

以下のようにHTMLを書いたつもりでも…

<p class=”parent”>
  親の段落の始まりです。
  <p class=”child”>
    子の段落です。
  </p>
  親の段落の終わりです。
</p>

ブラウザの裏側（DOM）では、勝手に以下のように3つの要素にバラバラに分解され、レイアウトが崩壊します。

<p class=”parent”>親の段落の始まりです。</p> ←勝手に閉じられる！
<p class=”child”>子の段落です。</p>
<p>親の段落の終わりです。</p> ←親なしの迷子になる！
HTMLコード表示
<div class="hp-diff3-wrapper">
  
  <div class="hp-diff3-demo-area">
    
    <div class="hp-diff3-box">
      <div class="hp-diff3-label" style="color:#dc3545;">⚠️ pタグの入れ子は強制分割される</div>
      
      <p class="hp-diff3-note">
        以下のようにHTMLを書いたつもりでも...
      </p>
      
      <div class="hp-diff3-code hp-diff3-code-bad">
        <p class="parent"><br>
          親の段落の始まりです。<br>
          <span class="hp-diff3-hl-red"><p class="child"></span><br>
            子の段落です。<br>
          <span class="hp-diff3-hl-red"></p></span><br>
          親の段落の終わりです。<br>
        </p>
      </div>

      <p class="hp-diff3-note" style="margin-top: 20px;">
        ブラウザの裏側（DOM）では、勝手に以下のように<b>3つの要素にバラバラに分解</b>され、レイアウトが崩壊します。
      </p>

      <div class="hp-diff3-dom-sim">
        <div class="hp-diff3-sim-tag"><p class="parent">親の段落の始まりです。</p> <span class="hp-diff3-sim-alert">←勝手に閉じられる！</span></div>
        <div class="hp-diff3-sim-tag"><p class="child">子の段落です。</p></div>
        <div class="hp-diff3-sim-tag"><p>親の段落の終わりです。</p> <span class="hp-diff3-sim-alert">←親なしの迷子になる！</span></div>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-diff3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-diff3-demo-area {
  display: flex;
  justify-content: center;
}

.hp-diff3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-diff3-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.hp-diff3-note {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.hp-diff3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hp-diff3-code-bad { border-left: 4px solid #dc3545; }
.hp-diff3-hl-red { color: #e06c75; font-weight: bold; text-decoration: underline; }

/* DOM崩壊のシミュレーションエリア */
.hp-diff3-dom-sim {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #856404;
}

.hp-diff3-sim-tag {
  margin-bottom: 5px;
  background-color: rgba(255,255,255,0.7);
  padding: 5px;
  border: 1px dashed #dc3545;
}

.hp-diff3-sim-alert {
  color: #dc3545;
  font-weight: bold;
  font-size: 12px;
}

pタグの見た目をデザイン・装飾する

HTMLの<p>タグは、ブラウザ標準のままだと単なる黒い文字の羅列になります。

Webサイトに合わせて読みやすい文章を作るには、CSSを使ったデザイン・装飾が必須になります。

実務では、一つの段落に対して文字サイズ・色・行間など複数のスタイルを組み合わせて適用します。

pタグの見た目をデザイン・装飾する
  • 文字サイズ・色・フォント・太字の変更
  • 文字の配置（中央寄せ・右寄せ・均等割付）
  • 背景色や枠線の設定

CSSによる文字装飾のまとめを確認したい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【html&css】文字装飾に関するWebデザインまとめ

文字サイズ・色・フォント・太字の変更

段落の読みやすさを決める基本が文字の装飾です。

  • 文字サイズ
    font-sizeを使用します。
  • 文字色
    colorを使用します。
  • フォントの種類
    font-familyを使用し、明朝体やゴシック体などを指定します。
  • 太字
    font-weight: bold;を使用します。
📝 標準のpタグ（デフォルト）

これは標準の段落です。ブラウザのデフォルト設定で表示されており、文字サイズも標準、色は黒（または濃いグレー）です。

✨ CSSで装飾したpタグ

これはCSSで美しく装飾された段落です。文字を少し大きくし、読みやすいフォントと色を指定し、一部を太字にしています。

/* HTML側には <p class=”styled-text”> と書く */
.styled-text {
  font-size: 16px;
  color: #084298;
  font-family: “Noto Sans JP”, sans-serif;
  font-weight: bold;
  line-height: 1.8; /* 行間も広げると読みやすい */
}
HTMLコード表示
<div class="hp-css1-wrapper">
  
  <div class="hp-css1-demo-area">
    
    <div class="hp-css1-box">
      <div class="hp-css1-label">📝 標準のpタグ（デフォルト）</div>
      <p class="hp-css1-default">
        これは標準の段落です。ブラウザのデフォルト設定で表示されており、文字サイズも標準、色は黒（または濃いグレー）です。
      </p>
    </div>

    <div class="hp-css1-box">
      <div class="hp-css1-label" style="color:#0d6efd;">✨ CSSで装飾したpタグ</div>
      <p class="hp-css1-styled">
        これはCSSで美しく装飾された段落です。文字を少し大きくし、読みやすいフォントと色を指定し、一部を太字にしています。
      </p>
      
      <div class="hp-css1-code">
        /* HTML側には <p class="styled-text"> と書く */<br>
        .styled-text {<br>
          <span class="hp-css1-hl">font-size: 16px;</span><br>
          <span class="hp-css1-hl">color: #084298;</span><br>
          <span class="hp-css1-hl">font-family: "Noto Sans JP", sans-serif;</span><br>
          <span class="hp-css1-hl">font-weight: bold;</span><br>
          line-height: 1.8; /* 行間も広げると読みやすい */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-css1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-css1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.hp-css1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-css1-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* デフォルトのシミュレーション */
.hp-css1-default {
  margin: 0;
  font-size: medium;
  color: black;
}

/* カスタマイズされたスタイル */
.hp-css1-styled {
  margin: 0;
  font-size: 16px;
  color: #084298;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: bold;
  line-height: 1.8;
  background-color: #e7f1ff;
  padding: 10px;
  border-radius: 4px;
}

.hp-css1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
  border-left: 4px solid #0d6efd;
}

.hp-css1-hl { color: #61afef; font-weight: bold; }

文字の配置（中央寄せ・右寄せ・均等割付）

段落内の文字の配置を変えたい場合は、CSSのtext-alignプロパティを使用します。

  • 中央寄せ：text-align: center;
  • 右寄せ：text-align: right;
  • 均等割付：text-align: justify;
中央寄せ・右寄せ

中央寄せ（center）です。
見出しやキャッチコピーでよく使われます。

右寄せ（right）です。
署名や日付などを配置する際に役立ちます。

.center-text { text-align: center; }
.right-text { text-align: right; }
⚠️ 均等割付（justify）の罠

均等割付（justify）は左右の端が綺麗に揃いますが、行の文字数が少ないと、このように文字と文字の間に不自然で巨大な空白ができてしまい、非常に読みづらい文章になってしまう危険性があります。

.justify-text { text-align: justify; }
HTMLコード表示
<div class="hp-css2-wrapper">
  
  <div class="hp-css2-demo-area">
    
    <div class="hp-css2-box">
      <div class="hp-css2-label">中央寄せ・右寄せ</div>
      
      <p class="hp-css2-text hp-css2-center">
        中央寄せ（center）です。<br>見出しやキャッチコピーでよく使われます。
      </p>
      
      <p class="hp-css2-text hp-css2-right">
        右寄せ（right）です。<br>署名や日付などを配置する際に役立ちます。
      </p>
      
      <div class="hp-css2-code">
        .center-text { <span class="hp-css2-hl">text-align: center;</span> }<br>
        .right-text { <span class="hp-css2-hl">text-align: right;</span> }
      </div>
    </div>

    <div class="hp-css2-box">
      <div class="hp-css2-label" style="color:#d63384;">⚠️ 均等割付（justify）の罠</div>
      
      <p class="hp-css2-text hp-css2-justify">
        均等割付（justify）は左右の端が綺麗に揃いますが、行の文字数が少ないと、このように文字と文字の間に不自然で巨大な空白ができてしまい、非常に読みづらい文章になってしまう危険性があります。
      </p>

      <div class="hp-css2-code" style="border-left-color:#d63384;">
        .justify-text { <span class="hp-css2-hl-pink">text-align: justify;</span> }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-css2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-css2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.hp-css2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-css2-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.hp-css2-text {
  background-color: #f1f3f5;
  border: 1px solid #ced4da;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 15px 0;
  border-radius: 4px;
}

.hp-css2-center { text-align: center; }
.hp-css2-right { text-align: right; }

/* 均等割付。幅を狭くして不自然な空白（川）をシミュレートしやすくする */
.hp-css2-justify {
  text-align: justify;
  width: 85%;
  margin: 0 auto 15px auto;
}

.hp-css2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.5;
  border-left: 4px solid #6c757d;
}
.hp-css2-hl { color: #61afef; font-weight: bold; }
.hp-css2-hl-pink { color: #c678dd; font-weight: bold; }

背景色や枠線の設定

「注意書き」や「重要なお知らせ」の段落を作る時、背景色をつけたり、背景画像や枠線をつけたりして強調させることがあります。

pタグにbackground-colorやborderを指定する時は、padding（内側の余白）をセットで記述するのがよいです。

❌ 悪い例（paddingなしの背景）

【重要なお知らせ】
背景色や枠線をつけたのに「padding」を指定し忘れると、このように文字が端に張り付いてしまい、非常に息苦しくてダサいデザインになります。

.bad-bg {
  background-color: #f8d7da;
  border: 2px solid #dc3545;
  /* paddingの指定を忘れている！ */
}
⭕️ 良い例（paddingありの美しい背景）

【重要なお知らせ】
「padding: 15px;」を設定するだけで、文字の周りにゆとりが生まれ、一気にプロが作ったような読みやすい美しいデザインに変わりました。

.good-bg {
  background-color: #d1e7dd;
  border: 2px solid #198754;
  padding: 15px; /* プロの必須コード */
  border-radius: 4px; /* 角丸も入れるとおしゃれ */
}
HTMLコード表示
<div class="hp-css3-wrapper">
  
  <div class="hp-css3-demo-area">
    
    <div class="hp-css3-box">
      <div class="hp-css3-label" style="color:#dc3545;">❌ 悪い例（paddingなしの背景）</div>
      
      <p class="hp-css3-bad-bg">
        【重要なお知らせ】<br>背景色や枠線をつけたのに「padding」を指定し忘れると、このように文字が端に張り付いてしまい、非常に息苦しくてダサいデザインになります。
      </p>

      <div class="hp-css3-code hp-css3-code-bad">
        .bad-bg {<br>
          background-color: #f8d7da;<br>
          border: 2px solid #dc3545;<br>
          <span class="hp-css3-hl-red">/* paddingの指定を忘れている！ */</span><br>
        }
      </div>
    </div>

    <div class="hp-css3-box">
      <div class="hp-css3-label" style="color:#198754;">⭕️ 良い例（paddingありの美しい背景）</div>
      
      <p class="hp-css3-good-bg">
        【重要なお知らせ】<br>「padding: 15px;」を設定するだけで、文字の周りにゆとりが生まれ、一気にプロが作ったような読みやすい美しいデザインに変わりました。
      </p>

      <div class="hp-css3-code hp-css3-code-good">
        .good-bg {<br>
          background-color: #d1e7dd;<br>
          border: 2px solid #198754;<br>
          <span class="hp-css3-hl-green">padding: 15px; /* プロの必須コード */</span><br>
          border-radius: 4px; /* 角丸も入れるとおしゃれ */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-css3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-css3-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-css3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-css3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* ❌ paddingを指定し忘れたダサいデザイン */
.hp-css3-bad-bg {
  background-color: #f8d7da;
  border: 2px solid #dc3545;
  color: #842029;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  /* padding がないためキツキツになる */
}

/* ⭕️ paddingを指定した美しいデザイン */
.hp-css3-good-bg {
  background-color: #d1e7dd;
  border: 2px solid #198754;
  color: #0f5132;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 15px;
  border-radius: 8px; /* 角丸でさらに優しく */
}

.hp-css3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
}

.hp-css3-code-bad { border-left: 4px solid #dc3545; }
.hp-css3-code-good { border-left: 4px solid #198754; }

.hp-css3-hl-red { color: #e06c75; font-weight: bold; }
.hp-css3-hl-green { color: #98c379; font-weight: bold; }

paddingやmarginによる余白設定について知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

pタグの余白を調整する

Webサイトの文章が「読みやすいか、読みにくいか」は、文字の大きさや色だけでなく余白の取り方も重要です。

HTMLの<p>タグで作られた段落の余白には、大きく分けて2つの種類が存在します。

1つは段落の中での改行による隙間、もう1つは段落と段落の外側にできる隙間です。

ここでは、混同する行間とマージンの調整方法とを解説します。

pタグの余白を調整する
  • 行の高さを調整する
  • 自動で入る上下の余白を消す・詰める

行の高さを調整する

段落の中で文字が改行された時、上の行と下の行の間にどれくらいの隙間を空けるかを指定するのがline-heightプロパティです。

日本語のWebサイトでは、一般的に1.6 ～1.8程度に設定すると読みやすいと言われています。

❌ 悪い例（px指定で文字が重なる）

これは悪い例の段落です。
line-heightを20pxで固定しているため、
文字サイズを24pxに大きくすると
行同士が完全に重なってしまいます。

.bad-text {
  font-size: 24px;
  line-height: 20px; /* 絶対NG！ */
}
⭕️ 良い例（単位なしで安全に可変）

こちらは正しい段落です。
単位なしの「1.6」を指定しているため、
文字サイズが24pxに大きくなっても
自動で「24 × 1.6 = 38.4px」の行間が確保され、
絶対に重なることはありません。

.good-text {
  font-size: 24px;
  line-height: 1.6; /* 単位なしは現在の文字サイズに1.6倍 */
}
HTMLコード表示
<div class="hp-space1-wrapper">
  
  <div class="hp-space1-demo-area">
    
    <div class="hp-space1-box">
      <div class="hp-space1-label" style="color:#dc3545;">❌ 悪い例（px指定で文字が重なる）</div>
      
      <p class="hp-space1-bad-lineheight">
        これは悪い例の段落です。<br>
        line-heightを20pxで固定しているため、<br>
        文字サイズを24pxに大きくすると<br>
        行同士が完全に重なってしまいます。
      </p>

      <div class="hp-space1-code hp-space1-code-bad">
        .bad-text {<br>
          font-size: 24px;<br>
          <span class="hp-space1-hl-red">line-height: 20px; /* 絶対NG！ */</span><br>
        }
      </div>
    </div>

    <div class="hp-space1-box">
      <div class="hp-space1-label" style="color:#198754;">⭕️ 良い例（単位なしで安全に可変）</div>
      
      <p class="hp-space1-good-lineheight">
        こちらは正しい段落です。<br>
        単位なしの「1.6」を指定しているため、<br>
        文字サイズが24pxに大きくなっても<br>
        自動で「24 × 1.6 = 38.4px」の行間が確保され、<br>
        絶対に重なることはありません。
      </p>

      <div class="hp-space1-code hp-space1-code-good">
        .good-text {<br>
          font-size: 24px;<br>
          <span class="hp-space1-hl-green">line-height: 1.6; /* 単位なしは現在の文字サイズに1.6倍 */</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-space1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-space1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-space1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-space1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* ❌ px固定による文字被りのシミュレーション */
.hp-space1-bad-lineheight {
  font-size: 24px;
  font-weight: bold;
  color: #842029;
  background-color: #f8d7da;
  padding: 10px;
  border: 1px solid #dc3545;
  margin: 0;
  /* ここが原因！文字サイズより行の高さが低い */
  line-height: 20px; 
}

/* ⭕️ 単位なしによる安全な行間 */
.hp-space1-good-lineheight {
  font-size: 24px;
  font-weight: bold;
  color: #0f5132;
  background-color: #d1e7dd;
  padding: 15px;
  border: 1px solid #198754;
  margin: 0;
  /* 現在の文字サイズの1.6倍を自動計算 */
  line-height: 1.6; 
}

.hp-space1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 20px;
}

.hp-space1-code-bad { border-left: 4px solid #dc3545; }
.hp-space1-code-good { border-left: 4px solid #198754; }

.hp-space1-hl-red { color: #e06c75; font-weight: bold; text-decoration: underline; }
.hp-space1-hl-green { color: #98c379; font-weight: bold; }

自動で入る上下の余白を消す・詰める

<p>タグを使うと、ブラウザの初期設定によって段落の上下に自動的に約1行分の外側の余白が追加されます。

段落と段落の間を近づけたい場合、CSSのmarginプロパティを使って自動余白を消したり上書きしたりする必要があります。

CSSの初期化の段階で一旦すべての<p>のマージンをゼロ（margin: 0;）にして自動余白を消し去ります。

その上で、下方向の余白だけをmargin-bottom: 20px;のように意図的に指定してレイアウトを組み上げる「マージンボトム駆動」というテクニックを多用します。

🌐 ブラウザ標準の余白（コントロールしにくい）

1つ目の段落です。ブラウザの仕様により、上下に「margin: 1em;」相当の余白が勝手についています。

2つ目の段落です。上の段落と余白が重なり（相殺）、思い通りのレイアウトを組むのが難しくなります。

/* ブラウザが勝手に当てているCSSのイメージ */
p {
  margin-top: 1em;
  margin-bottom: 1em;
}
✨ 余白管理（マージンボトム駆動）

1つ目の段落です。一旦marginを「0」にしてデフォルトの余白を消し去っています。

2つ目の段落です。その上で、「margin-bottom」だけを指定して下方向にだけ意図的な隙間を作っています。

3つ目の段落です。これで余白の計算が完璧にコントロールできます。

/* CSS */
p {
  margin: 0; /* 勝手につく余白を消す */
  margin-bottom: 20px; /* 下だけ指定する */
}
HTMLコード表示
<div class="hp-space2-wrapper">
  
  <div class="hp-space2-demo-area">
    
    <div class="hp-space2-box">
      <div class="hp-space2-label">🌐 ブラウザ標準の余白（コントロールしにくい）</div>
      
      <div class="hp-space2-sim-bg">
        <p class="hp-space2-default-margin">
          1つ目の段落です。ブラウザの仕様により、上下に「margin: 1em;」相当の余白が勝手についています。
        </p>
        <p class="hp-space2-default-margin">
          2つ目の段落です。上の段落と余白が重なり（相殺）、思い通りのレイアウトを組むのが難しくなります。
        </p>
      </div>

      <div class="hp-space2-code">
        /* ブラウザが勝手に当てているCSSのイメージ */<br>
        p {<br>
          margin-top: 1em;<br>
          margin-bottom: 1em;<br>
        }
      </div>
    </div>

    <div class="hp-space2-box">
      <div class="hp-space2-label" style="color:#0d6efd;">✨ 余白管理（マージンボトム駆動）</div>
      
      <div class="hp-space2-sim-bg">
        <p class="hp-space2-pro-margin">
          1つ目の段落です。一旦marginを「0」にしてデフォルトの余白を消し去っています。
        </p>
        <p class="hp-space2-pro-margin">
          2つ目の段落です。その上で、「margin-bottom」だけを指定して下方向にだけ意図的な隙間を作っています。
        </p>
        <p class="hp-space2-pro-margin" style="margin-bottom: 0;">
          3つ目の段落です。これで余白の計算が完璧にコントロールできます。
        </p>
      </div>

      <div class="hp-space2-code" style="border-left-color:#0d6efd;">
        /* CSS */<br>
        p {<br>
          <span class="hp-space2-hl-blue">margin: 0;</span> /* 勝手につく余白を消す */<br>
          <span class="hp-space2-hl-blue">margin-bottom: 20px;</span> /* 下だけ指定する */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-space2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-space2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-space2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}

.hp-space2-label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

/* マージンを可視化するための背景 */
.hp-space2-sim-bg {
  background-color: #fce4ec; /* 余白（マージン）部分をピンクで表現 */
  border: 1px dashed #d81b60;
}

/* デフォルトのマージンのシミュレート */
.hp-space2-default-margin {
  background-color: #e3f2fd; /* 要素自体は青 */
  color: #0d47a1;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  /* ブラウザ標準のような上下マージン */
  margin: 16px 0; 
  border: 1px solid #1976d2;
}

/* マージン管理（マージンボトム駆動） */
.hp-space2-pro-margin {
  background-color: #e8f5e9; /* 要素自体は緑 */
  color: #1b5e20;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #2e7d32;
  /* 一旦ゼロにして、下だけ指定する書き方 */
  margin: 0;
  margin-bottom: 20px;
}

.hp-space2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 15px;
  border-left: 4px solid #6c757d;
}

.hp-space2-hl-blue { color: #61afef; font-weight: bold; }

pタグでの改行と折り返し

HTMLの<p>タグで文章を書いていると、ブラウザの横幅に合わせて自動的に文章が折り返されます。

また、任意の場所で改行したい場合は、<br>タグを使用します。

しかし、実務のWebデザインにおいては「ここでは絶対に改行させたくない」「逆に、英数字の連続でレイアウトが突き抜けてしまうから折り返したい」といった折り返しコントロールが求められます。

pタグでの改行と折り返し
  • 改行させない・折り返さない方法
  • 長すぎる単語を強制的に折り返す

改行させない・折り返さない方法

「お問い合わせ」「TEL: 03-0000-0000」など、意味のまとまりとして途中で改行させない方がよい場合があります。

ブラウザの折り返しを無効化し、改行なしの1行で表示させたい場合は、white-space: nowrap;を使用します。

nowrapを使う時は、はみ出た部分の文字の処理をセットで記述します。

実務では、はみ出た部分を隠すoverflow: hidden; と省略記号（…）をつけるtext-overflow: ellipsis;を組み合わせるのがよいです。

❌ 悪い例（nowrap単体による突き抜け）

この文章はwhite-space:nowrapが指定されているため、親の枠を超えても絶対に改行されずに右へ突き抜けてしまいます。

.bad-text {
  white-space: nowrap;
  /* はみ出し対策をしていない！ */
}
⭕️ 良い例（はみ出しを「…」で省略）

この文章はwhite-space:nowrapが指定されていますが、対策をしているため枠内に収まり、続きは「…」で省略されます。

.good-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
HTMLコード表示
<div class="hp-wrap1-wrapper">
  
  <div class="hp-wrap1-demo-area">
    
    <div class="hp-wrap1-box">
      <div class="hp-wrap1-label" style="color:#dc3545;">❌ 悪い例（nowrap単体による突き抜け）</div>
      
      <div class="hp-wrap1-container">
        <p class="hp-wrap1-bad-nowrap">
          この文章はwhite-space:nowrapが指定されているため、親の枠を超えても絶対に改行されずに右へ突き抜けてしまいます。
        </p>
      </div>

      <div class="hp-wrap1-code hp-wrap1-code-bad">
        .bad-text {<br>
          <span class="hp-wrap1-hl-red">white-space: nowrap;</span><br>
          /* はみ出し対策をしていない！ */<br>
        }
      </div>
    </div>

    <div class="hp-wrap1-box">
      <div class="hp-wrap1-label" style="color:#198754;">⭕️ 良い例（はみ出しを「...」で省略）</div>
      
      <div class="hp-wrap1-container">
        <p class="hp-wrap1-good-nowrap">
          この文章はwhite-space:nowrapが指定されていますが、対策をしているため枠内に収まり、続きは「...」で省略されます。
        </p>
      </div>

      <div class="hp-wrap1-code hp-wrap1-code-good">
        .good-text {<br>
          <span class="hp-wrap1-hl-green">white-space: nowrap;</span><br>
          <span class="hp-wrap1-hl-green">overflow: hidden;</span><br>
          <span class="hp-wrap1-hl-green">text-overflow: ellipsis;</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-wrap1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-wrap1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-wrap1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
  overflow: hidden; /* デモエリア自体が崩れないように保護 */
}

.hp-wrap1-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* スマホ画面などを想定した狭い親枠 */
.hp-wrap1-container {
  width: 100%;
  background-color: #f1f3f5;
  border: 2px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

/* ❌ 突き抜けるバグの再現 */
.hp-wrap1-bad-nowrap {
  margin: 0;
  font-size: 14px;
  color: #842029;
  background-color: #f8d7da;
  /* 絶対に改行させない */
  white-space: nowrap; 
}

/* ⭕️「...」省略処理 */
.hp-wrap1-good-nowrap {
  margin: 0;
  font-size: 14px;
  color: #0f5132;
  background-color: #d1e7dd;
  /* 3点セット */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-wrap1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.5;
  margin-top: 15px;
}
.hp-wrap1-code-bad { border-left: 4px solid #dc3545; }
.hp-wrap1-code-good { border-left: 4px solid #198754; }

.hp-wrap1-hl-red { color: #e06c75; font-weight: bold; text-decoration: underline; }
.hp-wrap1-hl-green { color: #98c379; font-weight: bold; }

white-spaceプロパティについて詳しく知りたい人は「【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け」を一読ください。

【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け

長すぎる単語を強制的に折り返す

日本語の文章であれば、枠の端に来た時にブラウザが自動的に折り返します。

しかし、長いURL（https://…）やスペースのない英単語の羅列が含まれていると、ブラウザは「一つの単語だから途中で切ってはいけない。」と判断し、改行せずに枠を突き抜けることがあります。

この現象を防ぎ、枠の端に到達したら文字を折り返させるのがoverflow-wrap: break-word;です。

長すぎる英単語やURLのはみ出し対策には、「基本は単語のまとまりを維持しつつ、はみ出す場合だけ途中で折り返す」という挙動をするoverflow-wrap: break-word;を使用するのがよいです。

❌ 悪い例（長いURLが枠を突き抜ける）

参考リンクはこちらです：
https://thisisaverylongurlthatwilldefinitelybreakthelayoutofyourwebsiteifyoudonotusecss.com

.bad-text {
  /* 何も指定していないため、
    長いURLが折り返されない */
}
⭕️ 良い例（枠の端で綺麗に折り返す）

参考リンクはこちらです：
https://thisisaverylongurlthatwilldefinitelybreakthelayoutofyourwebsiteifyoudonotusecss.com

.good-text {
  /* はみ出す場合のみ強制的に折り返す魔法 */
  overflow-wrap: break-word;
}
HTMLコード表示
<div class="hp-wrap2-wrapper">
  
  <div class="hp-wrap2-demo-area">
    
    <div class="hp-wrap2-box">
      <div class="hp-wrap2-label" style="color:#dc3545;">❌ 悪い例（長いURLが枠を突き抜ける）</div>
      
      <div class="hp-wrap2-container">
        <p class="hp-wrap2-bad-wrap">
          参考リンクはこちらです：<br>
          https://thisisaverylongurlthatwilldefinitelybreakthelayoutofyourwebsiteifyoudonotusecss.com
        </p>
      </div>

      <div class="hp-wrap2-code hp-wrap2-code-bad">
        .bad-text {<br>
          /* 何も指定していないため、<br>
            長いURLが折り返されない */<br>
        }
      </div>
    </div>

    <div class="hp-wrap2-box">
      <div class="hp-wrap2-label" style="color:#198754;">⭕️ 良い例（枠の端で綺麗に折り返す）</div>
      
      <div class="hp-wrap2-container">
        <p class="hp-wrap2-good-wrap">
          参考リンクはこちらです：<br>
          https://thisisaverylongurlthatwilldefinitelybreakthelayoutofyourwebsiteifyoudonotusecss.com
        </p>
      </div>

      <div class="hp-wrap2-code hp-wrap2-code-good">
        .good-text {<br>
          /* はみ出す場合のみ強制的に折り返す魔法 */<br>
          <span class="hp-wrap2-hl-green">overflow-wrap: break-word;</span><br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hp-wrap2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hp-wrap2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hp-wrap2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
  /* 突き抜けたURLでサイト全体のレイアウトが崩れないよう、この箱の中だけでスクロールさせます */
  overflow-x: auto; 
}

.hp-wrap2-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* スマホのような狭い枠 */
.hp-wrap2-container {
  width: 100%;
  background-color: #f1f3f5;
  border: 2px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

/* ❌ 折り返されず突き抜けるURL */
.hp-wrap2-bad-wrap {
  margin: 0;
  font-size: 14px;
  color: #842029;
  background-color: #f8d7da;
  
  /* 意図的にバグ（突き抜け）を再現する */
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

/* ⭕️ 正しく折り返されるURL */
.hp-wrap2-good-wrap {
  margin: 0;
  font-size: 14px;
  color: #0f5132;
  background-color: #d1e7dd;
  /* 長い単語を枠内に収めるためのプロの必須コード */
  overflow-wrap: break-word !important;
}

.hp-wrap2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.5;
  margin-top: 15px;
}
.hp-wrap2-code-bad { border-left: 4px solid #dc3545; }
.hp-wrap2-code-good { border-left: 4px solid #198754; }

.hp-wrap2-hl-green { color: #98c379; font-weight: bold; }

【番外編】あわせて知りたいHTMLの関連用語

これまでHTMLの段落やフォーム部品について解説してきましたが、Web制作では「余白の作り方」や「PDFの扱い」「ページ内リンクのズレ」などがいくつか存在します。

ここでは、HTML/CSSにおける関連用語を解説します。

HTMLの関連用語
  • paddingとmarginの違い
  • PDFを表示・埋め込み（iframe）する方法
  • プレビュー画面でコードの表示確認する方法
  • preタグ（整形済みテキスト）の使い方
  • ページ内リンク（アンカー）の作り方とズレの調整

paddingとmarginの違い

Webデザインにおける「余白」を意味する用語として、paddingとmarginがあります。

  • margin（マージン）
    枠線の「外側」の余白。
    隣の要素との距離を離す時に使います。
  • padding（パディング）
    枠線の「内側」の余白。
    箱を内側から膨らませる時に使います。

書き方としては、上だけ指定するpadding-topや左だけ指定するpadding-leftなどがあります。

❌ margin（外側の余白）で広げた場合
ボタン
.btn {
  background-color: #0d6efd;
  margin: 20px; /* 外側に隙間ができるだけ */
}

※青い部分しかクリックできません。周りの余白はただの隙間です。

⭕️ padding（内側の余白）で広げた場合
ボタン
.btn {
  background-color: #198754;
  padding: 20px; /* 内側から膨らむ */
}

※内側から背景色が広がり、広がった緑色の部分すべてがクリック可能になります。

HTMLコード表示
<div class="hxtra1-wrapper">
  
  <div class="hxtra1-demo-area">
    
    <div class="hxtra1-box">
      <div class="hxtra1-label" style="color:#dc3545;">❌ margin（外側の余白）で広げた場合</div>
      
      <div class="hxtra1-bg-area">
        <a href="javascript:void(0)" class="hxtra1-btn-margin" onclick="alert('クリックされました！')">
          ボタン
        </a>
      </div>
      
      <div class="hxtra1-code hp-css3-code-bad">
        .btn {<br>
          background-color: #0d6efd;<br>
          <span class="hxtra1-hl-red">margin: 20px;</span> /* 外側に隙間ができるだけ */<br>
        }
      </div>
      <p class="hxtra1-note">※青い部分しかクリックできません。周りの余白はただの隙間です。</p>
    </div>

    <div class="hxtra1-box">
      <div class="hxtra1-label" style="color:#198754;">⭕️ padding（内側の余白）で広げた場合</div>
      
      <div class="hxtra1-bg-area">
        <a href="javascript:void(0)" class="hxtra1-btn-padding" onclick="alert('クリックされました！')">
          ボタン
        </a>
      </div>

      <div class="hxtra1-code hp-css3-code-good">
        .btn {<br>
          background-color: #198754;<br>
          <span class="hxtra1-hl-green">padding: 20px;</span> /* 内側から膨らむ */<br>
        }
      </div>
      <p class="hxtra1-note" style="color:#198754;">※内側から背景色が広がり、広がった緑色の部分すべてがクリック可能になります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hxtra1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hxtra1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hxtra1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.hxtra1-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
/* 余白を可視化するための親エリア */
.hxtra1-bg-area {
  background-color: #fce4ec; /* ピンク色の背景でマージンを表現 */
  border: 1px dashed #d81b60;
  text-align: center;
  margin-bottom: 15px;
}

/* ❌ marginボタン */
.hxtra1-btn-margin {
  display: inline-block;
  background-color: #0d6efd;
  color: white;
  text-decoration: none;
  font-weight: bold;
  /* paddingがなくmarginだけ設定 */
  margin: 20px; 
}

/* ⭕️ paddingボタン */
.hxtra1-btn-padding {
  display: inline-block;
  background-color: #198754;
  color: white;
  text-decoration: none;
  font-weight: bold;
  /* marginはなくpaddingを設定 */
  padding: 20px 40px; 
}

.hxtra1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.5;
}
.hp-css3-code-bad { border-left: 4px solid #dc3545; }
.hp-css3-code-good { border-left: 4px solid #198754; }
.hxtra1-hl-red { color: #e06c75; font-weight: bold; }
.hxtra1-hl-green { color: #98c379; font-weight: bold; }
.hxtra1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

PDFを表示・埋め込み（iframe）する方法

パンフレットのPDFをサイト上で見せたいという場合、HTML内にPDFを表示させる技術が使われます。

一般的には、別サイトや別のファイルを枠内に読み込む<iframe src="ファイル名.pdf">や<embed>タグを使用します。

実務においてPDFを扱う場合、iframeでの埋め込みはスマホでの挙動が不安定すぎるため非推奨です。

「別タブで開くリンク」 または 「ダウンロードさせるリンク」 のボタンとして設置するのがよいです。

⚠️ iframeによる埋め込み（スマホで非表示の危険）
スマホブラウザ：
「プラグインがサポートされていません」
<iframe src=”catalog.pdf”></iframe>
⭕️ 安全な実装（リンク・ダウンロード）
📄 PDFを別タブで開く ⬇️ PDFをダウンロード
<!– 別タブで開く –>
<a href=”catalog.pdf” target=”_blank”>…</a>

<!– ダウンロードさせる –>
<a href=”catalog.pdf” download>…</a>
HTMLコード表示
<div class="hxtra2-wrapper">
  
  <div class="hxtra2-demo-area">
    
    <div class="hxtra2-box">
      <div class="hxtra2-label" style="color:#dc3545;">⚠️ iframeによる埋め込み（スマホで非表示の危険）</div>
      
      <div class="hxtra2-iframe-sim">
        <div class="hxtra2-iframe-error-text">
          スマホブラウザ：<br>「プラグインがサポートされていません」
        </div>
      </div>
      <div class="hxtra2-code hp-css3-code-bad">
        <iframe src="catalog.pdf"></iframe>
      </div>
    </div>

    <div class="hxtra2-box">
      <div class="hxtra2-label" style="color:#198754;">⭕️ 安全な実装（リンク・ダウンロード）</div>
      
      <div class="hxtra2-btn-group">
        <a href="#" class="hxtra2-btn hxtra2-btn-view" onclick="alert('別タブでPDFが開きます'); return false;">
          📄 PDFを別タブで開く
        </a>
        
        <a href="#" class="hxtra2-btn hxtra2-btn-dl" onclick="alert('PDFのダウンロードが開始されます'); return false;">
          ⬇️ PDFをダウンロード
        </a>
      </div>

      <div class="hxtra2-code hp-css3-code-good">
        <!-- 別タブで開く --><br>
        <a href="catalog.pdf" <span class="hxtra2-hl-green">target="_blank"</span>>...</a><br><br>
        <!-- ダウンロードさせる --><br>
        <a href="catalog.pdf" <span class="hxtra2-hl-green">download</span>>...</a>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hxtra2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hxtra2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hxtra2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.hxtra2-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* iframe埋め込み失敗のシミュレーション */
.hxtra2-iframe-sim {
  width: 100%;
  height: 120px;
  background-color: #e9ecef;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.hxtra2-iframe-error-text {
  color: #6c757d;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
}

/* ボタンリンク */
.hxtra2-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.hxtra2-btn {
  display: block;
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}
.hxtra2-btn-view { background-color: #0d6efd; }
.hxtra2-btn-dl { background-color: #198754; }

.hxtra2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.5;
}
.hxtra2-hl-green { color: #98c379; font-weight: bold; }

プレビュー画面でコードの表示確認する方法

HTMLやCSSを書いたら、「どんなふうに表示されるか」をブラウザでプレビュー確認する必要があります。

基本は、作成した.htmlファイルをGoogle Chromeなどのブラウザにドラッグ＆ドロップして開くだけです。

Web制作では、Visual Studio Code（VSCode）をエディタを使い、「Live Server」という拡張機能を使ってプレビューするなどあります。

📝 リアルタイムプレビュー体験

左側のHTMLコードを書き換えると、右側のプレビュー画面に即座に反映されます。

HTMLコード表示
<div class="hxtra3-wrapper">
  
  <div class="hxtra3-label">📝 リアルタイムプレビュー体験</div>
  <p class="hxtra3-desc">左側のHTMLコードを書き換えると、右側のプレビュー画面に即座に反映されます。</p>

  <div class="hxtra3-container">
    <div class="hxtra3-editor-area">
      <textarea id="hxtra3-code-input" class="hxtra3-textarea" oninput="updatePreview()">
<div style="color: blue;">こんにちは！</div>
<p>ここの文字を<strong>自由に変更</strong>してみてください。</p>
      </textarea>
    </div>
    
    <div class="hxtra3-preview-area">
      <div id="hxtra3-preview-box" class="hxtra3-preview-box"></div>
    </div>
  </div>

</div>
CSSコード表示
.hxtra3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hxtra3-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
.hxtra3-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
}
.hxtra3-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap; /* スマホなら縦並びにする */
}
.hxtra3-editor-area, .hxtra3-preview-area {
  flex: 1;
  min-width: 250px;
}
.hxtra3-textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  background-color: #282c34;
  color: #abb2bf;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
.hxtra3-preview-box {
  width: 100%;
  height: 150px;
  padding: 15px;
  background-color: #ffffff;
  border: 2px dashed #0d6efd;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: auto;
}
JavaScriptコード表示
// 初期表示と、文字入力のたびにプレビューを更新する関数
function updatePreview() {
  const code = document.getElementById('hxtra3-code-input').value;
  const previewBox = document.getElementById('hxtra3-preview-box');
  previewBox.innerHTML = code;
}
// 画面読み込み時に1回実行しておく
window.addEventListener('DOMContentLoaded', updatePreview);

preタグ（整形済みテキスト）の使い方

HTMLの中で、ソースコードやアスキーアートなどを「エディタで書いた改行や半角スペースのまま画面に表示させたい」場合があります。

通常の<p>タグだと連続するスペースは1つにまとめられ、改行は無視されます。

そこで使うのが<pre>タグです。

❌ 悪い例（タグをそのまま書いた場合）
このコードを表示させたい

※文字が赤くなってしまい、「<p>」というタグ自体は画面に表示されません。

⭕️ 良い例（特殊文字に変換した場合）
<p style="color:red;">このコードを表示させたい</p>

※「<」を「&lt;」のように書くことで、タグとして解釈されず、安全にコードを表示できます。

HTMLコード表示
<div class="hxtra4-wrapper">
  
  <div class="hxtra4-demo-area">
    
    <div class="hxtra4-box">
      <div class="hxtra4-label" style="color:#dc3545;">❌ 悪い例（タグをそのまま書いた場合）</div>
      
      <pre class="hxtra4-pre">
<p style="color:red;">このコードを表示させたい</p>
      </pre>
      <p class="hxtra4-note">※文字が赤くなってしまい、「<p>」というタグ自体は画面に表示されません。</p>
    </div>
    <div class="hxtra4-box">
      <div class="hxtra4-label" style="color:#198754;">⭕️ 良い例（特殊文字に変換した場合）</div>
      
      <pre class="hxtra4-pre">
<p style="color:red;">このコードを表示させたい</p>
      </pre>
      <p class="hxtra4-note" style="color:#198754;">※「<」を「&lt;」のように書くことで、タグとして解釈されず、安全にコードを表示できます。</p>
    </div>
  </div>
</div>
CSSコード表示
.hxtra4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hxtra4-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hxtra4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.hxtra4-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.hxtra4-pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  overflow-x: auto; /* はみ出たら横スクロール */
  margin: 0 0 10px 0;
}
.hxtra4-note { font-size: 12px; color: #666; margin: 0; line-height: 1.5; }

ページ内リンク（アンカー）の作り方とズレの調整

「トップへ戻る」ボタンや目次をクリックした時に同じページ内の特定の場所へスクロールジャンプする仕組みを「ページ内リンク」と呼びます。

作り方は、飛び先のタグにid="jump1"を設定し、リンク元のaタグを<a href="#jump1">と書くだけです。

🍔 疑似固定ヘッダー（高さ50px）

目次をクリックしてジャンプの挙動を確かめてください。

❌ 対策なしのジャンプ ⭕️ ズレ対策ありのジャンプ
（スクロール用の余白）

❌ 対策なしの飛び先（見えなくなります）

対策なしだと、枠の最上部へ移動しようとするため、高さ50pxのヘッダーに潜り込んで隠れてしまいます。

⭕️ ズレ対策ありの飛び先（綺麗に止まる）

実際の実務ではCSSの scroll-margin-top: 60px; を書くだけで綺麗に止まります。（※このデモではブログ画面全体のジャンプを防ぐため、JSでCSSの動きを再現しています）

HTMLコード表示
<div class="hxtra5-wrapper" style="position: relative; overflow: hidden;">
  
  <div class="hxtra5-fixed-header">
    🍔 疑似固定ヘッダー（高さ50px）
  </div>

  <div class="hxtra5-scroll-area" id="hxtra5-scroll-area">
    
    <div style="padding: 70px 20px 20px 20px;">
      <p style="margin-bottom: 20px;">目次をクリックしてジャンプの挙動を確かめてください。</p>
      
      <a href="javascript:void(0)" onclick="simulateJump('hxtra5-bad', 0)" class="hxtra5-link-btn" style="background-color: #dc3545;">❌ 対策なしのジャンプ</a>
      <a href="javascript:void(0)" onclick="simulateJump('hxtra5-good', 60)" class="hxtra5-link-btn" style="background-color: #198754;">⭕️ ズレ対策ありのジャンプ</a>
      
      <div style="height: 150px; background-color: #f1f3f5; margin: 20px 0; display:flex; align-items:center; justify-content:center; color:#999;">（スクロール用の余白）</div>

      <h4 id="hxtra5-bad" class="hxtra5-target hxtra5-target-bad">
        ❌ 対策なしの飛び先（見えなくなります）
      </h4>
      <p style="margin-bottom: 150px;">対策なしだと、枠の最上部へ移動しようとするため、高さ50pxのヘッダーに潜り込んで隠れてしまいます。</p>

      <h4 id="hxtra5-good" class="hxtra5-target hxtra5-target-good">
        ⭕️ ズレ対策ありの飛び先（綺麗に止まる）
      </h4>
      <p style="margin-bottom: 300px;">実際の実務ではCSSの <code>scroll-margin-top: 60px;</code> を書くだけで綺麗に止まります。（※このデモではブログ画面全体のジャンプを防ぐため、JSでCSSの動きを再現しています）</p>

    </div>
  </div>
</div>
CSSコード表示
.hxtra5-wrapper {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  height: 300px; /* シミュレーション用の枠の高さ */
}

/* 枠の中でスクロールさせる */
.hxtra5-scroll-area {
  height: 100%;
  overflow-y: scroll;
}

/* 疑似固定ヘッダー */
.hxtra5-fixed-header {
  position: absolute; /* 親枠に対する絶対配置（疑似fixed） */
  top: 0; left: 0; right: 0;
  height: 50px;
  background-color: rgba(33, 37, 41, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-weight: bold;
  z-index: 10; /* 手前に出す */
}

.hxtra5-link-btn {
  display: inline-block;
  color: white;
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.hxtra5-target {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.hxtra5-target-bad {
  background-color: #f8d7da;
  border-left: 5px solid #dc3545;
  color: #842029;
}

.hxtra5-target-good {
  background-color: #d1e7dd;
  border-left: 5px solid #198754;
  color: #0f5132;
  /* ★ここが実際のWeb制作で使うズレ対策の魔法のコード（ヘッダー50px + 余白10px） */
  scroll-margin-top: 60px;
}
</style>

<script>
  // ブログ画面全体がジャンプするのを防ぐための、シミュレーション用JS
  function simulateJump(targetId, offset) {
    const container = document.getElementById('hxtra5-scroll-area');
    const target = document.getElementById(targetId);
    
    if (container && target) {
      // offsetが0の場合は対策なし（潜り込む）、60の場合は対策あり（綺麗に止まる）を再現
      const scrollPosition = target.offsetTop - offset;
      container.scrollTo({
        top: scrollPosition,
        behavior: 'smooth'
      });
    }
  }
JavaScriptコード表示
// ブログ画面全体がジャンプするのを防ぐための、シミュレーション用JS
function simulateJump(targetId, offset) {
  const container = document.getElementById('hxtra5-scroll-area');
  const target = document.getElementById(targetId);
  
  if (container && target) {
    // offsetが0の場合は対策なし（潜り込む）、60の場合は対策あり（綺麗に止まる）を再現
    const scrollPosition = target.offsetTop - offset;
    container.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本の役割
    文章の「段落（Paragraph）」を定義するブロックレベル要素。
  • 文法ルール
    pタグの中に、他のブロック要素や別のpタグ（入れ子）を入れるのは文法違反。
  • 他タグとの違い
    pタグは「意味のある段落」、brタグは「単なる改行」、divタグは「意味を持たないレイアウト用の箱」。
  • 余白目的の使用NG
    隙間を空けるために、空の<p></p>や<br>を連打してはいけない。
  • 非推奨の属性
    <p align="center">は廃止されているため、文字の配置はtext-alignを使用する。
  • 装飾の注意点
    背景色や枠線を設定する際は、文字が張り付かないようpadding（内側の余白）をセットで指定する。
  • 行間の調整
    line-heightには「px」などの単位をつけず、「1.6」などの数値のみで指定して文字被りを防ぐ。
  • マージンの管理
    ブラウザが勝手につける上下の余白はmargin: 0;で消し、margin-bottomで下部余白だけを設定する。
  • 改行の禁止
    white-space: nowrap;で改行を禁止する場合は、はみ出しを防ぐためにoverflow: hidden;とtext-overflow: ellipsis;を併用する。
  • 強制折り返し
    長いURLなどが枠を突き抜けるのを防ぐには、overflow-wrap: break-word;を使用する。

よくある質問（FAQ）

HTMLのpタグとは何ですか？何の略ですか？

<p>は英語の「Paragraph（パラグラフ）」の頭文字をとったもので、「段落」を意味するHTMLタグです。

見出しに続く本文など、ひとまとまりの文章を定義する際に使用します。

このタグで文字を囲むことで、ブラウザやGoogleの検索エンジンに対して「ここは意味のある文章のまとまりである」と伝えられます。

pタグとbrタグの違いは何ですか？

<p>タグは「段落（意味のまとまり）」を分けるためのタグで、前後に自動的に余白が生まれます。

一方、<br>タグは同じ段落の中で「単なる改行」を行うためのタグです。

「隙間を空けたいから」という理由で<br>タグを連打するのは文法違反となります。

話題や意味の区切りが変わるなら<p>タグを新しく分け、同じ話題の中で単純に行を変えたい時だけ<br>タグを使うのが正しい使い分けです。

pタグとdivタグはどう違いますか？

<p>タグが「文章の段落」という明確な意味を持つのに対し、<div>タグは「それ自体には意味を持たない、レイアウトやグループ化の箱」です。

テキスト（文章）を囲む時は<p>タグを使用し、複数のタグ（画像や見出し、段落など）をひとまとめにして横並びにしたり、背景色をつけたりしたい時に<div>タグを使用するのがよいです。

pタグの上下の隙間（余白）を消すにはどうすればいいですか？

ブラウザは初期設定で、<p>タグの上下に約1行分の余白（マージン）を自動的につける仕様になっています。

この隙間をコントロールするには、marginプロパティを使用します。

隙間を消したい場合はp { margin: 0; }と記述します。

実務では、margin: 0;でリセットしてから、margin-bottom: 20px;のように下方向の余白だけを指定してレイアウトを整えるのが一般的です。

pタグの中に、さらにpタグやdivタグを入れても大丈夫ですか？

いいえ、重大な文法違反（NG）となります。

HTMLのルールとして、<p>タグの中には <div>、<ul>、そして別の<p>タグなどの「ブロックレベル要素」を入れることはできません。

誤って入れてしまうと、ブラウザが裏側でタグをバラバラに分割してしまい、デザインが崩れる原因になります。

文字の一部だけを装飾したい場合は、インライン要素である<span>タグを使用してください。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次