【勉強メモ】 box-sizingと擬似要素

1. box-sizing

CSSのbox-sizingでは、要素の幅と高さに「paddingとborderを含めるかどうか」を指定します。

初期値はcontent-boxであり、このままでは「含まない」という指定になります。
含まない場合、要素の幅を100%にしたときなどに、paddingとborderの分だけ外側にはみ出るようになります。

（中略）
値をborder-boxにすると、含めるという指定になります。

https://web-camp.io/magazine/archives/100396

2.指定できる値

content-box　： paddingとborderのサイズを含めない ※初期値
border-box  　：paddingとborderのサイズを含める
inherit　　　　： 親要素の値を継承する

3.使い方

box-sizingは多用するプロパティではないため、ベースのスタイルに記述しておけば、個々に使う必要がほとんどありません。

https://jajaaan.co.jp/web-production/frontend/box-sizing/

要素に個別に設定すると、逆に「効かない」原因となることも。
記述ミスを減らすためにも、cssの冒頭のユニバーサルセレクタとhtmlセレクタに記述してしまうのがベスト！らしい！
一部変更する時のみ、個別に付与。

• ユニバーサルセレクタ→inherit

• htmlセレクタ→border-box

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

https://jajaaan.co.jp/web-production/frontend/box-sizing/

これで全ての要素にborder-boxが適用される。

最初にinheritを指定した意味
→一部をcontent-boxに変更する場合、変更したい要素の親にcontent-boxを指定するだけでその子まで適応される。
なので子まで書き換える必要がなくなる。

★content-boxは初期値なので、これをあえて指定はしなくても良いかもだけど、inheritは指定しておいて良いと思う。

border-boxとcontent-boxの使い分けは、デザイン次第。

補足

ユニバーサルセレクタ

「*」でスタイルを記述するというものです。
すべての要素に対してスタイルが適用されるため、本当に基礎的なものにしか使用しないようにするのが注意点です。

https://jajaaan.co.jp/web-production/frontend/box-sizing/

* {
	/* 全ての要素に適用するスタイル */
}


https://weblan3.com/css/reference-css-asterisk

擬似要素、擬似クラス

擬似要素とは指定した要素の特定の部分にスタイルを付けられるものです。
CSSで擬似的に要素が作成されるので、HTMLを操作せずに要素を追加できます。
擬似要素と似ている擬似クラスというものもあるのですが、指定方法が若干違うようです。

https://b-risk.jp/blog/2022/03/pseudo_elements/

疑似要素　 ｜　二重コロン (::)
HTML上で指定されていない範囲や存在していない要素に適用するセレクタ

疑似クラス　｜　単一コロン (:)
要素が特定の状態にある場合にのみ適用するセレクタ　※ :hoverとか:active

::beforeまたは::afterを指定する場合、
必ずcontentを指定する必要があります。

テキストや記号を擬似要素として挿入したい場合は、
content内に記述してください。

テキストや記号以外の要素や画像を挿入したい場合は、
contentを空(content: "";)にします。

https://b-risk.jp/blog/2022/03/pseudo_elements/

擬似要素の例

::before ： 要素の直前に内容（content）を追加
::after　： 要素の直後に内容（content）を追加

https://laro.jp/lesson/css/css-before-after/

初期値はインライン要素。

出典・参考：
https://web-camp.io/magazine/archives/100396
https://jajaaan.co.jp/web-production/frontend/box-sizing/　
https://weblan3.com/css/reference-css-asterisk　
https://www.omakase.net/blog/2021/02/GiziYousoClass.html　
https://b-risk.jp/blog/2022/03/pseudo_elements/　
https://laro.jp/lesson/css/css-before-after/