こゆめCSS便利帳

CSS便利帳

セレクタ

:is(h1,h2,h3)
複数の要素をひとまとめに指定するセレクタ（matchesだったやつ）
:target
URLでターゲットになっている要素
フォーム内で有効な値の入っているフィールドか
:valid…有効（必須項目に入力があるとか）
:invalid…無効（メールアドレスじゃないとか）

flex

親に指定

flexにする
display:flex;
改行するか
flex-wrap:nowrap;：改行しない（初期値）
flex-wrap:wrap;：改行する
向き
flex-direction:row;：文字の向きと同じ（初期値）
flex-direction:row-reverse;：文字の向きと逆
flex-direction:column;：上から下
水平の揃え
justify-content:flex-start;：文字の開始と同じ（初期値）
justify-content:center;：中央揃え
justify-content:space-between;：均等割り付け（左右余白0）
justify-content:space-around;：均等割り付け（左右余白半分）
一行の揃え
align-items:stretch;：高さいっぱいに配置（初期値）
align-items:flex-start;：上揃え
align-items:flex-end;：下揃え
align-items:center;：上下中央揃え
align-items:baseline;：ベースライン
複数行の場合の揃え
align-content:stretch;：高さいっぱいに配置（初期値）
justify-contentと同じ値が指定できる

子に指定

順番
order:順番の数字;
一括指定
flex:flex-grow flex-shrink flex-basis;
伸び率、縮み率、基本の幅
子単位での垂直位置
align-self:auto;：align-itemsによる（初期値）
align-itemsと同じ値が指定できる

grid

親に指定

gridにする
display:grid;
横グリッドの数と幅
grid-template-columns:1fr 1fr 2fr;：3つのグリッド、割合は1：1：2
grid-template-columns:repeat(4,200px);：200pxのグリッドが4つ
grid-template-columns:repeat(auto-fit,minmax(min(500px,100%),1fr));：500pxが入る分だけの数
grid-auto-columns:;
縦グリッドの数と高さ
grid-template-rows:;
grid-auto-rows:;
グリッド間の余白の縦横一括指定
gap:;
flexと同じやつ
justify-items、align-items、justify-content、align-content
flex-startとかはstartになる

子に指定

横グリッドの位置
grid-column:start/end;
縦グリッドの位置
grid-row:start/end;
flexと同じやつ
justify-self、align-self、order
flex-startとかはstartになる

画像絡み

background

背景サイズ
background-size:;
cover、contain、その他数値指定等
背景のブレンドモード
background-blend-mode:;
normal、darken、lighten、その他

img

画像のフィット方法の変更
object-fit:fill;：縦横比を変えてでも全部入れる
object-fit:contain;：拡大縮小して長辺フィット
object-fit:cover;：短辺フィット、長辺トリミング
object-fit:none;：サイズを変えない
object-fit:scale-down;：縮小して長辺フィット

変形（transform）

  • 半角空白を挟んで複数指定可能
回転
transform:rotate(角度);
拡大縮小
transform:scale(横倍率,縦倍率);
位置移動
transform:translate(横,縦);

テキストとか

font使う

@font-face {
	font-family:"フォント名";
	src:url("フォントファイル") format("truetype");
	font-weight:normal;
	font-style:normal;
}

色々

段落
columns:column-count column-width;
段落の数（auto可）、1つの段落の幅（auto可）
スムーズスクロール
scroll-behavior:smooth;
:rootに指定する
スクロール位置の上に余裕を持たせる
scroll-margin-top:5rem;
トランジション
transition:transition-property transition-duration transition-timing-function transition-delay;
対象プロパティ、所要時間、（動きのリズム、遅延時間）
表示しないやつ
display:none;
none：中身ごと非生成
contents：指定した要素のみ非生成、中身は生成
スティッキー
position:sticky;
ポインターの形を変える
cursor:pointer;