CSSのボックスモデルとbox-sizingを理解する

2020年12月10日CSS

CSSのボックスモデルを理解することで、とても自由にレイアウトが組めるようになります。 この記事を読むことで、
  • widthとheightを理解する
  • borderを理解する
  • paddingを理解する
  • marginを理解する
  • marginの相殺を理解する
  • box-sizingを使いこなす
ようになります。 逆にボックスモデルを理解していない場合、レイアウトが崩れてしまうことが多々起こるので、 しっかりと理解していきましょう。


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

まずは、widthとheightについて理解していきましょう。 コンテンツの幅と高さは、widthプロパティとheightプロパティで指定します。 そして、 border　ボーダーを指定します。 padding　ボーダーの内側からコンテンツまでのサイズを指定します。 margin　ボーダーの外側のサイズを指定します。


widthとheightの指定

width px, %による指定 height overflow 
<div class="box1">
    <!-- Box 1 -->
    <div class="box2">Box 2 こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</div>
  </div>
  <div class="box3">Box 3</div>
.box1 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

.box2 {
  background-color: skyblue;
  width: 50%;
  height: 50%;
  /* overflow: hidden; */
  overflow: scroll;
}

.box3 {
  background-color: tomato;
}

borderの指定

border-widthプロパティ border-styleプロパティ border-colorプロパティ border-radiusプロパティ
はborderという一括指定プロパティを使うこともできます。 border-styleはsolid, dashed, などいろいろあります。mdnで確認できます。 下の線だけなくしたい場合は、
 border: 2px solid blue;で全体を一度囲ってあげて、
  /* border-bottom: none; */で下だけ消してあげるといった方法があります。 境界線を丸めたい場合、border-radiusを使います。 
<div class="box1">
    <!-- Box 1 -->
    <div class="box2">Box 2</div>
  </div>
  <div class="box3">Box 3</div>
.box1 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

.box2 {
  background-color: skyblue;
  width: 50%;
  height: 50%;
  /* border-width: 2px;
  border-style: solid;
  border-color: blue; */
  /* border: 2px solid blue; */
  /* border: 2px dashed blue; */
  /* border-top: 2px dashed blue;
  border-bottom: 2px dashed blue; */
  border: 2px solid blue;
  /* border-bottom: none; */
  border-radius: 10px;
}

.box3 {
  background-color: tomato;
}

paddingで内側の余白を指定

borderの内側の指定がpaddingプロパティです。 padding-topで上
padding–rightで右
padding–bottomで下
padding–leftで左
を指定する方法があります。 また、paddingで一括指定することができます。 一括指定にもいつくか種類があります。 4つで指定した場合
上、右、下、左、と時計回りになります。 3つで指定した場合

上、左右、下という指定になります。 2つで指定した場合
上下、左右の指定になります。 1つで指定した場合
上下左右すべての指定になります。 
 <div class="box1">
    <!-- Box 1 -->
    <div class="box2">Box 2</div>
  </div>
  <div class="box3">Box 3</div>
.box1 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

.box2 {
  background-color: skyblue;
  width: 50%;
  height: 50%;
  border: 2px solid blue;
  padding-top: 20px;
  padding-left: 40px;
}

.box3 {
  background-color: tomato;
}

marginで外側の余白

marginもpaddingと指定方法はほぼ同じです。 marginプロパティは、さらにautoというのが使えます。 margin-left: auto;
と指定すると、指定したものが左に割り当てられるという意味になります。 margin-left: auto; margin-right: auto; 左右のmarginにautoを設定すると、真ん中に配置することができます。

marginの相殺

  • BOX1の下に20px
  • BOX2の下に10px
と
指定した場合、相殺されて20pxのみになるという現状をmarginの相殺といいます。 marginは垂直方向では、小さいほうが打ち消されるという仕様になっています。 レイアウトを決める上で思い通りにならない場合は、marginの相殺というのがあるんだなと思い出せるようにしておきましょう。

box-sizingを使いこなす

上で説明したとおり、通常、ボックスモデルではwidthとheightはpaddingとmarginを含んでいません。 そこから、計算をすると、とても複雑になります。 そこで、box-sizingプロパティの登場です。 box-sizingプロパティを利用することでたとえばborder-boxを指定すると、borderとpaddingまで含めて、widthとheightを指定することができます。

CSS

Posted by devsakaso