お問い合わせ
  • HTML

36 ボックスの3つの種類

ボックスの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要素の各行によって構成される。基本はブロックボクスで、行頭の記号が左側に自動的に表示される。

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。