| サイズと計算 |
|---|
| 混合単位を含む算術式の結果。 | width: calc(100% - 2rem); |
| 指定した値のうち最小のもの。 | width: min(100%, 60ch); |
| 指定した値のうち最大のもの。 | width: max(320px, 40vw); |
| 最小値、推奨値、最大値の間に制限された値。 | font-size: clamp(1rem, 2vw, 1.5rem); |
| ユーザーエージェントが提供する環境変数を読み取る。 | padding: env(safe-area-inset-top); |
| コンテンツの内在幅に制限されたサイズ。 | width: fit-content(200px); |
| ある値を別の値の最も近い倍数に丸める。 | width: round(up, 133px, 50px); |
| 除算の正の余り。常に負にならない。 | margin: mod(100px, 30px); |
| 除算の余り。被除数の符号を保持する。 | margin: rem(-100px, 30px); |
| 絶対値。 | translateX(abs(-10px)); |
| 値の符号に応じて -1、0、または 1。 | padding: sign(-5px) * 10px; |
| グリッド |
|---|
| グリッドトラックのための、最小値と最大値の間のサイズ範囲。 | grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); |
| トラックパターンを指定回数、または埋まるまで繰り返す。 | grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| ロジックと条件 |
|---|
| 条件に基づいて2つの値のいずれかを選ぶ。 | font-size: if(media(width > 600px), 1.25rem, 1rem); |
| メディアクエリーが一致するとき真。if()の中で使う。 | padding: if(media(width > 40rem), 2rem, 1rem); |
| ブラウザーが宣言に対応しているとき真。if()の中で使う。 | display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); |
| セレクターが一致するとき真。if()の中で使う。 | font-weight: if(selector(:hover), 700, 400); |
| カスタムプロパティ |
|---|
| カスタムプロパティの値。オプションのフォールバックを指定できる。 | color: var(--accent, #333); |
| 色 |
|---|
| 赤、緑、青（およびアルファ）のチャンネルから作る色。 | color: rgb(59 130 246 / 0.8); |
| 色相、彩度、明度から作る色。 | color: hsl(210 80% 50%); |
| 知覚的なOKLCH色空間での色（一貫した明度）。 | color: oklch(0.7 0.15 250); |
| 指定した色空間で2色をブレンドした色。 | color: color-mix(in srgb, red 40%, blue); |
| リストの中でベースとのコントラストが最も高い選択肢。 | color: color-contrast(#fff vs #000, #777); |
| 色相、白色度、黒色度から作る色。 | color: hwb(210 10% 20%); |
| CIELAB色空間での色（明度、a軸、b軸）。 | color: lab(52% 40 59); |
| CIELAB色空間での色（明度、彩度、色相）。 | color: lch(52% 49 24); |
| 定義済みの任意の色空間を座標で指定した色。 | color: color(display-p3 1 0.4 0.2); |
| ライトスキームでは1つ目の色、ダークスキームでは2つ目の色。 | color: light-dark(#1a1a1a, #f5f5f5); |
| グラデーションと画像 |
|---|
| 直線に沿って広がるグラデーション。 | background: linear-gradient(90deg, #4b9fff, #2ee6a6); |
| 1点から外側へ放射するグラデーション。 | background: radial-gradient(circle, #fff, #000); |
| 中心点の周りを一周するグラデーション。 | background: conic-gradient(red, yellow, red); |
| 画像、フォント、SVGなどの外部リソースを読み込む。 | background-image: url(hero.webp); |
| デバイスの解像度に最も適した画像を選ぶ。 | background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); |
| 2枚の画像を指定した割合でブレンドする。 | background-image: cross-fade(30%, url(a.webp), url(b.webp)); |
| フィルターと図形 |
|---|
| filterプロパティの中で使うピクセルフィルター。 | filter: blur(4px) brightness(1.1); |
| クリップや図形の描画に使うSVGパス文字列。 | clip-path: path('M10 10 H 90 V 90 Z'); |
| HTML属性の値を読み取る。contentの外では使用が限られる。 | content: attr(data-label); |
| 要素のコントラストを調整する。 | filter: contrast(1.4); |
| 要素のアルファ形状に沿って影を描く。 | filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); |
| 要素をグレースケールに変換する。 | filter: grayscale(100%); |
| 要素の色を反転する。 | filter: invert(1); |
| セピア調を適用する。 | filter: sepia(0.6); |
| 要素の色の色相を回転させる。 | filter: hue-rotate(90deg); |
| filter経由で要素の不透明度を設定する。 | filter: opacity(0.5); |
| clip-pathやshape-outsideで使う円の形状。 | clip-path: circle(40% at 50% 50%); |
| clip-pathやshape-outsideで使う楕円の形状。 | clip-path: ellipse(50% 35% at 50% 50%); |
| clip-pathで使う角丸の長方形。 | clip-path: inset(10px 10px 10px 10px round 8px); |
| 点のリストから作る多角形。 | clip-path: polygon(50% 0, 100% 100%, 0 100%); |
| 変形 |
|---|
| 要素をX方向とY方向に移動する。 | transform: translate(10px, 20px); |
| 要素を中心の周りで回転させる。 | transform: rotate(45deg); |
| 要素をX方向とY方向に拡大縮小する。 | transform: scale(1.25); |
| 要素をX方向とY方向に傾ける。 | transform: skew(10deg, 0deg); |
| 6つの行列値からなる2D変形。 | transform: matrix(1, 0, 0.5, 1, 10, 0); |
| 要素の子孫のための3D遠近深度を設定する。 | transform: perspective(600px) rotateY(20deg); |
| アニメーションとカウンター |
|---|
| 4つの制御点から作るイージング曲線。 | transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); |
| 等しいステップでジャンプするイージング。 | animation-timing-function: steps(8, end); |
| CSSカウンターの現在値。contentとして使う。 | content: counter(chapter); |
| カウンターとその祖先すべての値を、文字列で連結したもの。 | content: counters(item, "."); |
| 値が開始点から終了点へ進むにつれて0から1へ変化する。 | opacity: progress(scroll(), 0, 50vh); |
| 範囲から選んだ乱数。要素ごとに固定される。 | rotate: random(from -5deg to 5deg); |
| 角度のサイン。calc式で使う。 | translateY(calc(1rem * sin(45deg))); |
| 角度のコサイン。calc式で使う。 | translateX(calc(1rem * cos(45deg))); |