box-sizingとは?幅、高さに関係してくる重要プロパティの説明

こんにちは tanaka です。

今回は、
cssプロパティ
box-sizing の説明です。

box-sizingは、
幅、高さを決める
プロパティの1つです。


幅、高さは、
1:width、heightで
  数量を決定した後

2:box-sizingで
  ボックスモデルのどこまで適用させるか
  を決めます。(ボックスモデルへの適用)

 1:width、height = 幅、高さの数量を決める
 2:box-sizing   = ボックスモデルのどこまでを
             幅、高さにするか(ボックスモデルへの適用)


box-sizingの値は、
content-box、border-boxの
2つあります。

 ・content-box = contentだけ適用
 ・border-box = content + padding + borderを適用


box-sizingは、
サイトを作る前に

content-box
border-box

どちらでいくのか
先に決めた方が良い
プロパティでもあります。

それでは、
詳しく見て行きましょう。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

box-sizingの説明

box-sizingとは

box-sizingは、
幅、高さを決定する
プロパティ2種の1つです。

幅、高さを決定づける重要な2種類のプロパティ

1:width、height = 幅、高さの数量を決める
2:box-sizing   = ボックスモデルのどこまでを
            幅、高さにするか(ボックスモデルへの適用)

幅、高さは、
width、heightで具体的な数量を決定した後
box-sizingでボックスモデルのどこまで適用させるかを決める。

box-sizingの値

box-sizingの値は、
content-box
border-box
の、2種類があります。

content-box

content-boxは、
contentだけをwidth、heightとして適用させます。

画像blog-css-box-sizing01

border-box

border-boxは、
borderまでをwidth、heightとして適用させます

画像blog-css-box-sizing02

box-sizingは、
サイトを作る前に

content-box
border-box
どちらでいくのかを
決めた方が良いプロパティでもあります。

まとめ

box-sizingとは

box-sizingは、
幅、高さを決定するプロパティ
2種の1つです。

 1:width、height = 幅、高さの数量を決める
 2:box-sizing   = ボックスモデルのどこまでを
             幅、高さにするか(ボックスモデルへの適用)

box-sizingの値は2種類

box-sizingの値は、
content-box、border-boxの
2種類あります。

content-box

画像blog-css-box-sizing01

border-box

画像blog-css-box-sizing02
別々の設定はできない

box-sizingの設定は、
幅、高さともに連動するので

 幅  = content-box
 高さ = border-box

などの
それぞれ別設定はできない。

先に決めた方が良い

box-sizingは、
サイトを作る前に

content-box、border-box
どちらでいくのかを
決めた方が良い。

以上、
box-sizing
の話でした。

ありがとうございました。

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