ブロックレベル要素とインライン要素

HTMLとCSSの入門10講座

HTMLタグは、大きく分けてブロックレベル要素とインライン要素の２種類があります。この理解はスタイルシートでタグにデザインを加えていく上でとても重要です。

実際、ブロックレベル要素とインライン要素の２種類のHTMLタグを使ってみます。

<p>タグはテキスト文章などで段落をつけるときに囲います。このページでも使われています。長い文章で、改行や段落がまったくないホームページは読みづらいですから、文章を書くときは<p>タグで段落をつけましょう。<strong>タグは太字強調のタグです。

<p>HTMLタグには、<strong>ブロックレベル要素</strong>と<strong>インライン要素</strong>の２種類のHTMLタグがあります。</p>

HTMLタグには、ブロックレベル要素とインライン要素の２種類のHTMLタグがあります。

上記のタグのうち、<p>タグがブロックレベル要素で、<strong>がインライン要素です。（※分かりやすくするため、各タグに背景色を設定してあります。）

ブロックレベル要素とインライン要素の決定的な違いは、そのタグが１行分の幅全部に作用するか、それとも１行の中のある一箇所だけに作用するものなのかの違いです。

<p>タグは文章が終わったあとも横幅いっぱいに背景色がついています。この行全体がPタグで埋められていることを意味し、ブロックレベル要素です。行をブロックしてしまうわけです。

<strong>タグは、行の中の一部分だけを強調していますよね。文字通り、インライン（inline＝行の中）要素となり、使うときは必ずブロック要素の中で使います。

ダメ→　<strong><p>スタイルシートの説明</p></strong> (インラインで始まっている)
ＯＫ→　<p><strong>スタイルシートの説明</strong></p> (ブロックレベルで始まっている)

今後タグを使うときは、そのHTMLタグがブロックレベル要素なのか、インラインなのかを気にする癖をつけましょう。

  1. ブロックレベル要素行幅いっぱいに作用するタグ。段落<p>、テーブル<table>、見出し<h1> <h2> <h3>…など。
  2. インライン要素行幅の中の一部にだけ作用するタグ。太字<strong>、リンク<a>、画像<img>など。
  3. インライン要素は、ブロックレベル要素の中で使う