今回は扱うのはCSSでHTML要素のサイズと配置のスタイリングをする上で非常に重要なボックスモデルというものです

ボックスモデルとはこのような構造になっていて、これをしっかり理解していればWebページを作る際にどんなCSSを書けばいいのかが明確にイメージできるようになります

それではCSSの新しいプロパティの学習をしながらボックスモデルを理解していきましょう！

幅と高さ – width, height

まずは小さな例から作っていきます

今index.htmlに書いてあるコードをコメントアウトするか、新しいプロジェクトを作ってHTMLに<p>だけを配置しましょう

<p>テキスト</p>

そうしたらstyle.cssにこれからの変更が分かりやすいようにbackground-colorというプロパティで<p>に背景色を設定します

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
}

これで<p>に背景色がついたので<p>の幅と高さを変更してみましょう

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
  width: 200px; /* 幅を設定する */
  height: 100px; /* 高さを設定する */
}

背景の黄色の幅と高さが変わりました

ここで言えることはwidthとheightはボックスモデルのcontentの部分の幅と高さを設定するCSSのプロパティということです

境界線 – border

contentの1つ外側はpaddingですが、その前にborderから理解しておくと分かりやすいのでborderの使い方をみてみましょう

borderプロパティは次のように使います

線の太さは最低1pxでそれ以下の値は設定できないので注意しておきましょう

線の種類にはsolidの他にdashed, dottedなどが使えます

それではstyle.cssにborderの記述をしましょう

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
  width: 200px; /* 幅を設定する */
  height: 100px; /* 高さを設定する */
  border: 3px solid black;
}

するとこのようになります

contentに密着するようにborderが表示されていますね

それでは次はこの状態にpaddingを追加してどのように変わるかみてみましょう

内側の余白 – padding

paddingはcontentとborderの間の余白です

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
  width: 200px; /* 幅を設定する */
  height: 100px; /* 高さを設定する */
  border: 3px solid black;
  padding: 20px;
}

このコードは「上下左右全ての方向に20pxのpaddingを入れる」という意味になります

paddingを設定したことで、contentとborderの間に余白ができました

ここでpaddingの分要素が大きくなっていることに注意しましょう

いま上下左右に20pxずつの余白を設定したので<p>の幅は
200px(contentのwidth) + 40px(左右のpadding) + 6px(左右のborderの太さ)で合計246pxになっています

高さも同様にpaddingとborderの大きさが影響しています

width, heightの値を保つ – box-sizing

このようにpaddingとborderによって<p>全体のサイズが変わってしまうとpaddingやborderを追加するたびに配置が変わってしまいます

そこで<p>のサイズをwidth, heightプロパティで設定した値にするために使うのが「box-sizing」プロパティです

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
  width: 200px; /* 幅を設定する */
  height: 100px; /* 高さを設定する */
  border: 3px solid black;
  padding: 20px;
  box-sizing: border-box; /* デフォルトはcontent-box */
}

box-sizingプロパティの値をデフォルトのcontent-boxからborder-boxに変更することで、width, heightの値をborderまでを含めた値にできます

これによって後からborderやpaddingを変更しても要素の大きさが変わらないので配置のズレがなくなります

box-sizingは非常に重要なので理解しておきましょう

外側の余白 – margin

ここまで来ればあとはかんたんです！

marginはborderの外側の余白を設定するために使うプロパティです
他の要素との余白を設定するために使います

p{
  background-color: lightskyblue; /* 背景色を設定するためのプロパティ */
  width: 200px; /* 幅を設定する */
  height: 100px; /* 高さを設定する */
  border: 3px solid black;
  padding: 20px;
  box-sizing: border-box; /* デフォルトはcontent-box */
  margin: 50px;
}

上下左右に50pxのmarginを設定しました

ここで背景色に着目しましょう

paddingを設定した時は背景色が広がりましたが、marginを設定しても背景色はborder内に収まっていますね

つまりbackground-colorはborderの内側までの背景色を設定するプロパティということになります

身近な例に置換えよう！

さてここまでボックスモデルを解説してきましたが、いまいちイメージしづらい場合は身近な例に例えてみましょう

ボックスモデルを家に例えると次のように置換えれます

また、例で使ったコードを書き換えてみて、ブラウザでどのように見た目が変わるのかをいくつか試すのも理解の手助けになります

もし完全に理解できなくても、慣れれば意識せずに使えるようになるので立ち止まり過ぎずに次に進みましょう！

段落・見出し

App

contact