CSSのボックスモデルとは?概念を初心者向け解説!

CSSのボックスモデルとは何か、その概念やボックスの種類についてサンプルコード付きで解説していきます。ボックスについての理解を深めサイズ・余白調整を適切に行えるようになりましょう!

コンテンツ [表示]

  1. 1ボックスについて
  2. 1.1ブロックボックスとは
  3. 1.2インラインボックスとは
  4. 1.3インラインブロックボックス
  5. 1.4ボックスの種類を変更するdisplayプロパティ
  6. 2ボックスモデルとは?
  7. 2.1コンテンツ(content)
  8. 2.2パディング(padding)
  9. 2.3ボーダー(border)
  10. 2.4マージン(margin)
  11. 2.5まとめ
  12. 3ボックスの確認方法
  13. 3.1ボックスのサイズの確認
  14. 3.2ボックスの種類の確認
  15. 4まとめ

CSSではボックスモデルという概念があります。このボックスモデルはCSSでレイアウトを整えたり、余白を調整する上でとても大事な概念になりますので、しっかりと今回の解説を元に覚えておきましょう。

まずはボックスモデルの概念で重要になる「ボックス」についてサンプルコード付きで順番に解説します。

ボックスについて

HTMLでタグ付をするとどの要素でも四角形のボックスと呼ばれる箱を生成します。下記のサンプルコードを見てみましょう。

上記のサンプルコードではh1要素、p要素、span要素の背景色をそれぞれ色付けしていますが、それぞれの要素が四角形となっているのが確認できるかと思います。

このようにHTMLでタグ付けをすると四角形のボックス(箱)が生成されます。

更に上記のサンプルコードでは緑のボックスは赤のボックスの中に入っており、青・赤の背景色のボックスと緑の背景色のボックスでは種類が異なります。

緑のボックスはインラインボックス、青・赤のボックスはブロックボックスと呼ばれます。

ブロックボックスとは

ブロックボックスは通常は縦に配置されるボックスです。つまりブロックボックスの要素の前後には改行が入り、ブロックボックスの次の要素は下に配置されます。

下記のサンプルコードを見てみましょう。

上記のサンプルコードのdiv要素、h1要素、p要素はデフォルトでブロックボックスで、要素の前後には改行が入り次の要素は積み木の様に、下に配置されます。

ブロックボックスの特徴としては前後に改行が入る以外に

  • marginpaddingなど余白の調整が可能
  • widthheightなど縦や横のサイズ調整が可能
  • text-alignなどブロックボックスに対して適用できるプロパティが使える
などがあります。

インラインボックスとは

ブロックボックスは前後に改行が入り、要素が縦に並びますが一方でインラインボックスは要素が横に並ぶのが特徴です。

インラインボックスの前後には改行が入らず、要素が横に続きます。下記のサンプルコードを見てみましょう。

span要素の背景を緑にしています。span要素やa要素などはデフォルトでインラインボックスで、インラインボックスの前後には改行が入らず横に並びます。

このインラインボックスの特徴としては

  • widthheightでサイズ調整が効かない ※一部効く要素もある
  • 上下のmarginが効かない ※左右のmarginは効く
という特徴があります。

インラインブロックボックス

このボックスは「インライン+ブロック」と両方の名前が入っていますが、文字通りインラインボックスとブロックボックスの両方の特徴を持っています。

下記のサンプルコードはインラインブロックボックスの要素を背景緑で表示しています。

インラインブロックボックスのデフォルトの見た目はインラインボックスと変わりません。ただし特徴としてはブロックボックスの下記の特徴を持っています。

  • marginpaddingなど余白の調整が可能
  • widthheightなど縦や横のサイズ調整が可能
つまり、インラインボックスで調整が出来なかった余白やサイズ調整がインラインブロックボックスだと出来るといういいとこ取りのボックスとなっています。

このインラインブロックボックスは横並びで表示したい要素で、かつサイズ調整や余白調整をしたい場合に重宝します。ぜひ覚えておきましょう。

ボックスの種類を変更するdisplayプロパティ

さて、これまで紹介してきたボックスの種類ですが、a要素やspan要素はインラインボックス、h1要素やp要素はブロックボックスとデフォルトでは決まっていますが、実は後から変更する事が可能です。

ボックスの種類を変更するにはdisplayプロパティを使います。

下記のサンプルコードではh1要素とp要素をインラインボックスに、a要素をブロックボックスに変換しています。

displayプロパティでボックスの種類を変更するのはよく利用される方法です。ぜひ覚えておきましょう。

これまで主なボックスの種類を紹介してきましたが、まだまだボックスの種類は存在しています。興味ある方は下記を参考にしてみましょう。

