CSS

CSSボックスモデルとは?4つの基本構成を理解する【図解】

どうも、つよぽんです!

今回はCSSのボックスモデルとは何か解説していきます。CSSのボックスモデルがわかると、HTMLとCSSでちゃんと理解しながら各要素(パーツ)を配置して、Webページを作りかげられるようになります。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSのボックスモデルを聞いたこと無い方
  • Webページの各要素がどのように構成されているか知らない方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSボックスモデルを理解するWebページを構成する1つ1つのパーツはCSSボックスモデルと呼ばれる長方形の形でブラウザに描画されます。CSSボックスモデルを4つの境界(領域)から構成されています。CSSボックスモデルを構成する4つの境界(領域)について学習しましょう。...

今回の内容は以下のとおりです。

今回の内容
  • CSSのボックスモデルとは
  • CSSのボックスモデルを4種類の基本構成

 

CSSのボックスモデルとは

CSSのボックスモデルとはWebページを構成する各要素(タグ)を長方形で表したものです。

下の画像は、HTMLの各要素に、CSSのbackgroundプロパティを使って背景色をつけたり、borderプロパティをつけてボーダーをセットしているのを表したものです。

CSSボックスモデルとはCSSボックスモデルとは

背景色とボーダーの形を見るとそれぞれ長方形になっているのがわかるかと思います。

基本的にWebページを構成する各要素は、ブロックレベル要素インライン要素も含めて全て長方形で作られています。

ブロックレベル要素インライン要素に関しては以下の記事で解説しているのでわからない方はそちらを参考にしていただけたらと思います。

あわせて読みたい
HTMLのブロックレベルとインラインを理解するHTMLでWebページを作る上で理解しておくべき概念「ブロックレベル要素」「インライン要素」。「ブロックレベル」「インライン」について説明した後に、実際にサンプルコードを交えて体感的にもブロックレベルとインラインを理解していきます。...

その長方形のブロックを組み合わせてWebページが作り上げられるのです。

そのため、CSSのブロックモデルを理解することはWebページの実装に大きな助けとなります。

CSSのボックスモデルを4種類の基本構成

前の章では、CSSのボックスモデルとは長方形に作られたWebページの各要素だというのを説明しました。

この章では、長方形で構成されるCSSのボックスモデルはどのような概念で構成されているかを説明していきます。

CSSのボックスモデル4つの境界で構成されています。

4つの境界
  1. コンテンツ境界
  2. パディング境界
  3. ボーダー境界
  4. マージン境界

上記4つの境界を図に表したものが以下の画像となります。

CSSボックスモデルを構成する4つの境界(領域)CSSボックスモデルを構成する4つの境界(領域)

それでは1つずつ見ていきましょう。

コンテンツ境界・領域

コンテンツ境界は下の画像の図のの部分になります。

コンテンツ境界(領域)の部分コンテンツ境界(領域)の部分

コンテンツ境界にはタグで囲まれた部分のテキストが表示されます。

上の画像の右側のコードと、出力結果を見ると、赤枠の中にpタグで囲まれたテキスト、青枠の中にspanタグで囲まれたテキストが表示されているのがわかるかと思います。

この赤枠青枠の部分がコンテンツ境界となり、コンテンツ境界で囲まれた部分がコンテンツ領域となります。

パディング境界・領域

パディング境界は下の画像のの部分になります。

パディング境界(領域)の部分パディング境界(領域)の部分

パディング境界は、さきほど解説したコンテンツ境界と次に説明するボーダー境界の間にある境界で、コンテンツとボーダーの間にスペース(空間)を作る部分になります。

上の画像の右側にある赤枠内を見ると、pタグ内に記述したテキストの周りにスペースが出来ているのがわかるかと思います。(「pタグのコンテンツ領域。」の上下左右に矢印でスペースが出来ているのを表している。)

コンテンツ境界の周りにスペースを作る際には、CSSのpaddingプロパティを使います。

ボーダー境界・領域

ボーダー境界は下の画像のの部分になります。

ボーダー境界(領域)の部分ボーダー境界(領域)の部分

ボーダー境界borderプロパティを使ってボーダーを表示する部分になります。

上の画像の右側を見るとパディング境界でスペースを空けた外側に50pxで指定した太い赤いボーダーがセットされているのがわかるかと思います。(白矢印でボーダー境界を表示している)

マージン境界・領域

マージン境界は下の画像のの部分になります。

マージン境界(領域)の部分マージン境界(領域)の部分

マージン境界は要素と要素の間にスペースを作ります

上の画像右側にある、緑矢印を見ると、「pタグのコンテンツ領域。」と「spanタグのコンテンツ領域」の間にスペースが出来ているのがわかるかと思います。(上下左右に伸びている緑矢印の部分)

要素と要素の間にスペースを作る際には、CSSのmarginプロパティを使います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSのボックスモデルとは、Webページの各パーツを長方形で表現したもの
  • CSSのボックスモデルは、「コンテンツ境界」「パディング境界」「ボーダー境界」「マージン境界」の4つで構成される

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSボックスモデルを理解するWebページを構成する1つ1つのパーツはCSSボックスモデルと呼ばれる長方形の形でブラウザに描画されます。CSSボックスモデルを4つの境界(領域)から構成されています。CSSボックスモデルを構成する4つの境界(領域)について学習しましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です