基礎8. p要素、br要素-段落と改行を設定する

HTML・CSS

この記事をシェアする：

p要素

ブロックレベルの要素です。
display: block;が初期値です。
テキスト、文章のまとまりを「段落（paragraph）」と言います。
段落は、文章のどこで区切らなといけないという決まりはありません。そのため、どこまでを段落と捉えるかは、自身で考える必要があります。

入れ子にできるのは、テキストまたは、インラインの要素(a, img, spanなど)、改行（br）のみです。
divタグなどは、子要素として指定できません。
下記は、誤った段落タグの入れ子です


<p>
  </p><div>誤った入れ子</div>

pタグは、文章のまとまりという意味づけになります。
そのため、改行目的で使用してしまうと、それぞれを別の文章（段落）として検索サイトが解釈してしまいます。
改行は、後述するbrタグを使います。
下記は、改行目的でpタグを使用したため、段落として成立していません。


<p>段落は、文章やテキストを</p>
<p>まとめたものです。</p>
<p>改行目的で使用しては</p>
<p>いけません。</p>

上記のような場合は、下記のようにbrタグを使って改行します。


<p>段落は、文章やテキストを
<br>まとめたものです。
<br>改行目的で使用しては
<br>いけません。</p>

初期値では、pタグで文章を区切ると下に余白ができます。
ですが、余白を空けたいというだけで、pタグを使用してはいけません。
余白は、CSSのmargin, paddingで調整できます。

文章を改行（line break）させる要素です。この要素に意味付けはありません。
開始タグのみで終了タグはありません。
pタグと違い、brタグを使用して改行しても、検索サイトは別の文章とは解釈しません。

brタグは、タグ内のテキストまたはインライン要素の改行に使用するもので、タグ間の余白のために使用してはいけません。
タグ間の余白は、、CSSのmarginで調整します。
下記は、タグ間の余白にbrタグを使った誤った使い方です。


<p>brタグは、テキストの改行に使用します。</p>
<br>
<p>タグ間の余白のために使用してはいけません。</p>

display: none;をbrタグに指定することで、改行を解除することができます。
レスポンシブサイトで、よく使われるテクニックです。
逆に改行を有効にする場合は、display: inline;を指定します。


<h2>見出し2-<br>サブタイトル-</h2>


/* モバイルサイトは、brを無効化 */
h2 br{ display: none; }

/* PCサイトでは、brを有効化 */
@media only screen and (min-width: 768px), print{
  h2 br{ display: inline; }
}

下記のbase-html01.zipをダウンロードして、実際に記述してみましょう。
base-html01.zip