モーダルウィンドウなどを簡単に真ん中に配置できる、「inset（インセット）」と関連するCSSプロパティを解説！

動画内で説明していた、fit-contentの動画はこちら
https://factory-programming-mv.com/video/2nS-Vc_9Wb4/


今回の動画では、「inset」プロパティの使用方法について詳しく解説します。このプロパティを使用すると、モーダルウィンドウの画面の上下左右の配置が直感的に行えます。以前の配置方法とは異なり、この新しい方法を使うと、配置の理由や原因がより分かりやすくなります。

・insetの基本
insetは、CSSのプロパティの一つで、要素の上下左右の位置を一括で指定できます。
通常、要素の位置はtop、right、bottom、leftのプロパティを使用して個別に指定しますが、insetを使用するとこれらの指定を一度に行えます。

・指定の方法
insetを1つだけ指定すると、全ての辺にその値が適用されます。
2つ指定すると、上下と左右に適用されます。
3つ指定すると、上、左右、下の順に適用されます。
4つ指定すると、上、右、下、左の順に適用されます。
このような指定方法は、マージン(margin)やパディング(padding)の指定方法と類似しています。

・実際の使用例
VSCodeを使用し、HTMLとCSSのファイルを編集します。
サンプルコードでは、メインコンテンツとセンタリングのテキストを配置します。
このとき、insetを使用して、テキストを画面中央に配置します。
さらに、フィックスド(fixed)の位置指定や、フィットコンテント(fit-content)の使用方法についても触れられています。