HTML要素 ・ 見出し・文章
<p>
段落
文章のひとまとまり（段落）を表す、最もよく使う要素のひとつです。段落ごとに p で囲みます。
01
サンプルコード
HTML
1<p>HTMLは文書の構造をつくる言語です。</p>
2<p>CSSは色や余白など、見た目を整える言語です。
3両方を組み合わせてWebページをつくります。</p>
CSS
1p {
2 line-height: 1.8;
3 margin: 0 0 1em;
4}
02
実行結果
ブラウザでの表示
03
解説
p は "paragraph"（段落）の略です。意味のまとまりごとに p で囲むと、段落の間に自動で余白が入ります。
HTMLではソースコード上の改行は表示に反映されず、空白1つ分として扱われます。段落を分けたいときは、新しい p を書きます。
p の中には文章や strong・a などのインライン要素を入れます。見出しやリスト、別の p は入れられません。
04
応用例・注意点
よく指定するCSS
| プロパティ | 説明 |
|---|---|
line-height | 行の高さ。日本語は1.7〜2程度が読みやすい |
margin | 段落間の余白 |
text-align | 行揃え |
max-width | 1行の長さを制限して読みやすくする |
読みやすい本文をつくる
1行の文字数を抑え、行間を広めにとると長文が読みやすくなります。
CSS
1p {
2 max-width: 40em;
3 line-height: 1.9;
4 margin-bottom: 1.2em;
5}
注意点
- 01余白をつくる目的で空の p（<p></p>）を並べないでください。余白は margin で指定します。
- 02p の中に div や見出しなどのブロック要素は入れられません。