CSSスキル - 第4章 Lesson2

ボックスモデルを理解する

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

横幅や縦幅、内側の余白、外側の余白、境界線の考え方を理解するために、初心者向けにボックスモデルを解説しています。



この動画で学べること

・CSSのボックスモデルの概念について



CSSのボックスモデルの概念について

CSSのボックスモデルには4つの種類があります。

・コンテンツ領域
・パディング領域
・ボーダー領域
・マージン領域



「コンテンツ」はHTMLに記述した文章や画像などです。
パディング領域とは内側の余白のことで、コンテンツの外側、ボーダーの内側の領域になります。
backgroun-colorで背景色を指定すると、このパディング領域までが塗りつぶされます。
ボックスには境界線をつけることができますが、その境界線はボーダー領域で表示されます。
ボーダー領域はパディング領域の外側になります。
一番外側にあるのはマージン領域になります。
隣り合うボックスとの余白をとることができます。







このCSSのボックスモデルの考え方は、CSSを書いていく中でとても重要になります。
これから一緒に細かく見ていきましょう。