html5 ブロック要素とインライン要素を理解する
htmlの要素には大きく分けてブロック要素とインライン要素があります。今回はこの２つの要素の違いについて説明します。
例えば以下のhtmlで、トマトについての説明の箇所の背景色を赤、ピーマンについての説明の箇所の背景色を緑に変更する場合は、どのようにすればいいでしょうか？
<h1>栄養のある野菜の紹介</h1>
<p>栄養のある野菜の紹介をします。</p>
<h2>トマト</h2>
<h3>特徴</h3>
<p>栄養がいっぱいです！</p>
<h3>色</h3>
<p>とっても赤いです！</p>
<h2>ピーマン</h2>
<h3>特徴</h3>
<p>栄養がいっぱいです！</p>
<h3>色</h3>
<p>とっても緑です！</p>背景色/background-color
背景色を設定するにはbackground-colorを設定します。今回のテーマとは外れてしまうので、詳しい使い方は別ページで説明します。
トマトについては赤、ピーマンについては緑にスタイルを設定します。しかし、このやり方だとうまくいきません。
<h1>栄養のある野菜の紹介</h1>
<p>栄養のある野菜の紹介をします。</p>
<h2 style="background-color:red;">トマト</h2>
<h3 style="background-color:red;">特徴</h3>
<p style="background-color:red;">栄養がいっぱいです！</p>
<h3 style="background-color:red;">色</h3>
<p style="background-color:red;">とっても赤いです！</p>
<h2 style="background-color:green;">ピーマン</h2>
<h3 style="background-color:green;">特徴</h3>
<p style="background-color:green;">栄養がいっぱいです！</p>
<h3 style="background-color:green;">色</h3>
<p style="background-color:green;">とっても緑です！</p>要素ごとの背景色は変更できているのですが、要素と要素の間については色が反映されません。
ブロック要素
以下のように、ブロック要素でひとまとまりにして、スタイルを設定します。
<h1>栄養のある野菜の紹介</h1>
<p>栄養のある野菜の紹介をします。</p>
<div style="background-color:red;">
<h2>トマト</h2>
<h3>特徴</h3>
<p>栄養がいっぱいです！</p>
<h3>色</h3>
<p>とっても赤いです！</p>
</div>
<div style="background-color:green;">
<h2>ピーマン</h2>
<h3>特徴</h3>
<p>栄養がいっぱいです！<p>
<h3>色</h3>
<p>とっても緑です！</p>
</div>上記のように複数の要素をひとまとまりにする要素をブロック要素と呼びます。 ブロック要素の中にブロック要素を入れることもできます。h1〜h6やpもブロック要素です。
特徴
上の例では、横幅を特に指定していないのですが、画面いっぱいに背景色が表示されています。ブロック要素は横幅いっぱいに表示され、自動的に改行されます。
pについての注意点
pはブロック要素ですが、他のブロック要素と異なり、pの中にブロック要素を入れることができませんので、注意が必要です。
インライン要素
インライン要素は、単体でも使用できますが、ブロック要素の中に定義されることが多いです。 以下のように、ブロック要素の中の文章の一部のスタイルを変更したい場合にインライン要素を使用します。
<div style="background-color:red;">
ブロック要素です。<span style="color:yellow;">これがインライン要素です。</span>
</div>これをブロック要素で定義してしまうと、改行されてしまい、うまくいきません。
<div style="background-color:red;">
ブロック要素です。<div style="background-color:yellow;">これがインライン要素です。</div>
</div>まとめ
表示領域を指定するのがブロック要素で、表示領域の中の個々の要素がインライン要素という考え方で問題ないと思います。 今回はブロック要素にはdiv、インライン要素をにはspanを使用しました。他にもいろいろな要素がありますが、この紹介は他ページで紹介します。