お電話
ホームページのご相談・お見積り

スタッフブログ

36 ボックスの3つの種類

2014/04/18 HTML

ボックスの3つの種類

part35で説明したように、HTMLの要素はそれぞれ自分のボックスを持っているのですが、そのボックスには主に3つの種類があります。ブロックボックスインラインボックスリストボックスです。Webページをデザインしていくには、この3つのボックスの違いを理解する必要があります。それでは、順番に説明していきます。

ブロックボックス

「ブロックボックス」とは、その名のとおり、四角形のボックスの事です。HTMLの要素の中で、ブロックボックスを構成するのは以下の要素です。

  • h1〜h6要素(見出し)
  • p要素(段落)
  • table要素(表)
  • ul要素、ol要素(箇条書き)
  • div要素(要素のグループ化)

ブロックボックスは、ブロックボックスを構成する要素の「親要素の内容の幅いっぱいに広がって表示される」といった特徴があります。これはブロックボックスの多い少ないに関わらず、親要素の幅いっぱいに広がって表示されます。なので、ブロックボックスを構成する要素同士は左右に並ばずに上から下へと配置されていく事になります。ちなみにブロックボックスは幅を自由に変更する事も出来ます。これは、後ほど説明します。

インラインボックス

「インラインボックス」とは、「要素の内容に合わせた高さと幅で構成されるボックス」のことです。つまり、heightプロパティやwidthプロパティでボックスの高さや幅を変更する事が出来ません。ここまでで説明してきた要素のうち以下の要素がインラインボックスを構成しています。

  • a要素(リンク)
  • em要素(強調)、strong要素(重要な箇所)、small要素(補足)
  • span要素(特定範囲のグループ化)

リストボックス

「リストボックス」とは、li要素(箇条書きの各行)によって構成されるボックスで、基本はブロックボックスです。ブロックボックスの左マージンの領域にマーカーボックスが構成され、「リストマーカー(行頭の記号)」が自動的に表示されます。

このページのまとめ

  • ボックスには、「ブロックボックス」、「インラインボックス」、「リストボックス」の3つの種類がある。
  • ブロックボックスは四角形のボックスのことで、h1〜h6要素、p要素、table要素、ul要素・ol要素、div要素などで構成される。幅と高さは自由に変更出来る。
  • インラインボックスは要素の内容に合わせた幅と高さで構成されるボックスで、a要素、em要素・strong要素・small要素、span要素などで構成される。幅と高さは変更出来ない。
  • リストボックスは、li要素の各行によって構成される。基本はブロックボクスで、行頭の記号が左側に自動的に表示される。

本間 隆之が書いた記事

新着情報

スタッフブログ