【HTML・CSS】ボックスモデルとは？概念から使い方まで解説

「paddingとmarginって何が違うの？結局どっちを使えば良いの？」

「floatでボックスモデルを横にしてみたけど、何かズレてる…」

HTMLやCSSを学習している際にそんな問題にぶつかったことはありませんか？

HTMLの要素の領域の広さや、レイアウトを指定するには「ボックスモデル」の理解が必要です。

聞いたことはあるけど、何となくしか理解していないという方も多いでしょう。

この記事は、

といった内容になっています。

プログラミング初心者にもわかりやすく解説しますので、ぜひ最後まで見てくださいね。

ボックスモデルを理解して、HTML要素を自由自在に設定できるようになりましょう！

エンジニアの基礎知識！HTMLのボックス、CSSのボックスモデルをわかりやすく解説

ボックスやボックスモデルは、HTMLとCSSを学ぶ過程で最初に登場する基礎中の基礎です。

今回のメインはボックスモデルですが、より理解を深めるために、まずHTMLのボックスから学んでいきましょう。

HTMLのボックスは2種類ある

ボックスとは、bodyタグやh1タグなどの「要素」を構成している四角の領域のことです。

このボックスには

という2つの種類があります。

CSSのdisplayプロパティの値で登場する、あの「block」と「inline」です。

CSSを勉強している際に一度は使ったことがあるでしょう。

では、それぞれどのような特徴があるのか解説していきます。

ブロックボックス

ブロックボックスには、以下のような特徴があります。

h1などのタイトル要素、div、tableなどがブロックボックスの代表的な要素です。

CSSでは、指定した要素に

display: block;

と記述することでブロックボックスを設定できます。

インラインボックス

インラインボックスには、以下のような特徴があります。

a、img、spanなどが代表的な要素です。

CSSでは、指定した要素に

display: inline;

と記述することでインラインボックスを設定できます。

ちなみに、以下のようにインラインブロックボックスという指定もできます。

display: inline-block;

方向や配置はインラインボックスと同様ですが、高さや幅、上下のmrginを指定することができます。

ブロックボックスとインラインボックスの良いとこ取りをしているボックスです。

レイアウトに必須！CSSのボックスモデル

CSSを最初に学習する時に登場するボックスモデルですが、意外と正しく理解していない方も多いでしょう。

ボックスモデルとは、CSSでレイアウトをする際に必要な4つの領域のことです。

では、それぞれについて詳しく見ていきましょう。

content（コンテンツ）

contentとは、HTML要素の中心にある領域のことで、

テキストや画像、動画なども含まれています。

CSSで、height（高さ）とwidth（幅）を用いて領域の大きさを指定することができます。

border（ボーダー）

borderは、contentの周辺にある境界線のことで、初期値は0に指定されているため見えません。

CSSで、太さや色、種類などを指定することができます。

padding（パディング）

paddingは、要素の内側の余白のことでcontentとborderの間に存在しています。

CSSで上下左右の領域を指定することができます。

margin（マージン）

marginは、要素の外側の余白のことでborderを取り囲む形をしています。

CSSでは、paddingと同様、上下左右の領域を指定することができます。

ボックスモデルにはbox-sizingプロパティが便利

ボックスモデルのサイズを指定する時は、ボックス全体のサイズを算出する必要があります。

サイズの調整が上手くできなかったり、画面からはみ出してしまうこともあるのでしっかり理解しておきましょう。

ボックス全体のサイズは、「content+border+padding+margin」の合計で算出されます。

それぞれを算出する前にあらかじめ計算する方法もありますが、一つずつ算出するのは大変です。

そんな時に便利なのが「box-sizing」プロパティです。

CSSのwidth、heightプロパティで指定できる領域にサイズを指定することができるので、面倒な計算も不要です。

box-sizingの値は3つありますが、paddingとborder領域を含めて指定できる「border-box」だけ覚えておけば問題ないでしょう。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

HTMLのボックスレイアウトをマスターしよう！

ここからは、HTMLのボックスを自由にレイアウトする方法について解説します。

ボックスレイアウトは、

この2つを使う方法があります。

それぞれの使い方を解説しますので、自分のエディタで実践してみてくださいね。

1.floatを使う

何も指定していない時のボックスは、上から下に縦に並んでいます。

これをfloatを使って横並びにしてみましょう。

<!-- HTML -->
<ul>
 <li>box1</li>
 <li>box2</li>
 <li>box3</li>
 <li>box4</li>
</ul>

/* CSS */
li {
  width: 150px;
  height: 150px;
  background-color: blue;
  margin: 10px;
  float: left;
}

上記のように配置を変えたい子要素にfloatを指定します。

floatは、その名の通り「フロート（浮いている）」という特殊なボックスで、floatを設定していないボックスからは存在しないものとみなされるので注意しましょう。

widthをで%指定をすると、ボックスモデルをキレイに分割することができますよ。

2.flexboxを使う

floatは、浮いているボックスを作ることになるので、レイアウトを考えるのが少し大変です。

flexboxプロパティは、素直にボックスの配置を変えてくれるので、ボックスレイアウトを多用したい場合にもおすすめです。

上下左右、縦横など、様々なパターンごとにflexboxを使ったボックスレイアウトを紹介します。

/* CSS */
ul {

/* 必ず指定する */
  display: flex;

/* 1.並び方の指定 */
  flex-direction: row; /*左から右へ並べる*/
  flex-direction: row-reverse; /*右から左へ並べる*/
  flex-direction: column; /*上から下に並べる*/
  flex-direction: column-reverse; /*下から上に並べる*/

/* 2.ボックスを中央を寄せる指定 */
  justify-content: center; /* 左右中央寄せ */
  align-items: center; /* 上下中央寄せ */

/* 3.均等に並べる指定 */
  justify-content: space-between; /* 最初と最後の子要素を両端、残りは均等に並べる */
  justify-content: space-around; /* すべて均等間隔に並べる */

/* 4.全体を上下左右いずれかに寄せる指定 */
  align-content: flex-start; /* 親要素の開始側揃え */
  align-content: flex-end; /* 親要素の終点側揃え */
}

flexboxプロパティでは「display: flex;」を必ず指定します。

その他の設定は、上記のメモの1～4を参考にしてみてください。

まとめ：ボックスモデルはHTMLの基礎中の基礎

今回はボックスモデルについて詳しく解説しました。

HTMLのボックス、CSSのボックスモデルどちらもしっかり理解しておく必要があります。

以下、この記事のまとめです。

ボックスモデルの正しい理解は、レイアウト崩れの防止や自由なカスタマイズにも繋がります。

基礎が理解できていれば、自分好みに応用して使いこなせるのでこの機会にボックスモデルの知識とボックスレイアウトをマスターしましょう！

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？