Subject   : ブロック要素とインライン要素

カテゴリー  : Home page



ブロック要素とインライン要素

 HTML を書いていると,開始タグと終了タグを指定し,要素を作ったときに

  • 前後に改行がはさまれるもの
  • 改行をはさむことなくそのまま続くもの

の 2 種類があることに気づくと思います。前者はブロック要素(前後を改行して“かたまり”をつくる),後者はインライン要素(行中にそのまま続いていく)といいます。

HTML では本文中にブロック要素が並べられ、その中にインライン要素を記述するという構造を持っています。ですからブロック要素はインライン要素をまとめるより大きな単位であるということができます。

 おもな要素をブロック要素とインライン要素に分けてみましょう。

ブロック要素 インライン要素
段落<P> 太字<B>
見出し<Hn> 斜体<I>
順序なし箇条書き<UL> 強調<EM>
順序あり箇条書き<OL> 強い強調<STRONG>
引用<BLOCKQUOTE> 文中での引用<Q>
水平線<HR> 画像<IMG>
表作成<TABLE> 添え字や肩字<SUB>など
整形済み表示<PRE> 特定の意味を
持たない要素
<SPAN>

 <DIV> はブロックで、 <SPAN> はインラインで、スタイルの適用範囲を定める。

  • 文書中の(改行で区切られた)ある“まとまり”全体にスタイルを適用するのが <DIV>
  • 文章中のある部分にスタイルを適用するのが <SPAN>
を使い分ける必要があります。

<P> はその中にブロック要素を含んではいけません。<P> はあくまで文を書くためのブロック要素であり、たとえば,<P>...</P> の中に、<Hn> で見出しを作ったり,<HR> で水平線を引いてはいけないのです。一方、<DIV><LI>などはブロック要素のなかにさらにブロック要素を書くことができます。


   ⇒ 簡単な使用例があります。
   ⇒ font-size: フォントの大きさ
   ⇒ スタイルシートの記述ルール

[メニューへ戻る]  [HOMEへ戻る]  [前のページに戻る]