CSS 備忘録<基礎に振り返る>

CSSについて復習

今まで、なんとなくでhtmlファイルにcssを当てており、直せたから大丈夫と考えていました。
さて、GWに突入ということもあり、CSSを再思考して基礎に戻っていきたいと思います

Boxモデルとは何か

まず、大切になる考え方が「Boxモデル」。

Content: textやimageなどの中心となる物
→widthやheightで幅や高さを調整する

Padding: Contentに対しての外枠（透明なエリア）に当てるもの

Border: Paddingによってできた幅の外枠に当てるもの

Margin: Paddingに似ている物
→しかし、PaddingはContentの内側に当てるものに対して、MarginはContentの外側に当てるもの

なぜズレは起きてしまうのか

以下の具体的なコードを参考にしてズレてしまう原因を考えてみる

<div class="parent">
  親要素
  <div class="child">
    子要素
  </div>
</div>

.parent {
  width: 300;
  height: 100px;
  border: 2px dashed red;
}

.child {
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 3px solid black;
}

}

これを実際に記述してみると、親要素に囲まれた枠線から、子要素のボックスがはみ出てしまう
→上に記述した「Boxモデル」によりボックスのサイズは、「Content + Padding + Border + Margin」の合計の大きさになる
→上の例だと、childタグの幅の大きさは、width 300(100%なので親要素と同じになる) + padding 20(10 で両サイドあるので) + border 6(paddingと同じ） = 326になってしまう
→そのため、parentタグの幅300に対して26分childタグの要素が出てしまう

問題解決をするには

1.計算して記述する
→上の例だと、parentのwidthが300なので、計算してchildも300になるようにする
→例えば、widthを95%(285)にしてpaddingを4.5にすれば、合計して300になるので横にはみ出す原因は解決することができる

2.親要素に「box-sizing」プロパティを使用する
→そうすることで、contentに対して適度な大きさになるように計算してくれるようになる