ボックスの種類

  • ブロックボックスは要素の前後に改行が入り、要素は縦に並ぶ
  • インラインボックスは要素の前後に改行が入らず、要素は横に並ぶ
  • ボックスの種類はdisplayプロパティで制御が出来る

ボックスモデルとは?

これまでボックスの種類で

  • ブロックボックス
  • インラインボックス
  • その他のボックス
を紹介してきましたが、ボックスモデルとはHTMLでマークアップされた全ての要素は上記のいずれかのボックスの種類となり、HTMLでマークアップするというのは四角形のボックス(箱)を生成するのと同じという考え方です。

更にボックスモデルはボックスの内部を下記の4つの領域に分けて考えます。

ボックスモデル4つの領域

コンテンツ(content)

要素の文字や画像など、まさに内部のコンテンツとなる領域を指します。

CSSでwidthheightプロパティでサイズ調整した場合はこのコンテンツの領域のサイズが変更となります。

パディング(padding)

パディングは次に紹介する枠線に対して内部の余白です。枠線とコンテンツの間に余白をもうけたい場合はpaddingプロパティを調整すると実現出来ます。

ボーダー(border)

ボーダーは枠線です。枠線は太さや、線の種類・色などをborderプロパティで調整することが出来ます。

マージン(margin)

ボーダーの外側の余白はマージンと呼ばれます。マージンは他の要素との余白を調整する役割を持ちます。marignプロパティで余白の調整が可能となります。

まとめ

ボックスモデルの4つの領域について見てきましたが、実際のマークアップではこの4つの領域を理解し、サイズや余白の調整を適切なプロパティを指定してスタイルを記述していきます。

  • コンテンツのサイズを広くしたいならwidthheightプロパティを構成
  • 要素と要素の間の余白の調整ならmarginプロパティを調整
  • 枠線とコンテンツの間の余白を空けたい場合はpaddingプロパティを調整
などです。

もしもボックスモデルの理解が不十分であれば上記の中のどのプロパティを調整すべきなのか分からず余計な時間がかかります。ぜひボックスモデルは頭の中に入れておきましょう。

ボックスモデル

  • HTMLでマークアップするというのは四角形のボックス(箱)を生成するのと同じという考え方
  • ボックスモデルは4つの領域(コンテンツ、パディング、ボーダー、マージン)に分けられる

ボックスの確認方法

それでは実際にコーディングしている時にどうすれば、ボックスを可視化できるのか、その確認方法を紹介します。

ボックスの種類やそのサイズについてはChromeのデベロッパーツールから確認することが出来ます。まずはChromeを立ち上げデベロッパーツールを開きましょう。

あわせて読みたい
Chromeでデベロッパーツールをショートカットで開く方法!のイメージ
Chromeでデベロッパーツールをショートカットで開く方法!
Chromeでデベロッパーツールをショートカットキーで開く方法を紹介します。先にショートカットのやり方の結論を伝え、また検証から開く方法やメニューから開く方法もあわせて解説します。

ショートカットの開き方は下記となります。

Chromeのデベロッパーツールをショートカットで開く

[WindowsのChrome]
Ctrl + Shift + I
または
F12

[MacのChrome]
Command + Option + I

ボックスのサイズの確認

要素の選択の仕方
デベロッパーツールが開いたら、こちらのアイコンをクリックしましょう。

こうすることで、解析する要素を選択することが出来ます。
解析したい要素を選択
ボックスを解析したい要素を選択しましょう。
右下にボックスが表示される
するとデベロッパーツールの右下にボックスの図が表示されます。

これが該当要素の、先程から紹介してきているボックスになります。
デベロッパーツールで表示されているボックス
デベロッパーツールで表示されているボックスも領域ごとに色分けされており、それぞれの領域のサイズが上下左右でpxで表示されています。

これでボックスのサイズの確認が行なえます。

ボックスの種類の確認

次にボックスの種類の確認方法です。そのままデベロッパーツール上から確認が出来ます。

ボックスの種類の確認方法
Elementsタブを開き、右側の領域の「Computes」を開きます。
ボックスの種類の確認方法
入力欄に「display」と入力します。すると該当要素のdisplayプロパティの値が返ってきます。

この例ではblockと表示されているため、ブロックボックスとなります。

まとめ

いかがでしたでしょうか。ボックスについて概念や種類、確認方法をご紹介してきました。

ボックスについて知らなくても大雑把なWEBデザインなら出来るかもしれませんが、サイズや余白調整する際に壁にぶち当たります。

ボックスについて理解を深め、適切なサイズ・余白調整が出来るようにしましょう!

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事