webstudioWhitePallet

CSS3が本格的に実装可能になってきたので良く使うプロパティメモ。

カラム(親要素に指定)

ul{ display:flex; justify-content:center; flex-wrap:wrap; }

padding等で要素の膨らみを無くす

li{ box-sizing:border-box; width:200px; padding:50px; border:4px solid #000; }

%からpxを+-する

div{ width:calc(100% - 40px); }

画像を親要素のサイズに合わせる

.img_box{ width:300px; height:200px; } .img_box img{ width:100%; height:100%; object-fit:cover; }

定義型変数

:root{ --bgcolor:#f8f8ff; } div{ background:var(--bgcolor); }

はみ出した文字を「…」と表示

.text{ text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }

スクロール

.wrap{ overflow-x:hidden; overflow-y: scroll; scroll-behavior: smooth; }

スクロールに合わせて要素が上下（オマケ）

h2{ position:sticky; } ※ 先祖要素に「overflow:hidden」があると効かない等 まだまだバグがあるようなのでjavascriptが無難。