【CSS】ボックスモデルとは？【基本的かつ重要な概念です。】

CSSの重要かつ基本的な概念である「ボックスモデル」について解説します。

「ボックスモデル」に関する知識をしっかり持っていると、「コードを書くスピードが上がる」「より綺麗なコードが書けるようになる」などと良い影響が沢山あります。いまいち理解せずとも、レイアウトを組むことは可能ですが、どこかのタイミングでしっかり勉強するといいと思います！

綺麗なコードを書くことで、保守性を高めることができますし、内部を美しく作り上げることは楽しいので、ぜひ習得してみて下さいね！

ボックスモデルって何？意味をしっかり理解したいので、分かりやすく解説した記事が読みたいな。

この記事は、このような方を想定読者として書いています。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

僕は三年前にプログラミングの独学を開始して、今では個人でお仕事を取ってきて、実務をこなせるまでに成長しました。そんな僕が、CSSのボックスモデルという概念について丁寧に解説しますので、ぜひ最後までお読み下さい。

ボックスモデルとは何か。

上の図のように、「表示されるHTMLの要素」は、これらの領域によって「構成」されています。

「表示されるHTMLの要素」に限定する理由は、meta要素などの表示されない要素に関しては、当てはまらないからです。

表示される全ての要素(div、p、h1など)が、「ボックスモデル」の概念に当てはまる形で表現されます。

「ボックスモデル」とは、HTMLの各要素がそれぞれ、どのように構成されているのかを表す「概念」ということですね。

結論から書くと、全ての「表示されるHTML要素」は、4つの領域によって作られています。

それでは、「ボックスモデル」についての概要をお伝えしたところで、次はそれぞれの領域について、より詳しく解説します！

コンテンツ領域

「コンテンツ領域」とは、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含む領域のことです。

4つの領域の中で、１番内側の部分の領域を指します。
上の画像では水色の部分の「100 × 100」と書いている箇所ですね。

実際にコードを書いて解説しますね。

<div class="container">
    <div class="box">boxです。</div>
</div>

このようなHTMLのコードを書きました。
そして、下記のようなCSSのコードも書きました。

.container {
    background-color: brown;
    width: 600px;
    height: 300px;
}
.box {
    background-color: blueviolet;
    color: #fff;
    width: 100px;
    height: 100px;
}

すると下の画像の様に、なります。

茶色の「container」クラスがついた「div要素」の中に、すみれ色の「100px四方の要素」が入っているのが確認できます。

今回はこの「すみれ色の要素」に焦点を当てて、「コンテンツ領域」はどこなのかを説明します。

結論、この例では、どこがコンテンツ領域かというと、「すみれ色の部分すべて」になります。

要素の「back-ground」プロパティを設定した場合、「コンテンツ領域」と「パディング領域」に背景色がつきます。
今回の例では、paddingを設定していないので、「コンテンツ領域のみ」の要素となっています。

実際に「すみれ色の要素」をデベロッパーツールで確認すると、下の画像のようになっています。

このデベロッパーツールで「100 × 100」となっている箇所が、「コンテンツ領域」を表しています。

padding,border,marginは何もついていないのも確認できますね。

パディング領域

パディング領域とは、「コンテンツ領域」の外に広がる「要素内のスペース」の領域を指します。

要素に「padding」プロパティを設定することで、要素にパディング領域を作ることが可能です。

.box {
    background-color: blueviolet;
    color: #fff;
    width: 100px;
    height: 100px;
    padding: 20px;
}

先ほどのboxクラスがついた要素に「padding」を20pxつけてみました。上の画像はその結果を表しています。

上の画像のすみれ色の要素の中で「boxです。」の文字列が収まっているのが「コンテンツ領域」で、その外側に「スペース」が確認できると思いますが、そこが「パディング領域」です。

「コンテンツ領域」と「パディング領域」は基本的に「背景色」を分けることはできませんが、上の画像よりも、スペースが空いていることが確認しやすいように、デベロッパーツールで色分けしたものが、この下の画像です。

この画像によって「パディング領域」がどこを指し表しているのか視覚的に把握することができたかと思います。

境界領域

「境界領域」とは、要素と要素以外の「境界線部分」の領域のことです。文字通りですね。

