HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 基礎8. p要素、br要素-段落と改行を設定する

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

  1. 公開日:2016年03月21日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

p要素

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

段落タグの注意点

段落タグの入れ子

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


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

改行目的に使わない

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


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

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


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

文章間の余白目的で使わない

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

br要素

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

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

まとめ

  • p要素は段落に使用する
  • pタグを改行や余白を空けるために使用してはいけない
  • br要素はテキストが改行される
  • brタグを他の要素の区切りに使用してはいけない。