今回は、CSSの「ボックスモデル」について書き留めていきたいと思います。
Webページを作成する上でボックスモデルを理解するのは、大変重要です。
そもそもボックスモデルとは
CSSには「HTMLの要素はすべて四角形の領域を形成する」というボックスと呼ばれる概念があります。
レイアウトを作成したり、アイテム同士を揃えたりするのに必要な考え方です。
また、CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。
- content (内容)
- padding (パディング)
- border (ボーダー)
- margin (マージン)
ボックスモデルの構成について
-
content（内容）
テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。
-
padding（パディング）
content と border の間にある余白の領域です。要素の内側の余白を取るために使います。この領域のサイズは padding プロパティで指定することができます。
-
border（ボーダー）
padding の外側にある領域、いわゆる枠線です。この領域のサイズは border-width プロパティで指定することができます。
-
margin（マージン）
ボックスの一番外側の余白の領域です。この領域のサイズは margin プロパティで指定することができます。
ボックスの種類
使うタグによってできるボックスに種類があります。
特に重要な３種類がありますので、以前紹介したブロックレベル要素とインラインレベル要素のおさらいになりますが、紹介いたします。
※以前の記事はこちらです
- ブロックボックス
- インラインボックス
- インラインブロックボックス
-
ブロックボックス
ブロックボックスは、上から下へ配置されます。
前後に改行が入るものと考えてください。
また、横幅と高さを指定することができます。
指定しない場合、ページの横幅いっぱいに広がります。
-
インラインボックス
インラインボックスは、左から右へ配置され、
横幅いっぱいになると自動で折り返されます。
横幅と高さを指定することはできません。
-
インラインブロックボックス
インラインブロックボックスは、
上記2つの特徴を併せ持つボックスです。
横幅と高さを指定することができ、左から右に並んで配置されます。
これらの特徴を理解していくと、レイアウト作成やコンテンツの配置がスムーズにできるようになります。