HTMLのpタグとは？改行・block要素・brタグの違いをわかりやすく解説【Claude Code活用】
aikanri-admin
この記事の内容
「Webページを作ってほしい」「この文章をHTMLで整形して」——Claude Codeにこういった指示を出す時、「pタグ」「改行」「余白」の使い方を知っているかどうかで指示の精度が大きく変わります。
HTMLのpタグは「段落（paragraph）を表す最も基本的なHTML要素」の一つです。Wordで「段落」と「改行」が別の概念であるのと同様、HTMLでも「段落（pタグ）」と「改行（brタグ）」は別物です。
この記事では、pタグの定義・block要素との関係・brタグとの違い・CSSでの余白調整・そしてClaude Codeへの指示に役立てる方法まで整理します。
代表菅澤
AI鬼管理山崎
この記事で得られること:
01 P TAG BASICS HTMLのpタグとは——「段落（paragraph）」を表すHTML要素 pタグ = テキストを段落として囲む最も基本的なHTML要素
pタグ（<p>タグ）は、HTMLで「段落（paragraph）」を表す要素です。文章を意味的にまとまりのある段落として区切るために使います。
📚 用語解説
pタグ（paragraph tag）：HTMLの段落要素。<p>から始まり</p>で終わる。テキストの意味的なまとまり（段落）を表す。ブラウザはpタグを自動的に「上下に余白を持つブロック」として表示する。見た目上は改行されるが、これはpタグが「block要素（縦に並ぶ要素）」だからであり、改行のためではなく「段落区切り」のために使う。
| HTML記述 | ブラウザでの表示結果 |
|---|---|
| <p>1段落目</p><p>2段落目</p> | 1段落目と2段落目の間に自動的に余白が入って縦に並ぶ |
| <p>テキスト<br>改行</p> | pタグ内でbrタグにより改行（段落間の余白は入らない） |
| テキストのみ（タグなし） | HTMLでは連続するスペース・改行は1スペースになる |
pタグの基本的な使い方の例:
<p>これが1つ目の段落です。pタグで囲まれた文章は段落として扱われます。</p>
<p>これが2つ目の段落です。pタグが変わると自動的に余白が入って区切られます。</p>
02 BLOCK ELEMENT pタグは「block要素」——改行が自動で入る理由 block要素は「縦に並ぶ」性質を持つ。pタグはblock要素の代表例
pタグを使うと自動的に前後に改行・余白が入るのは、pタグが「block要素」だからです。
📚 用語解説
block要素（ブロックレベル要素）：HTMLの要素の表示形式の一つ。block要素は「横幅いっぱいに広がり、縦に並ぶ」性質を持つ。前後に自動的に改行が入る。代表的なblock要素：<p>（段落）・<div>（汎用ブロック）・<h1>〜<h6>（見出し）・<ul>・<ol>・<li>（リスト）・<blockquote>（引用）。CSSで display: block; と設定することでblock要素になる。
| 特徴 | block要素 | inline要素 |
|---|---|---|
| 並び方 | 縦に並ぶ（前後に自動改行） | 横に並ぶ（同じ行に複数配置） |
| 幅 | 親要素の横幅いっぱい | コンテンツの幅のみ |
| width/height設定 | CSSで設定できる | できない（inline要素は無視される） |
| 代表例 | p・div・h1〜h6・ul・ol・li | span・a・strong・em・img |
03 DISPLAY TYPES block・inline・inline-blockの3種類を整理する HTMLの表示形式3種類を理解するとレイアウトの仕組みが分かる
HTMLの要素の表示形式は「block」「inline」「inline-block」の3種類に大別されます。
縦に並ぶ
幅いっぱいに広がる
（p・div・h1等）
横に並ぶ
コンテンツ幅のみ
（span・a・strong等）
横に並びながら
幅・高さ設定可
（img・button等）
| 表示形式 | 並び方 | 幅・高さ設定 | 代表的なタグ | 実際のレイアウト例 |
|---|---|---|---|---|
| block | 縦（前後に自動改行） | できる | p・div・h1・ul・li | 段落・セクション・リスト |
| inline | 横（改行なし） | できない | span・a・strong・em | 文中の強調・リンク |
| inline-block | 横（改行なし） | できる | img・button・input | 画像・ボタン・入力フォーム |
📚 用語解説
inline要素（インラインレベル要素）：HTMLの要素の表示形式の一つ。「横に並ぶ」性質を持ち、前後に自動改行が入らない。文章の一部として使われることが多い。代表例：<span>（汎用インライン）・<a>（リンク）・<strong>（強調・太字）・<em>（斜体）。inline要素にはwidthやheightを設定できない（設定しても無視される）。
📚 用語解説
inline-block要素：block要素とinline要素の中間的な表示形式。「横に並ぶ（inlineの特徴）」かつ「幅・高さが設定できる（blockの特徴）」を持つ。代表例：<img>（画像）・<button>（ボタン）・<input>（入力フィールド）。CSSで display: inline-block; と設定することで任意の要素をinline-blockにできる。
04 BR VS P brタグとpタグの違い——「改行」か「段落区切り」か brは「1行改行」pは「段落区切り（上下余白あり）」の意味的な違い
pタグとbrタグは、どちらも「改行」に見えますが、意味的・視覚的に異なります。
| 比較項目 | <br>タグ | <p>タグ |
|---|---|---|
| 意味 | 強制改行（line break） | 段落の区切り（paragraph） |
| 上下の余白 | 入らない | 自動的に余白が入る（ブラウザデフォルト） |
| 閉じタグ | 不要（単独で使う） | 必要（</p>で閉じる） |
| 使い方 | 文章内の任意の位置で改行したい時 | 段落の区切りに使う（Wordの段落分けと同じ） |
| 多用の推奨度 | 推奨されない（CSS余白で代用を） | 正しい意味で段落ごとに使う |
「段落間に余白を入れたい」という理由でbrタグを連続使用（<br><br>等）することは推奨されません。余白はCSSのmarginで調整するのが正しいHTMLの書き方です。Claude Codeに「brタグで余白を入れて」と指示すると、HTMLの品質が下がるコードが生成されることがあります。「p要素を使い、段落間の余白はCSSで調整して」と指示するとより正確なコードが得られます。
Wordでの操作とHTMLの対応関係:
| Wordでの操作 | HTMLでの対応 | 正しい使い方 |
|---|---|---|
| Enterキー（段落分け） | pタグで区切る | <p>段落1</p><p>段落2</p> |
| Shift+Enter（行内改行） | brタグ | pタグ内で <br> を使う |
| 段落間の余白を増やす | CSSのmarginで調整 | p { margin-bottom: 20px; } |
05 CSS MARGIN 段落間の余白はCSSのmarginで調整する 「余白を増やしたい」はbrタグではなくCSSのmarginが正解
pタグで段落を区切った場合、段落間の余白はCSSの「margin（マージン）」プロパティで調整します。
📚 用語解説
CSSマージン（margin）：HTML要素の外側の余白を指定するCSSプロパティ。margin-top（上余白）・margin-bottom（下余白）・margin-left（左余白）・margin-right（右余白）を個別に設定できる。ブラウザのデフォルトではpタグに上下のmarginが設定されており、これが段落間の余白として表示される。margin: 0; で余白をゼロにしたり、margin-bottom: 24px; のように具体的な余白値を設定したりして見た目を調整する。
/* CSSでpタグの余白を調整する例 */
p {
margin-top: 0;
margin-bottom: 20px; /* 段落の下に20pxの余白 */
line-height: 1.8; /* 行間を1.8倍に */
}
| 調整したい内容 | CSSの書き方 | 意味 |
|---|---|---|
| 段落の下に余白を追加 | p { margin-bottom: 20px; } | 各pタグの下に20pxの余白 |
| 段落の上下に同じ余白 | p { margin: 16px 0; } | 上16px・左右0・下16px |
| 段落の余白をゼロに | p { margin: 0; } | ブラウザデフォルトの余白を消す |
| 行間（行の高さ）を調整 | p { line-height: 1.8; } | 文字サイズの1.8倍の行間 |
| フォントサイズ変更 | p { font-size: 16px; } | 16pxのフォントサイズ |
を調整したい
✖ 非推奨
+ CSS margin調整
✔ 正しい方法
06 CLAUDE CODE HTML Claude Codeへの指示精度を上げるHTML知識の使い方 「pタグ・brタグ・margin」を知っているとClaude Codeへの指示が劇的に改善
Claude CodeにWebページのHTML/CSSを生成させる際、HTML基礎知識があると指示の精度が大幅に向上します。
| HTML知識なしの指示 | HTML知識ありの指示 | 違い |
|---|---|---|
| 「段落の間にスペースを入れて」 | 「pタグで段落を区切り、margin-bottomを24pxに設定して」 | 曖昧→明確、brタグ多用を防ぐ |
| 「文章を2行に分けて」 | 「1つのpタグ内でbrタグを使って改行して」 | 段落区切りではなく行内改行と明示 |
| 「赤い文字にして」 | 「この部分をstrongタグで囲みCSSでcolor: #dc2626;を設定して」 | 具体的なタグ・CSSを指定 |
| 「もっと見やすくして」 | 「段落のline-heightを1.8にして余白を16px設定して」 | 抽象→定量的な指示 |
AI鬼管理山崎
Claude Codeは「セマンティックなHTML（意味のある適切なタグ）を使って」と指示するだけで、pタグで段落を区切り、h2/h3で見出しを作り、brタグを多用しない正しいHTMLを生成します。さらに「段落間はCSSのmarginで調整して、brタグで余白を作らないで」と加えると、よりクリーンなコードが得られます。
07 CONCLUSION まとめ｜pタグの理解がHTML全体の基礎になる pタグ → block要素 → inline要素の理解でHTMLの仕組みが分かる
pタグとblock要素を理解すると、HTML全体の「なぜ前後に余白が入るのか」「なぜ横に並ばないのか」という疑問が一気に解消されます。非エンジニアでもHTMLの基礎5つを知っておくと、Claude Codeへの指示の質が劇的に向上します。
HTML/CSSをClaude Codeで生成・改修するならAI鬼管理
「Webページを作りたいがHTMLが分からない」「既存のページをClaude Codeで改修したい」——AI鬼管理（Claude Code）を活用したWebページの作成・改修・自動化をサポートします。
代表菅澤
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. pタグの中にpタグを入れることはできますか？
A. できません。HTMLの仕様ではpタグはblock要素を子要素に持てないため、pタグの中にpタグを入れるのは無効なHTMLです。段落の中に段落を作りたい場合は、外側にdivタグを使い、その中にpタグを入れる形にします。
Q. pタグをCSSで横並びにすることはできますか？
A. できます。pタグはデフォルトでblock要素（縦並び）ですが、CSSで display: inline-block; または display: flex; などを設定することで横並びにできます。ただし、pタグを横並びにする場合は、目的に応じてdivタグやspanタグの使用も検討してください。
Q. WordPressでpタグが自動的に挿入される場合どうすればよいですか？
A. WordPressの標準エディタ（Gutenberg・クラシックエディタ）は、入力時に自動的にpタグを挿入する機能があります。brタグで改行してもpタグに変換されることがあります。HTML直接編集の場合は「コードエディタ」モードに切り替えて編集することで、意図したタグを使えます。
Q. pタグのデフォルトのmarginを変えたい場合は？
A. CSSで p { margin: 0; } を指定するとブラウザデフォルトの余白をゼロにできます。その後、必要な余白を p { margin-bottom: 20px; } のように個別に設定します。リセットCSSやnormalize.cssを使うと、ブラウザによる差異を均一化してから独自のスタイルを当てられます。
Q. Claude CodeにHTMLを生成させる際の最適な指示の仕方は？
A. 「セマンティックなHTML5を使って」「見出しはh2/h3を使い、段落はpタグで区切る」「余白はCSSのmarginで調整し、brタグで余白を作らない」という指示を加えると品質の高いHTMLが生成されます。さらに「インラインスタイルは使わず、classを使ったCSSで記述して」と加えると保守性の高いコードになります。
Q. HTML・CSSの初心者がまず覚えるべきタグは何ですか？
A. 最優先で覚えるべきタグは「h1〜h3（見出し）」「p（段落）」「div（ブロック）」「span（インライン）」「a（リンク）」「img（画像）」「ul/li（リスト）」の7つです。次にCSSの「color・font-size・margin・padding・display・flex」の6つです。これらを理解するとWebページの大半が読めるようになります。
Q. pタグとdivタグの違いは何ですか？
A. 両方ともblock要素ですが、意味が異なります。pタグは「テキストの段落」を表す意味的な要素です。divタグは「汎用のブロック」で意味を持ちません。テキストの段落はpタグを、レイアウト目的のグループはdivタグを使うのが正しいHTMLです。Claude Codeに「意味のあるHTMLで」と指示すると、この使い分けを自動的に行ってくれます。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
