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

2024.01.11
html ボックス

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

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

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

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

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

この記事は、

  • HTMLのボックスモデルについて理解できる
  • HTMLのボックスレイアウトをマスターできる

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

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

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

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

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

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

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

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

このボックスには

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

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

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

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

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

ブロックボックス

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

  • 高さや幅を指定できる
  • 何も指定しなければ親要素の幅が全体に広がる
  • 上から下へ縦方向に配置される
  • 前後に改行がついている
  • 上下左右のpadding、marginを指定できる

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

CSSでは、指定した要素に

display: block;

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

インラインボックス

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

  • 基本的に高さや幅を指定できない(imgなど一部CSSで指定できる要素もある)
  • 左から右へ横方向に配置される
  • 前後に改行はついていない

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

CSSでは、指定した要素に

display: inline;

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

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

display: inline-block;

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

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

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

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

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

  • content(コンテンツ)
  • border(ボーダー)
  • padding(パディング)
  • margin(マージン)

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

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のボックスを自由にレイアウトする方法について解説します。

ボックスレイアウトは、

  • floatプロパティ
  • flexboxプロパティ

この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のボックスモデルどちらもしっかり理解しておく必要があります。

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

  • ボックスモデルには4つの領域があり、それぞれの指定にはボックスサイズの算出が必須であること
  • float、flexboxの使い方

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

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


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

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5