要素の中心に「コンテンツ領域」があり、その外側に「パディング領域」があり、さらにその外側に「境界領域」が存在します。
位置関係は、上の画像の通りです。

要素には、「border」というプロパティで、境界線をつけることができます。何も指定しなければ、境界線はありません。

では、先ほどの「すみれ色の要素」に境界領域をつけてみます。

.box {
    background-color: blueviolet;
    color: #fff;
    font-size: 12px;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid #000;
}

このように「border」プロパティで、境界領域を作りました。

幅は10pxでsolidタイプの線で、色は#000、という指定ですね。

すると、下の画像のようになります。

要素の中に、境界領域がついたのが確認できるかと思います。

マージン領域

「マージン領域」は要素の外側できるスペースのことです。

※これが必ずしも、他の要素との距離になるとは限りません。なぜなら、他の要素もマージン領域を取れるからです。

.box {
    background-color: blueviolet;
    color: #fff;
    font-size: 12px;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid #000;
    margin: 20px;
}

このように、先ほどの「すみれ色の要素」に「margin」を20pxつけてみました。

(containerクラスがついた要素のdisplayはflexに変更)ここでは解説しませんが、不都合が起きるため。

すると下の画像のようになります。

このように、要素の外側(境界線領域の外側)にスペースができたのが確認できると思います。

それぞれの設定方法は「display」プロパティが関係してくる。

では、今まで紹介してきた下記の4つの領域のそれぞれの設定方法の話をします。

重要なので、もう一度書きますが、下記の4つの領域で「HTMLの表示される全ての要素」は構成されています。

これらの領域の定義は、お伝えしたので、ここからはこれら４つの領域の設定方法について解説していくのですが、結論から言うと、その要素の「display」プロパティによって設定方法が変わる。

例えば、「display」が「inline」の要素だと上下にマージン領域を設定しても無効となります。

なので今回は、その要素の「display」プロパティ的に設定可能なの時の設定方法、に限って解説します。

個別にそれが有効かどうかなど「display」プロパティについては、下記の記事で解説しています！

コンテンツ領域の設定方法。

コンテンツ領域は、「基本的に」、要素に「width」と「height」を設定することで、設定することができますが、正確に指定するには、その要素の「box-sizing」プロパティも考慮して指定しなくはなりません。

正確に指定するには「box-sizing」プロパティによる場合分けが必要です。

コンテンツ領域の幅と高さを指定するには、「box-sizing」プロパティによる場合分けが必要です。

実際によく使われるのは、「box-sizing」の値を「border-box」として、「padding」を含めた要素の大きさで指定する方法なので、あまりコンテンツ領域の幅と高さを意識しなくてもOKです。

ただ概念を知っている程度でOKですかね。

ここでMDNというサイトの文言を引用します。

