スタイルシート

ボックスモデル

要素が何重にも入れ子になっていると、期待していた挙動にならない場合があるので注意

要素のサイズは明示的にwidthなどで指定しない限り、コンテンツのサイズを元に計算される。

borderとoutlineの違い

フレックスボックス

ページ全体を中央に寄せたい→justify-content: centerを設定

flex-growを0:1の割合で設定する

width: 0とした上でflex-growを0でない値に設定する

ページの外が見えてしまう

ルート要素にheight: 100vhを指定する

スタイル管理

いくつかのプロパティをまとめて、デザインコンセプトとして意味のある名前をつける

CSS Modules, CSS-in-JS Utility First Tailwind, Bootstrap, Bulma