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のスタイルを使用します。例えば、以下のように色を分けて表示しても、要素どうしがくっついてしまい、わかりづらくなってしまいますので、余白を設...


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

    スタイルを各要素の中にたくさん書くとわかりづらくなってしまいます。以下のように、同じスタイルを複数の箇所に記載しているときは、classを使えば同じスタイルを1箇所にまとめることができます。クラスはh...


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

    pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法は段落と見出しを表示して、見た目をわかりやすくしました。今回は罫線を引いて、より見た目をわかりやすくする方法を紹介します。文字色を変える...


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

    前回ホームページ入門・初心者向け html5の基本的な文法までで、htmlをブラウザで表示することができるようになりました。今回からは、実際にhtmlでのいろいろな表現方法を紹介していき、最終的にはき...


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

    前回初めてのホームページ作成のためのhtmlの基本でホームページの作成にあたって、「htmlとは何か?」ということを説明しました。今回は、実際にhtmlをどのように書いていくのか説明します。※この記事...


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

    プログラミングの経験もなく、初めてホームページを作成しようと考えている人に向けて、htmlの基本を数回に分けて説明します。予備知識としてホームページの基本的な仕組みと考え方でホームページの基本的な仕組...


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

    画像を使わずに、cssでスタイルを指定するだけで三角形を表示させる方法を紹介します。三角形を表示させるにはborder(枠線)を使用します。なぜborderで三角形を作れるのか、まずはその説明をします...


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

    javascriptを使わず、cssだけでマウスホバー時に、バルーンポップアップを表示させる方法を紹介します。完成形は以下のようなイメージです。最初に完成形のcssを記載します。cssはjavascr...


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

    canvasのアニメーションで軌跡・残像・フェードアウトを表現するまではいろいろな図形を描画したり、描画した図形を動かしてアニメーションを表現する方法を紹介しました。今回は単色だけでなく、グラデーショ...


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

    前回canvasのアニメーションの基本的な考え方でcanvasで簡単なアニメーションを表現する方法を紹介しました。今回はアニメーションを応用し軌跡や残像を残したり。フェードアウトする方法を紹介します。...