box-sizing プロパティが content-box (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は width、min-width、max-width、height、min-height、max-height の各プロパティによって正確に定義することができます。

MDN Web Docs

上のように、信頼できるリファレンス的なサイトであるMDNではこう書かれています。

まず、「box-sizing」プロパティは、要素の全体の幅と高さをどのように計算するのかが設定できます。

そしてどうしてもコンテンツ領域を正確に指定したい場合は、下記の方法があります。

※「box-sizing」が他の値だと、必ずそうなる訳ではないので、注意して下さい。

パディング領域の設定方法。

div {
    padding: 10px;
}

CSSで「padding」プロパティを設定することで、その要素にパディング領域を作ることができます。

パディング領域は、要素の上下左右で、個別に設定することも可能なので、詳しい設定方法について解説します。

padding-top:

div {
    padding-top: 10px;
}

「padding-top」プロパティによって、上のパディング領域を個別に設定することができます。

padding-right:

div {
    padding-right: 10px;
}

「padding-right」プロパティによって、右のパディング領域を個別に設定することができます。

padding-bottom:

div {
    padding-bottom: 10px;
}

「padding-bottom」プロパティによって、下のパディング領域を個別に設定することができます。

padding-left:

div {
    padding-left: 10px;
}

「padding-left」プロパティによって、左のパディング領域を個別に設定することができます。

padding: 「一括指定プロパティ」

div {
    padding: 10px;
}

「padding」プロパティは一括指定プロパティです。

div {
    padding: 10px;
}

このように、値を一つだけ指定した場合、要素の「上下左右」それぞれ同じ距離のパディング領域が作られます。

div {
    padding: 10px 20px;
}

このように、値を２つ指定した場合は、最初に書いた数値で「上下」のパディング領域が設定され、次に書いた数値で「左右」のパディング領域が設定されます。

この例では、10pxが上下のパディング領域、20pxが左右のパディング領域ですね。

「上下」と「左右」とのそれぞれが、同じ値を指定したい時に便利な指定方法ですね。

div {
    padding: 10px 20px 30px;
}

このように、値を3つ指定した場合は、最初に書いた数値で「上」のパディング領域が設定され、次に書いた数値で「左右」のパディング領域が設定され、最後に書いた数値で「下」のパディング領域が設定されます。

この例では、10pxが上のパディング領域、20pxが左右のパディング領域、30pxが下のパディング領域です。

div {
    padding: 10px 20px 30px 40px;
}

このように、値を4つ指定した場合は、最初に書いた数値で「上」のパディング領域が設定され、次に書いた数値で「右」のパディング領域が設定され、その次に書いた数値で「下」のパディング領域が設定され、最後に書いた数値で「左」のパディング領域が設定されます。

上から時計回りに順番に設定される感じです。

この例では、10pxが上、20pxが右、30pxが下、40pxが左、という指定になりますね。

境界領域の設定方法。

境界領域は「border」という一括指定プロパティで設定することができます。

では、それぞれの指定方法について詳しく解説します。

border-color:

「border-color」プロパティで、境界領域の色を指定できます。

指定方法は下記の通りです。

これらの指定方法の詳細は「color」プロパティと一緒なので、ここでは省略します。

初期値は「currentcolor」です。これは文字色と同じ色のことです。

「border-color」もまた一括指定プロパティです。

「border-color」で指定できるのは下記の通り。

それぞれで、上、右、下、左の境界領域の色を指定することができます。

初期値はそれぞれ「currentcolor」です。

値の数で指定場所が変わるのは、パディング領域の時と同じです。

１つなら、「上下左右」に適用。

２つなら、「上下」「左右」の順番で適用。

３つなら、「上」「左右」「下」の順番で適用。

４つなら、「上」「右」「下」「左」の順番で適用。

border-style:

「border-style」プロパティで境界領域の種類を指定できます。

境界領域は「境界線」というイメージなので、線、点線、などから選ぶことが可能です。

こららの値が設定できます。

初期値は「none」です。

それぞれの値を設定すると、実際どうなるかは、上の画像のようになります。視覚的にイメージできたかと思います。

初期値の「none」は、境界領域は表示されないという設定です。

「hidden」も、境界領域は表示されないという設定です。

「solid」は、1 本の直線で表されます。

これが１番よく使いますね。

「dotted」は、丸い点によって境界線が作られます。点の間の空白の量は仕様書で定義されていませんので、webブラウザ側に依存します。

点の半径は、同じ辺の 「border-width」の値の半分です。

「dashed」は、短く角が四角い線分の連続で表示されます。つまり破線ですね。

線分の長さは仕様書で定義されてないので、実装依存です。つまりwebブラウザの開発側がどう作るかに依存します。

「double」は、2 本の直線で表現され、幅の合計は border-width で定義したピクセル数になります。

「groove」は、凹んだように見える境界線を表示します。 ridge の逆です。

「ridge」は、出っ張ったように見える境界線を表示します。 groove の逆です。

「inset」は、要素が埋め込まれて見える境界線を表示します。 outset の逆です。

「outset」は、要素が出っ張って見える境界線を表示します。 inset の逆です。

「border-style」もまた一括指定プロパティです。

「border-style」で指定できるのは下記の通り。

それぞれ個別に設定することで、境界領域をさらにカスタマイズすることが可能ということですね。

指定方法は、一括指定の時と同じです。

１つなら、「上下左右」に適用。

２つなら、「上下」「左右」の順番で適用。

３つなら、「上」「左右」「下」の順番で適用。

４つなら、「上」「右」「下」「左」の順番で適用。

border-width:

「border-width」プロパティで境界領域の幅を指定することが可能です。

初期値は「medium」です。

それぞれについて、より詳しく解説します。

「width」や「height」と同じように、px単位で設定が可能です。

「em」は、その要素の「font-size」にを1とする単位で指定できます。

例えば、その要素の「font-size」が10pxだったら、「1.5em」と指定すると、「10px × 1.5」で「15px」と指定した時と同じ幅にすることができます。

ルートの「font-size」を1とする単位で指定できます。

ルートとは、１番外側のHTMLタグなので「HTMLタグ」のことです。

「border-width」の値には、用意されたキーワードを使うこともできます。

キーワードのそれぞれは、仕様書で明確に「何px」か定義されていないので、詳細は実装に依存します。

「thin ≤ medium ≤ thick」　というルールで設定されています。

また、「border-width」の初期値は、ここで紹介した「medium」です。

「border-width」もまた一括指定プロパティです。

「border-width」で指定できるのは下記の通り。

それぞれ個別に設定することで、境界領域をさらにカスタマイズすることが可能です。

指定方法は、同じです。

１つなら、「上下左右」に適用。

２つなら、「上下」「左右」の順番で適用。

３つなら、「上」「左右」「下」の順番で適用。

４つなら、「上」「右」「下」「左」の順番で適用。

border: 「一括指定プロパティ」

「border」プロパティは一括指定プロパティです。

div {
    border: 4px solid #333;
}

このように、３つの値を半角スペース区切りで書くことで、一括で指定できます。

順番は何でもOKです。

１個以上書けばOKなので、他のプロパティは省略可能です。

div {
    border: solid;
}

このように「solid」だけ指定することも可能ということですね。

省略したプロパティは、それぞれの初期値が入ります。

マージン領域の設定方法。

div {
    margin: 10px;
}

CSSで「margin」プロパティを設定することで、その要素にマージン領域を作ることができます。

マージン領域は、要素の上下左右で、個別に設定することも可能なので、詳しい設定方法について解説します。

margin-top:

div {
    margin-top: 10px;
}

「margin-top」プロパティによって、上のマージン領域を個別に設定することができます。

margin-right:

div {
    margin-right: 10px;
}

「margin-right」プロパティによって、右のマージン領域を個別に設定することができます。

margin-bottom:

div {
    margin-bottom: 10px;
}

「margin-bottom」プロパティによって、下のマージン領域を個別に設定することができます。

margin-left:

div {
    margin-left: 10px;
}

「margin-left」プロパティによって、左のマージン領域を個別に設定することができます。

margin: 「一括指定プロパティ」

div {
    margin: 10px;
}

「margin」プロパティは一括指定プロパティです。

上のように、指定すると、上下左右に等しくマージン領域が設定されます。

１つなら、「上下左右」に適用。

２つなら、「上下」「左右」の順番で適用。

３つなら、「上」「左右」「下」の順番で適用。

４つなら、「上」「右」「下」「左」の順番で適用。

「margin」に「auto」と設定することもできます。

「margin」に「auto」と設定すると、ブラウザーが適切なマージンを選択して使用します。

例えば、テクニック的な話しですが、要素を中央揃えにするときに、左右の「margin」の値に「auto」と設定することで実現可能です。

もしくは、要素を右詰めしたい時に、要素の左側の「margin」の値に「auto」と設定したりしますね。

この記事を読了した方に次に読んでほしい、「displayプロパティについて」の記事。

この記事では、ボックスモデルという概念があるということ、「padding,border,margin」の設定方法について記述しました。

ですが、設定した「padding,border,margin」が「有効かどうか」は、その要素の「display」プロパティ次第です。

全く効かなかったり、効くは効くけど、挙動が少し通常とことなったりします。

なのでぜひ、下記の記事を読むとをおすすめします。

CSSを書く上で、「display」プロパティに関する知識は、とても重要です。

まとめ

この記事では、「ボックスモデル」という概念を分かりやすく解説しました。

ざっくりと概要が分かったかと思います。

参考webサイト

より詳しい知識などが必要な場合は、MDNというサイトを参照して下さい。

「Firefox」というwebブラウザを提供している団体である、Mozillaが運営しているサイトですので信頼できますし、より専門的な 知識が得られます。

MDN CSS 基本ボックスモデル入門

また、僕はこれからもブログ、Twitterを中心に、プログラミングに関する技術的な内容から、エンタメ的な内容までの幅広いコンテンツを作って公開していくので、ぜひTwitter等もチェックをお願いします。

最後まで読んでくれて、本当にありがとうございました。

ではまた！