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 marginとpaddingで余白を設定する

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


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

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


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

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


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

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


  • ホームページ入門・初心者向け html5の基本的な文法

    日本語や英語に文法があるように、htmlにも文法があります。文法を正しく記述しなければ、ブラウザが理解できずに正しく表示できなくなります。ブラウザには「このファイルの内容はhtmlで記載されています」...


  • 初めてのホームページ作成のためのhtmlの基本

    プログラミングの経験もなく、初めてホームページを作成しようと考えている人に向けて、htmlの基本を数回に分けて説明します。htmlとはウェブブラウザにどのようにホームページを表示させるのか理解させるた...


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

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


  • cssだけでホバー時にバルーンポップアップを表示させる

    javascriptを使わず、cssだけでマウスホバー時に、バルーンポップアップを表示させる方法を紹介します。cssはjavascriptと違い、イベントを定義できませんが、擬似クラスという機能が用意...


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

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


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

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