作ったもの
CSS Props Ref — https://sen.ltd/portfolio/css-props-ref/
- 72 個の CSS プロパティを 6 カテゴリに分類
- 各プロパティにライブプレビュー付き（値をクリックすると即反映）
- 名前 / 説明 / 値で検索
- カテゴリフィルタ（レイアウト / ボックスモデル / 文字 / 色・背景 / エフェクト / 変形・アニメ）
- 日英併記
vanilla JS、ゼロ依存、ビルド不要。node --test で 38 ケース。
スコープ付きスタイル注入
各プレビューカードに一意の data-preview-id を付与し、スコープ付きセレクタで動的 CSS を生成:
const scope = `[data-preview-id="${id}"]`;
const css = `${scope} ${prop.preview.target} { ${prop.name}: ${value}; }`;
これで display: flex の変更が隣のカードに漏れない。<style> タグを要素内に動的生成し、textContent を書き換える。
content プロパティの扱い
content は擬似要素限定。セレクタに ::before を付加:
const selector = prop.name === 'content' ? '.target::before' : '.target';
言語対応検索
日本語「中央」で text-align: center がヒット、英語 "flex" で flex 系が全部ヒット。説明フィールドと値配列の両方を検索対象に。
シリーズ
100+ 公開ポートフォリオ シリーズの #73 です。