【CSS】3分で理解できる!ボックスモデル

CSS

このページでは、CSSでpaddingやmargin、widthやheightをマスタ―するための前提となる「ボックスモデル」について画像付きで1から解説しています。

初心者にとって、paddingやmargin、widthやheigthプロパティの使い方は、理解しづらく挫折しやすい部分でもあります。結局のところ、marginやpaddingと何が違うのか?どっちも、ボックスの大きさを変える意味で同じではないのか?考えれば考えるほど混乱してしまう方もいらっしゃるかもしれません。

実は、それらの疑問は「ボックスモデル」を理解すれば簡単に違いを説明できるようになります。本ページでは、それらのプロパティ利用の前提となる「ボックスモデルとは何か?」を画像付きで1から解説していきます。

このページで学べる内容
  • CSSの基本―「ボックスモデル」とは何か?
  • paddingとmargin/widthとheightの役割の違いは何か?

CSSを学習中の方や、実際の現場でコーディングをする方であれば知らないと恥ずかしい重要知識ばかりですので、是非最後までご覧ください。

ボックスモデルとは?

ボックスモデルとは、HTMLの要素が生成する領域を、4つの領域に分類したものです。

HTMLの要素は、必ず四角形のボックスを生成します。見出しタグdivタグなどのタグを設置し要素を生成した場合、何の指定をしなくても自動的に以下の4領域(margin/border/padding/content area)が付与されます。

初心者の方の中には、目に見える部分(内容領域)だけがHTMLで定義されていると考えている方もいらっしゃるかと思いますがそれは完全に誤りです。テキストや画像などを表示する領域だけではなく、必ずその他の部分(余白や枠線)などの領域も同時に存在しているということを押さえましょう。

これら4つの領域の色や大きさをCSSでうまく指定することができるようになれば、ページ全体のレイアウト・デザインを自由自在に操れるようにな。

簡単にそれぞれ4つの領域の役割と、CSSでの指定方法を説明していきます。

【復習】HTMLの要素とは?

HTMLはテキストをタグで囲みます。タグは囲んだ部分に意味付けを行う役割を持ちます。タグで囲むことで、コンピュータは囲んだ部分を「段落」や「見出し」「リンク」などと認識することができます。

タグで囲んだ部分全体を「要素」と呼びます。

内容領域(content area)

内容領域(表示領域)は、要素そのもの(実際のテキストや画像)が表示される領域です。

画像の大きさを指定したい場合や、文章列の幅や高さを指定したい場合は、この内容領域の大きさを変更する必要があります。

この内容領域(content area)の大きさを指定しているのが、width(幅)・height(高さ)プロパティです。

padding(内側の余白) / margin(外側の余白)

内容領域の外側に存在するのが、padding(パディング)とmargin(マージン)領域です。

要素と要素の間(余白)を変更したい場合や、ページ全体の余白を指定する場合には、paddingプロパティ・marginプロパティを用います。

どちらの領域も「余白」としての役割を担います。HTML/CSSでは、この「余白」部分をpadding(内側の余白)とmargin(外側の余白)の2つに分類して管理することができます。

padding(パディング)とmargin(マージン)の違い
  • padding ⇒ 外側の余白
  • margin ⇒ 内側の余白

padding/marginプロパティについては、こちらの記事で詳しく解説していますので、合わせてご覧ください。

border(枠線)

border領域は、paddingとmarginの間に存在する領域です。いわゆる枠線の役割を果たします。

border(枠線)領域は、点線で表示したり二重線で表示したりすることができる点で、marignやpaddingと異なります。

HTML/CSSを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、1から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

タイトルとURLをコピーしました