html5 ブロック要素とインライン要素を理解する

htmlの要素には大きく分けてブロック要素とインライン要素があります。今回はこの2つの要素の違いについて説明します。

例えば以下の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を使用しました。他にもいろいろな要素がありますが、この紹介は他ページで紹介します。


関連記事

  • html5 canvasの多角形の描画方法とパスの基本的な考え方

    多角形を描画するためには、起点となる座標だけでなく、各頂点の座標もすべて指定する必要があります。各頂点の座標を指定し、指定した順番に頂点同士を線でつないでいけば多角形を描画することができます。考え方と...


  • canvasでグラデーションを表現する

    線形グラデーションを使う場合はまずこの関数を使用して、グラデーションのオブジェクトを作成します。グラデーションを描画するという関数ではなく、グラデーションを定義する関数ですので、この関数を実行しただけ...


  • html5 canvasで色の指定と四角形の描画

    今回から実際に図形を描画していく方法を紹介します。最初はおそらく一番シンプルな関数である四角形を描画する関数の使い方を紹介します。図形を描画する関数を呼ぶ前に、スタイルを指定することによって、色をつけ...


  • html5 marginとpaddingで余白を設定する

    htmlで余白の設定をするときは、marginとpaddingのスタイルを使用します。要素と要素の間の余白を設定する場合はmarginを使用します。paddingは要素の内側の余白を設定します。


  • canvasのアニメーションで軌跡・残像・フェードアウトを表現する

    アニメーションを応用し軌跡や残像を残したり。フェードアウトする方法を紹介します。軌跡を残すためにはクリアする処理をなくす必要があります。クリアをしなければ、前回描画した状態に対して追記する形になるため...


  • cssで三角形を表示する方法

    画像を使わずに、cssでスタイルを指定するだけで三角形を表示させる方法を紹介します。三角形を表示させるにはborder(枠線)を使用します。縦と横が重なる部分は、どちらかのスタイル(青か赤)を優先させ...


  • html5 classを使って同じstyleをまとめる

    以下のように、同じスタイルを複数の箇所に記載しているときは、classを使えば同じスタイルを1箇所にまとめることができます。クラスはhtmlのhead部分に記載します。スタイルタグを記載し、その中に先...


  • html5 ブロック要素とインライン要素を理解する

    htmlの要素には大きく分けてブロック要素とインライン要素があります。インライン要素で指定すると、要素ごとの背景色は変更できているのですが、要素と要素の間については色が反映されません。ブロック要素でひ...


  • html5 ボーダーのスタイルで罫線を表示する

    罫線を引いて、より見た目をわかりやすくする方法を紹介します。ボーダーにはスタイル、色、太さなどの項目を設定する必要があります。


  • pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法

    段落と見出しを表示して、読みやすい文章のレイアウトを表現する方法を紹介します。作文などで文章を書くときは、文の区切りには段落を入れて読みやすくすることがあります。htmlでも段落を意味するタグがありま...