表示領域


このページはホームページ本体レイアウトの胆ともいえる大事なところで、表示領域の内部について見ています。

表示領域とは、例えばbodyならbodyの幅と高さで表されるところの内側、containerならcontainerの幅と高さの内側です。

pink地はcontainer領域

黒枠はbody(ホームページ本体)、ピンク地はcontainerと思ってください。

この領域には、width、heightで表されるコンテンツ部、その周りの余白、余白を囲む枠線そして、枠線の外に存在するmarginが入ります。

表示領域の概念

では、図示してみましょう。

pink地はcontainerの表示領域です

margin(枠線と表示領域の間隔)

border(余白外回りの枠線)

padding(コンテンツ部外回りの余白)

width,height(コンテンツ部)

ピンク色部をbodyの中央に配置したcontainerだとします。
marginという間隔を空けてborderという枠線があります。
その内側にpaddingという余白を空けてwidth、heightで定めたコンテンツ部がある、という図式です。

width、heightで決めた寸法のコンテンツを書き、その周りに余白を付けて枠線で囲む。
枠線で囲まれた部分と領域の間にmarginという間隔がある。
この概念を念頭に置いて

  1. width、heightコンテンツ部
  2. paddingコンテンツ周りの余白
  3. border余白外回りの枠線
  4. margin枠線と表示領域の間隔

これらを順に見ていきましょう。