HTML要素のブロックレベルとインラインレベルの違いを理解する
CSSでレイアウトを調整しようとした時、思うように反映されない場合があります。その原因は様々ですが、次の2点もその中に含まれます。
- ブロックレベルとインラインレベルの性質を理解していない。
- ブロックレベルの要素とインラインレベルの要素、それぞれどのようにCSSを書くべきかが間違っている。
ここでは、ブロックレベルとインラインレベル、それぞれどんな特徴があるか、どんな違いがあるかを理解します。
特徴を理解した後、CSSではどのように書けば良いか、注意しないといけないパターンを例にあげて解説します。
ブロックレベルとインラインレベルの違い
HTML要素の多くは、ブロックレベルの要素とインラインレベルの要素に分かれます。
両者の違いは次の2点です。
- ウェブページでの表示のされ方
- 要素を配置する時のルール
違いその1 ウェブページでの表示のされ方
ブロックレベルの要素を使った場合とインラインレベルの要素を使った場合では、ウェブページでの表示のされ方が変わります。
ブロックレベルの表示のされ方
ブロックレベルの要素とは、文字通り、その要素で囲んだコンテンツは1つのブロックとして扱われます。どいういうことか。
ブロックレベルの要素にある、段落の役割をする pタグを例にあげます。ある2つの文章を、次のように pタグでマークアップしたとします。
<p>HTMLを学習する。</p>
<p>同時にCSSも学習する。</p>
この場合、それぞれの文章が1つのブロックとして扱われるので、次のように行が分かれて表示されます。
HTMLを学習する。
同時にCSSも学習する。
このように文章としては、要素の前後に改行が入った状態で表示されます。それが、1つのブロックとして扱う、ということです。
pタグでマークアップしたコンテンツが、実際どのように表示されているのか、CSSを使って pタグに背景色をつけてみます。
HTMLを学習する。
同時にCSSも学習する。
ブロックレベルの要素で囲んだコンテンツは、横幅いっぱいに広がって表示されます。これが、1つのブロックとして扱われるということです。
インラインレベルの表示のされ方
インラインレベルの要素で囲まれたコンテンツは、行の一部として扱われます。
例として先ほどの2つの文章を、インラインレベルの要素である spanタグで囲みます。
<span>HTMLを学習する。</span>
<span>同時にCSSも学習する。</span>
この場合、次のように表示されます。
HTMLを学習する。同時にCSSも学習する。
インラインレベルの要素で囲まれたコンテンツは、このように前後に改行が入らない表示になり、文章などといったコンテンツの、中の一部分として扱われます。
わかりやすく spanタグで囲んだコンテンツに背景色をつけてみます。
HTMLを学習する。同時にCSSも学習する。
ブロック要素とインライン要素を合わせて使うと
pタグで囲んだ文章の中の一部を spanタグで囲みます。
<p><span>HTML</span>を学習する。</p>
<p>同時に<span>CSS</span>も学習する。</p>
これは次のように表示されます。（インラインレベルの表示のされ方をわかりやすくする為に span要素に背景色をつけます。）
HTMLを学習する。
同時にCSSも学習する。
それぞれの文章はブロック要素の pタグで囲んでますので、それぞれ1つのブロックとして改行されて表示されます。インライン要素の spanタグで囲んだ言葉は、文章の中の一部分として扱われます。
これが、ブロックレベル要素とインラインレベル要素の挙動の違いです。
違いその2 要素を配置する時のルール
HTMLを書く時、要素の中に要素を配置するといった形で、親子関係で記述することがよくあります。
親子関係で記述する時、その配置ができるかどうかは、要素がブロックレベルなのかインラインレベルなのかによります。
子要素として他の要素を配置する際の注意点は2点です。
- ブロックレベルの要素の中に配置できるのは、ブロックレベルとインラインレベルの両方。
- インラインレベルの要素の中に配置できるのは、インラインレベルの要素のみ。
インラインレベルの要素の中にブロックレベルの要素を配置することができないという点に注意です。（間違った配置は文法エラーです。）
<p><span>この配置は可能です。</span></p>
インラインレベルである spanタグを、ブロックレベルである pタグの中に配置することはできます。
<div>
<p>この配置は可能です。</p>
</div>
ブロックレベルである pタグを、ブロックレベルである divタグの中に配置することはできます。
<span><strong>この配置は可能です。</strong></span>
インラインレベルである spanタグの中に、インラインレベルである strongタグを配置することはできます。
<span><p>これは文法エラーです。</p></span>
インラインレベルである spanタグの中に、ブロックレベルである pタグを配置することはできません。
まとめ
まとめると次の4点になります。
- ブロックレベルの要素で囲んだコンテンツは、画面いっぱいに広がったコンテンツになる。
- インラインレベルの要素で囲んだコンテンツは、親要素のコンテンツの中の一部になる。
- ブロックレベルの中には、ブロックレベルとインラインレベルの両方を配置できる。
- インラインレベルの中にブロックレベルを配置することはできない。