{ "name": "WazaScout", "description": "HTML表現の手数カタログ（スライド/LP/Webサイト制作用）", "updated": "2026-08-11", "categories": [ { "key": "scroll", "label": "スクロール演出", "count": 22 }, { "key": "text", "label": "文字・タイポ演出", "count": 38 }, { "key": "layout", "label": "レイアウト設計", "count": 31 }, { "key": "shape", "label": "図形・マスク・切り抜き", "count": 21 }, { "key": "motion", "label": "アニメーション基礎", "count": 23 }, { "key": "interact", "label": "インタラクション・UI操作", "count": 26 }, { "key": "depth", "label": "3D・奥行き", "count": 19 }, { "key": "background", "label": "背景・雰囲気", "count": 27 }, { "key": "component", "label": "UI部品・コンポーネント", "count": 38 }, { "key": "svgfx", "label": "SVG表現", "count": 47 }, { "key": "slide", "label": "スライド特化", "count": 18 }, { "key": "media", "label": "画像・動画", "count": 21 } ], "useFor": [ { "key": "slide", "label": "スライド", "count": 120 }, { "key": "lp", "label": "LP", "count": 299 }, { "key": "site", "label": "Webサイト", "count": 292 } ], "entries": [ { "id": "scroll-snap", "num": "W-001", "name": "CSS Scroll Snap", "nameJa": "スクロール吸着", "category": "scroll", "description": "スクロールを離すと最寄りの要素にピタッと止まる表現。親要素に scroll-snap-type: x mandatory、子要素に scroll-snap-align: center を指定するだけでJS不要で実装できる。", "useCase": "カルーセルやフルスクリーンの章送りスライド、LPのセクション送りで、スクロール位置を毎回ジャストな位置に揃えたいときに使う。", "code": ".snap-track{\n display:flex;\n overflow-x:auto;\n scroll-snap-type:x mandatory;\n}\n.snap-track>*{\n flex:0 0 100%;\n scroll-snap-align:center;\n}", "tags": [ "CSS", "スクロール", "カルーセル", "レイアウト", "ぬるっと", "スパッと決まる", "没入感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "scroll-text-highlight", "carousel-scroll-snap", "vertical-scroll-snap", "smooth-scroll" ] }, { "id": "scroll-driven-animation", "num": "W-002", "name": "Scroll-Driven Animation", "nameJa": "スクロール駆動アニメーション", "category": "scroll", "description": "スクロール量そのものをアニメの再生位置として使うネイティブ表現。animation-timeline: scroll() をCSSに紐付けるだけで、JS計算なしに進捗バーや伸縮演出を作れる。", "useCase": "読了プログレスバーやスクロール量に比例した図形の伸縮・回転など、JS計算なしでスクロール連動の動きを作りたい場面。", "code": "@keyframes sdrv-grow{ from{transform:scaleX(0)} to{transform:scaleX(1)} }\n.sdrv-bar{\n transform-origin:left;\n animation:sdrv-grow linear;\n animation-timeline:scroll(root);\n}", "tags": [ "CSS", "スクロール", "アニメーション", "進捗", "ぬるっと", "連動感", "最新仕様" ], "support": "新しく普及中", "svg": "animation-timeline: scroll()scroll量 = 再生位置", "useFor": [ "lp" ], "weight": "脇役", "relatedIds": [ "view-timeline-reveal", "scroll-text-highlight", "smooth-scroll", "scroll-snap" ] }, { "id": "view-timeline-reveal", "num": "W-003", "name": "View Timeline Reveal", "nameJa": "ビュータイムライン出現", "category": "scroll", "description": "要素がビューポートに入ってから出るまでの通過区間を再生時間にするネイティブ演出。animation-timeline: view() を使い、IntersectionObserverなしで出現アニメを組める。", "useCase": "カード一覧やギャラリーを、スクロールに合わせて個別にふわっと出現させたいがJSを増やしたくない場面。", "code": "@keyframes vtln-in{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }\n.vtln-card{\n animation:vtln-in linear both;\n animation-timeline:view();\n animation-range:entry 0% cover 40%;\n}", "tags": [ "CSS", "スクロール", "アニメーション", "出現", "ふわっと", "軽快", "最新仕様" ], "support": "新しく普及中", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "scroll-driven-animation", "scroll-reveal", "clip-path-reveal", "scroll-triggered-animation" ] }, { "id": "sticky-position", "num": "W-004", "name": "Sticky Positioning", "nameJa": "スティッキー固定", "category": "scroll", "description": "指定した親の範囲内でスクロールしても要素がその場に貼り付いたように見える表現。position: sticky と top だけで実装でき、JSのscrollイベント監視は不要。", "useCase": "見出しの追従表示、サイドナビの固定、比較表の先頭列固定など、文脈を保ちながらスクロールさせたい場面。", "code": ".stky-heading{\n position:sticky;\n top:0;\n background:var(--w-bg,#101830);\n}", "tags": [ "CSS", "スクロール", "固定", "ナビゲーション", "追従感", "さりげない", "安心感" ], "support": "広く対応", "svg": "sticky header", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "overscroll-behavior", "smooth-scroll", "sticky-header-shrink", "scroll-margin-padding" ] }, { "id": "sticky-header-shrink", "num": "W-005", "name": "Sticky Header Shrink", "nameJa": "ヘッダー縮小演出", "category": "scroll", "description": "ページ上部から少しスクロールすると、ヘッダーが薄く小さく半透明に変わる表現。scroll判定で is-scrolled クラスを付け、padding や backdrop-filter を transition で変化させる。", "useCase": "サイト全体で常時表示するヘッダーを、コンテンツを邪魔せずブランドを見せ続けたいコーポレートサイトやLP。", "code": ".shsh-header{\n padding:24px; transition:.3s;\n}\n.shsh-header.is-scrolled{\n padding:10px;\n background:color-mix(in srgb, var(--w-bg,#101830) 80%, transparent);\n backdrop-filter:blur(8px);\n}", "tags": [ "CSS", "JS", "スクロール", "ヘッダー", "上品", "さりげない", "定番" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "smooth-scroll", "scroll-reveal", "sticky-position", "scrollytelling" ] }, { "id": "parallax-scroll", "num": "W-006", "name": "Parallax Scroll", "nameJa": "パララックス", "category": "scroll", "description": "背景と前景を異なる速度で動かして奥行きを演出する表現。perspective と translateZ を使うCSSトリック、またはscrollイベントでtranslateYを変えるJS実装がある。", "useCase": "ヒーローセクションの背景に立体感を出したい、世界観を見せたいストーリー性のあるLP導入部で使う。", "code": ".plx-scene{ perspective:1px; overflow-y:auto; height:100%; }\n.plx-back{ transform:translateZ(-1px) scale(2); }\n.plx-front{ transform:translateZ(0); }", "tags": [ "CSS", "スクロール", "奥行き", "背景", "没入感", "ダイナミック", "立体感" ], "support": "広く対応", "svg": "", "useFor": [ "lp" ], "weight": "主役", "relatedIds": [ "parallax-background", "horizontal-scroll-section", "image-clip-reveal", "vertical-scroll-snap" ] }, { "id": "scroll-reveal", "num": "W-007", "name": "Scroll Reveal", "nameJa": "スクロール出現", "category": "scroll", "description": "要素が画面に入った瞬間にフェードやスライドで現れる表現。IntersectionObserverで交差を検知し is-visible クラスを付与、CSSのtransitionで動かす。", "useCase": "LPの各セクション見出しやカードを、下にスクロールするたびに順番に登場させて視線を誘導したいとき。", "code": "const io=new IntersectionObserver(es=>es.forEach(e=>\n e.isIntersecting&&e.target.classList.add('is-visible')));\ndocument.querySelectorAll('.reveal').forEach(el=>io.observe(el));\n\n.reveal{opacity:0;transform:translateY(24px);transition:.6s}\n.reveal.is-visible{opacity:1;transform:none}", "tags": [ "JS", "CSS", "スクロール", "出現", "ふわっと", "目を引く", "定番" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "view-timeline-reveal", "sticky-header-shrink", "horizontal-scroll-section", "starting-style" ] }, { "id": "scrollytelling", "num": "W-008", "name": "Scrollytelling", "nameJa": "スクロリーテリング", "category": "scroll", "description": "画面中央にビジュアルを固定し、その脇をテキストが流れていくことで物語を進める表現。position: sticky のビジュアルパネルと、ステップ検知で状態を切り替えるテキストブロックを組み合わせる。", "useCase": "サービスの仕組み解説や数値推移の説明など、1つの図をスクロールで少しずつ書き換えながら読ませたい長尺LP。", "code": ".sctl-wrap{ display:grid; grid-template-columns:1fr 1fr; }\n.sctl-visual{ position:sticky; top:0; height:100vh; }\n.sctl-steps{ display:flex; flex-direction:column; gap:100vh; }\n/* IntersectionObserverで各stepの通過を検知しvisualの表示を切替 */", "tags": [ "CSS", "JS", "スクロール", "ストーリー", "没入感", "引き込まれる", "解説" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "horizontal-scroll-section", "parallax-background", "vertical-scroll-snap", "scroll-snap" ] }, { "id": "scroll-text-highlight", "num": "W-009", "name": "Scroll Text Highlight", "nameJa": "スクロール連動テキストハイライト", "category": "scroll", "description": "文章を読み進める速さに合わせて行や単語がマーカーで塗られていく表現。IntersectionObserverや animation-timeline: view() で交差率を取得し、背景の scaleX を伸ばして塗る。", "useCase": "インタビュー記事やコンセプト文で、読み手の視線誘導と読んでいる実感を演出したい縦長セクション。", "code": ".sthl-mark{\n transform-origin:left;\n transform:scaleX(0);\n animation:sthl-fill linear both;\n animation-timeline:view();\n animation-range:entry 10% cover 50%;\n}\n@keyframes sthl-fill{ to{transform:scaleX(1)} }", "tags": [ "CSS", "スクロール", "テキスト", "強調", "ぬるっと", "没入感", "最新仕様" ], "support": "新しく普及中", "svg": "読み進めるほど文章が色づいていく読了体験の演出", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "scroll-snap", "scroll-driven-animation", "vertical-scroll-snap", "smooth-scroll" ] }, { "id": "reading-progress-bar", "num": "W-010", "name": "Reading Progress Bar", "nameJa": "読了プログレスバー", "category": "scroll", "description": "記事をどこまで読んだかを画面上部の細いバーで示す表現。scrollイベントで scrollTop / (scrollHeight - clientHeight) を計算し、バーの width に反映する。", "useCase": "長文のnote記事やLPの縦長ページで、読者に残り分量を意識させ離脱を防ぎたいときに使う。", "code": "addEventListener('scroll',()=>{\n const h=document.documentElement;\n const pct=h.scrollTop/(h.scrollHeight-h.clientHeight)*100;\n bar.style.width=pct+'%';\n});", "tags": [ "JS", "スクロール", "進捗", "ナビゲーション", "わかりやすい", "定番", "ミニマル" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "smooth-scroll", "sticky-header-shrink", "scroll-reveal", "scroll-snap-events" ] }, { "id": "count-up-on-scroll", "num": "W-011", "name": "Count-Up on Scroll", "nameJa": "スクロール連動カウントアップ", "category": "scroll", "description": "数字要素が画面に入った瞬間に0から目標値までカウントアップする表現。IntersectionObserverで表示を検知し、requestAnimationFrameで数値をイージング付きに増やしてテキストへ反映する。", "useCase": "実績数値や導入社数、削減率などのKPIをLPで印象的に見せたい統計セクションに使う。", "code": "const io=new IntersectionObserver(es=>es.forEach(e=>{\n if(!e.isIntersecting)return;\n const to=+e.target.dataset.to, t0=performance.now();\n const tick=t=>{\n const p=Math.min(1,(t-t0)/1200);\n const eased=1-Math.pow(1-p,3);\n e.target.textContent=Math.round(eased*to);\n if(p<1) requestAnimationFrame(tick);\n };\n requestAnimationFrame(tick);\n}));", "tags": [ "JS", "スクロール", "数字", "インパクト", "目を引く", "説得力", "高級感" ], "support": "広く対応", "svg": "0%25%58%86%100%導入企業数を達成率で表示", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "scroll-reveal", "horizontal-scroll-section", "custom-cursor", "sticky-header-shrink" ] }, { "id": "horizontal-scroll-section", "num": "W-012", "name": "Horizontal Scroll Section", "nameJa": "横スクロールセクション", "category": "scroll", "description": "縦スクロール中の1区間だけ中身が横方向に流れる表現。セクション高さをコンテンツ幅分だけ確保し position: sticky で固定した内側を translateX で動かす。", "useCase": "ギャラリーや年表、実績一覧を「めくる」ように見せたい、縦一辺倒のLPにリズムを付けたいセクション。", "code": ".hscr-outer{ height:300vh; position:relative; }\n.hscr-sticky{ position:sticky; top:0; overflow:hidden; height:100vh; }\n.hscr-track{ display:flex; will-change:transform; }\n/* JS: track.style.transform = `translateX(-${scrollRatio*maxShift}px)` */", "tags": [ "CSS", "JS", "スクロール", "横スクロール", "ダイナミック", "目を引く", "没入感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "parallax-background", "parallax-scroll", "scroll-reveal", "scrollytelling" ] }, { "id": "smooth-scroll", "num": "W-013", "name": "Smooth Scroll", "nameJa": "スムーススクロール", "category": "scroll", "description": "アンカーリンクやJSでのスクロール移動を、瞬間移動ではなく滑らかな慣性付きの動きにする表現。scroll-behavior: smooth をCSS1行で有効化できる。", "useCase": "ページ内ナビの「詳細を見る」リンクや目次クリック時に、移動先までの流れを見せて迷子を防ぎたいとき。", "code": "html{\n scroll-behavior:smooth;\n}", "tags": [ "CSS", "スクロール", "ナビゲーション", "ぬるっと", "上品", "定番" ], "support": "広く対応", "svg": "目次リンク#target", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "sticky-header-shrink", "scroll-snap", "scroll-driven-animation", "sticky-position" ] }, { "id": "overscroll-behavior", "num": "W-014", "name": "Overscroll Behavior", "nameJa": "オーバースクロール制御", "category": "scroll", "description": "スクロール端に達したときの挙動（親ページへの伝播やバウンス）を制御する表現。overscroll-behavior: contain でモーダル内スクロールが背後のページを巻き込むのを止められる。", "useCase": "モーダルやドロワー、チャットの吹き出し欄など、内側だけスクロールさせて背景ページを固定したい場面。", "code": ".oscb-modal-body{\n overflow-y:auto;\n overscroll-behavior:contain;\n}", "tags": [ "CSS", "スクロール", "モーダル", "制御", "さりげない", "安心感", "実務向け" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "sticky-position", "scroll-margin-padding", "sticky-header-shrink", "custom-scrollbar" ] }, { "id": "scroll-margin-padding", "num": "W-015", "name": "Scroll Margin & Padding", "nameJa": "スクロール位置の余白調整", "category": "scroll", "description": "アンカー移動やスナップで要素が画面端にピッタリ張り付いて隠れるのを防ぐ表現。対象要素に scroll-margin-top、コンテナに scroll-padding-top を指定して停止位置をずらす。", "useCase": "固定ヘッダーがある目次ジャンプや章送りで、見出しがヘッダーの下に隠れないよう調整したいとき。", "code": ".smgp-section{\n scroll-margin-top:72px; /* 固定ヘッダー分ずらす */\n}\n.smgp-container{\n scroll-padding-top:72px;\n}", "tags": [ "CSS", "スクロール", "アンカー", "レイアウト", "さりげない", "地味に重要", "実務向け" ], "support": "広く対応", "svg": "固定ヘッダー", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "overscroll-behavior", "scroll-snap", "sticky-position", "sticky-header-shrink" ] }, { "id": "custom-scrollbar", "num": "W-016", "name": "Custom Scrollbar Styling", "nameJa": "スクロールバーのスタイリング", "category": "scroll", "description": "OS標準の太いスクロールバーを細くブランドカラーに変える表現。標準仕様の scrollbar-width / scrollbar-color と、Chrome系向けの ::-webkit-scrollbar 疑似要素を併用する。", "useCase": "コード風UIやギャラリーの横スクロール枠など、スクロールバー自体もデザインの一部として見せたい場面。", "code": ".cscr-panel{\n scrollbar-width:thin;\n scrollbar-color:var(--w-accent,#4fe3c1) transparent;\n}\n.cscr-panel::-webkit-scrollbar{ width:8px; }\n.cscr-panel::-webkit-scrollbar-thumb{\n background:var(--w-accent,#4fe3c1); border-radius:4px;\n}", "tags": [ "CSS", "スクロール", "装飾", "ブランディング", "こだわり", "さりげない", "高級感" ], "support": "限定対応", "svg": "", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "outline-text-bg", "sticky-position", "sticky-header-shrink", "overscroll-behavior" ] }, { "id": "scroll-snap-events", "num": "W-017", "name": "Scroll Snap Events", "nameJa": "スナップイベント検知", "category": "scroll", "description": "スナップ先の要素が切り替わった瞬間をJSで検知する表現。scrollsnapchange イベントで現在の対象要素を受け取り、ドットナビのアクティブ表示などをスナップと同期させる。", "useCase": "フルスクリーンスライドや横スクロールカルーセルで、現在位置を示すページネーションドットをスナップに正確に連動させたいとき。", "code": "track.addEventListener('scrollsnapchange',(e)=>{\n dots.forEach(d=>d.classList.remove('is-active'));\n const i=[...track.children].indexOf(e.snapTargetInline);\n dots[i]?.classList.add('is-active');\n});", "tags": [ "JS", "スクロール", "スナップ", "ナビゲーション", "きっちり", "キビキビ", "最新仕様" ], "support": "限定対応", "svg": "scrollsnapchange → dot更新", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "reading-progress-bar", "scroll-spy-nav", "arrow-key-nav", "smooth-scroll" ] }, { "id": "gradient-text", "num": "W-018", "name": "Gradient Text", "nameJa": "グラデーション文字", "category": "text", "description": "見出しの文字部分だけにグラデーションを適用する表現。background-clip: text で背景色を文字の形にくり抜き、color: transparent と組み合わせて実装する。CSSのみで完結する手軽さが魅力。", "useCase": "ヒーローセクションの大見出しやロゴ文字に、ブランドカラーの奥行きとグラデーションの高級感を出したいときに使う。", "code": ".gtxt-heading{\n background: linear-gradient(90deg,#4fe3c1,#ffc857);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n}", "tags": [ "CSS", "グラデーション", "見出し", "高級感", "目を引く", "ブランド" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n Aa\n \n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "gradient-border", "duotone-image", "text-image-fill", "mesh-gradient" ] }, { "id": "typewriter", "num": "W-019", "name": "Typewriter Effect", "nameJa": "タイプライター演出", "category": "text", "description": "文字が1文字ずつ左から現れ、末尾のカーソルが点滅し続けるタイピング風の演出。overflow: hidden と width の伸長アニメーション、steps() のイージングで実装する。", "useCase": "スライドの冒頭やLPのキャッチコピーで、いままさに言葉が打ち込まれているような臨場感を出したいときに使う。", "code": ".twtr-text{\n overflow: hidden;\n white-space: nowrap;\n border-right: 2px solid #4fe3c1;\n width: 0;\n animation: twtr-type 3s steps(20,end) forwards,\n twtr-blink .8s step-end infinite;\n}\n@keyframes twtr-type{ to{ width: 100%; } }\n@keyframes twtr-blink{ 50%{ border-color: transparent; } }", "tags": [ "CSS", "アニメーション", "見出し", "没入感", "テンポよく", "動的" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n Hello, world_\n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "stagger-char-reveal", "ruby-heading-reveal", "blur-reveal-text", "clip-path-reveal" ] }, { "id": "stagger-char-reveal", "num": "W-020", "name": "Staggered Character Reveal", "nameJa": "1文字ずつ時間差出現", "category": "text", "description": "見出しをJavaScriptで1文字ずつのspanに分割し、animation-delayを文字順にずらして次々とフェードイン＆浮き上がらせる演出。文字が連鎖して現れるリズムが生まれる。", "useCase": "スライドのタイトルやLPのキャッチコピーに、テンポよく勢いのある登場演出を付けたいときに使う。", "code": "document.querySelectorAll('.schr-title').forEach(el=>{\n el.innerHTML = [...el.textContent].map((c,i)=>\n `${c}`).join('');\n});\n/* CSS */\n.schr-title span{display:inline-block;opacity:0;transform:translateY(12px);\n animation:schr-in .5s ease forwards}\n@keyframes schr-in{to{opacity:1;transform:translateY(0)}}", "tags": [ "JavaScript", "CSS", "見出し", "ふわっと", "テンポよく", "動的", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n W\n A\n Z\n A\n !\n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "typewriter", "scroll-reveal", "view-transitions-slide", "gradient-text" ] }, { "id": "blur-reveal-text", "num": "W-021", "name": "Blur-in Text", "nameJa": "ぼかしから浮かぶ文字", "category": "text", "description": "文字がぼやけた状態から徐々にピントが合うように浮かび上がる演出。filter: blur(10px)を0へ、opacityを0から1へ同時に遷移させて実装する。", "useCase": "スライドの切り替え直後や、注目させたい一文をふわっと静かに登場させたいときに使う。", "code": ".blrv-text{\n filter: blur(10px);\n opacity: 0;\n animation: blrv-focus 1s ease-out forwards;\n}\n@keyframes blrv-focus{\n to{ filter: blur(0); opacity: 1; }\n}", "tags": [ "CSS", "filter", "見出し", "ふわっと", "没入感", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n Focus\n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "gradient-text", "typewriter", "stagger-char-reveal", "easing-design" ] }, { "id": "variable-font-weight", "num": "W-022", "name": "Variable Font Weight Animation", "nameJa": "可変フォントのウェイトアニメ", "category": "text", "description": "可変フォントのウェイト軸を連続的に動かし、文字が細字から太字へなめらかに変化する演出。font-variation-settings の\"wght\"値をtransitionで滑らかに動かす。", "useCase": "対応フォント使用時に、見出しの強調やホバー時のインタラクションを上質になめらかに見せたいときに使う。", "code": ".vfwt-title{\n font-variation-settings: \"wght\" 300;\n transition: font-variation-settings .6s ease;\n}\n.vfwt-title:hover{\n font-variation-settings: \"wght\" 800;\n}", "tags": [ "CSS", "可変フォント", "ホバー", "ぬるっと", "高級感", "動的" ], "support": "広く対応", "svg": "\n \n \n \n Ag\n Ag\n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "card-flip", "page-turn", "clip-path-shapes", "filter-effects" ] }, { "id": "text-stroke-outline", "num": "W-023", "name": "Text Stroke Outline", "nameJa": "縁取り文字", "category": "text", "description": "文字の塗りを消して輪郭線だけを見せる、または太い縁取りを付ける演出。-webkit-text-stroke と paint-order: stroke fill を組み合わせて塗りの上に線が乗らないようにする。", "useCase": "見出しを写真や動画の上に重ねるとき、背景に負けず視認性とデザイン性を両立させたいときに使う。", "code": ".tstk-title{\n color: #ffc857;\n -webkit-text-stroke: 2px #4fe3c1;\n paint-order: stroke fill;\n}", "tags": [ "CSS", "縁取り", "見出し", "目を引く", "パキッと", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n Aa\n \n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "gradient-text", "neon-glow-text", "marker-highlight", "blend-difference-text" ] }, { "id": "neon-glow-text", "num": "W-024", "name": "Neon Glow Text", "nameJa": "ネオン発光", "category": "text", "description": "文字自体が発光しているように見せる演出。text-shadow を色とぼかし半径を変えて何層も重ね、明滅アニメーションでネオンサインの点灯感まで再現する。", "useCase": "夜景・エンタメ・ゲーム系のLPやサムネイルタイトルで、強く目を引くネオン風の文字を作りたいときに使う。", "code": ".neon-title{\n color: #fff;\n text-shadow:\n 0 0 4px #4fe3c1,\n 0 0 12px #4fe3c1,\n 0 0 24px #4fe3c1,\n 0 0 48px #4fe3c1;\n animation: neon-flicker 2.6s infinite;\n}\n@keyframes neon-flicker{ 20%{ opacity:.4; } }", "tags": [ "CSS", "text-shadow", "発光", "没入感", "目を引く", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n NEON\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "blend-difference-text", "horizontal-scroll-section", "text-stroke-outline", "long-shadow-text" ] }, { "id": "marker-highlight", "num": "W-025", "name": "Marker Highlight", "nameJa": "蛍光マーカー線が引かれる", "category": "text", "description": "テキストの下に蛍光ペンで線を引くような色帯がスッと伸びる演出。linear-gradient の背景を background-size: 0%から100%へアニメーションさせて実装する。", "useCase": "note記事やLPの本文中で、読者の目を止めたい重要なキーワードに視線を誘導したいときに使う。", "code": ".mark-word{\n background: linear-gradient(#ffc857,#ffc857) no-repeat;\n background-size: 0% 40%;\n background-position: 0 88%;\n transition: background-size .8s ease;\n}\n.mark-word.is-in{ background-size: 100% 40%; }", "tags": [ "CSS", "background", "強調", "目を引く", "パキッと", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n Highlight\n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "gradient-text", "text-stroke-outline", "text-extrude", "gradient-border" ] }, { "id": "vertical-writing", "num": "W-026", "name": "Vertical Writing Mode", "nameJa": "縦書き", "category": "text", "description": "文字を上から下へ、行を右から左へ流す日本語の縦組みレイアウト。writing-mode: vertical-rl と text-orientation: mixed で実装し、和文らしい読みの流れを作る。", "useCase": "和風・エディトリアル系のデザインや、詩的な一文を情緒的に見せたいスライド・LPの一部で使う。", "code": ".vwrt-text{\n writing-mode: vertical-rl;\n text-orientation: mixed;\n letter-spacing: .05em;\n line-height: 1.8;\n}", "tags": [ "CSS", "レイアウト", "和風", "高級感", "さりげない", "日本語" ], "support": "広く対応", "svg": "\n \n \n 縦書き組\n の例です\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "text-orientation-upright", "text-emphasis-dots", "text-combine-upright", "hanging-punctuation" ] }, { "id": "line-clamp", "num": "W-027", "name": "Line Clamp Truncation", "nameJa": "行数制限省略", "category": "text", "description": "指定した行数を超えた文章を末尾の「…」で省略して切り詰める演出。display: -webkit-box と -webkit-line-clamp、overflow: hidden の組み合わせで実装する。", "useCase": "カード一覧やニュース欄で、説明文の長さをそろえて見た目のガタつきを防ぎたいときに使う。", "code": ".lclp-desc{\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}", "tags": [ "CSS", "レイアウト", "省略", "カード", "さりげない", "すっきり", "整列" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n …\n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-wrap-balance", "vertical-writing", "palt-tracking", "hover-lift-card" ] }, { "id": "text-wrap-balance", "num": "W-028", "name": "Balanced Text Wrap", "nameJa": "見出しの行バランス調整", "category": "text", "description": "text-wrap: balanceは見出しの各行を均等に近づけ、text-wrap: prettyは本文末の短すぎる行や不自然な改行を減らす。用途の異なる2値を、見出しと本文で使い分ける。", "useCase": "複数行見出しの形を整え、本文では読みやすい改行を選ばせたい場面。どちらもコンテンツ幅は固定せず、ブラウザへ改行位置の最適化を任せる。", "code": "h1, h2, .twbl-title{\n text-wrap: balance;\n}\np, .twbl-body{\n text-wrap: pretty;\n}", "tags": [ "CSS", "レイアウト", "見出し", "整列", "さりげない", "すっきり", "読みやすさ" ], "support": "新しく普及中", "svg": "\n \n \n BEFOREBALANCE\n before → text-wrap: balance\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "line-clamp", "vertical-writing", "palt-tracking", "back-to-top" ] }, { "id": "long-shadow-text", "num": "W-029", "name": "Long Shadow Text", "nameJa": "ロングシャドウ", "category": "text", "description": "文字から斜め45度方向へ長く伸びる影を付けるフラットデザイン系の演出。text-shadow を1pxずつずらしながら何層も重ねる、または疑似要素で描画する。", "useCase": "レトロ・フラットデザイン調のタイトルやバッジで、立体感と遊び心のあるアクセントを出したいときに使う。", "code": ".lsdw-title{\n color: #e8eef9;\n text-shadow:\n 1px 1px 0 #94a3c0, 2px 2px 0 #94a3c0,\n 3px 3px 0 #94a3c0, 4px 4px 0 #94a3c0,\n 5px 5px 0 #94a3c0, 6px 6px 0 #94a3c0;\n}", "tags": [ "CSS", "text-shadow", "フラットデザイン", "レトロ", "目を引く", "立体感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n GO\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "neon-glow-text", "text-extrude", "crt-scanlines", "gradient-text" ] }, { "id": "blend-difference-text", "num": "W-030", "name": "Blend Mode Inverted Text", "nameJa": "背景差分の反転文字", "category": "text", "description": "mix-blend-mode: differenceで前景色と背景色の差分を合成し、背景に応じて反転するような見え方を作る。強い視覚効果だが、あらゆる背景で十分な文字コントラストを保証する機能ではないため、本文ではなく装飾へ使い実背景で確認する。", "useCase": "大きな装飾見出しやカーソルなどで背景との反転効果を狙う場面。重要な本文や操作ラベルには使わず、通常色の代替表示も用意する。", "code": ".bdif-title{\n color: #fff;\n mix-blend-mode: difference;\n isolation: isolate;\n}", "tags": [ "CSS", "mix-blend-mode", "反転", "目を引く", "ダイナミック", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n MIX\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "neon-glow-text", "horizontal-scroll-section", "mix-blend-mode", "text-stroke-outline" ] }, { "id": "selection-brand", "num": "W-031", "name": "Branded Text Selection", "nameJa": "::selectionのブランド化", "category": "text", "description": "ユーザーがテキストをドラッグ選択したときに表示されるハイライト色を、ブラウザ既定の水色からブランドカラーへ変更する演出。::selection疑似要素にbackgroundとcolorを指定するだけで実装できる。", "useCase": "コーポレートサイトやポートフォリオで、細部までブランドの世界観を統一したいときに使う。", "code": "::selection{\n background: #4fe3c1;\n color: #101830;\n}", "tags": [ "CSS", "::selection", "細部", "さりげない", "高級感", "ブランド" ], "support": "広く対応", "svg": "\n \n \n \n \n Select this\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "gradient-text", "vertical-writing", "drop-cap", "custom-scrollbar" ] }, { "id": "text-scramble", "num": "W-032", "name": "Text Scramble", "nameJa": "文字スクランブル", "category": "text", "description": "文字がランダムな記号でチラつきながら、少しずつ最終的な単語へと収束していく演出。JavaScriptで各文字をランダム文字から正解の文字へ間隔を空けて置き換えていく。", "useCase": "数値やキーワードの登場演出、ホバー時のインタラクションにハッカー風の緊張感を出したいときに使う。", "code": "function scramble(el, text, ms=30){\n const chars='!<>-_/[]{}=+*^?#';\n let frame=0;\n const iv=setInterval(()=>{\n el.textContent = text.split('').map((c,i)=>\n i < frame ? c : chars[Math.random()*chars.length|0]).join('');\n if(frame++ > text.length) clearInterval(iv);\n }, ms);\n}", "tags": [ "JavaScript", "グリッチ", "ホバー", "目を引く", "ダイナミック", "テンポよく" ], "support": "広く対応", "svg": "\n \n \n #%?@WAZA\n symbols → WAZA\n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "magnetic-button", "stagger-char-reveal", "horizontal-scroll-section", "custom-cursor" ] }, { "id": "drop-cap", "num": "W-033", "name": "Drop Cap", "nameJa": "ドロップキャップ", "category": "text", "description": "段落の先頭文字だけを数行分の高さに拡大し、雑誌の紙面のような印象的な導入を作る演出。initial-letterプロパティで指定し、非対応環境ではfloatとfont-sizeで代替する。", "useCase": "note記事やコラムの冒頭で、読み始めの視線を引きつけて世界観に引き込みたいときに使う。", "code": ".dcap-lead::first-letter{\n initial-letter: 3;\n font-weight: 800;\n color: #4fe3c1;\n margin-right: .08em;\n}\n@supports not (initial-letter: 3) {\n .dcap-lead::first-letter{\n float: left;\n font-size: 3em;\n line-height: .9;\n padding-right: .08em;\n }\n}", "tags": [ "CSS", "::first-letter", "エディトリアル", "高級感", "さりげない", "導入" ], "support": "広く対応", "svg": "\n \n \n \n \n \n T\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "vertical-writing", "selection-brand", "custom-scrollbar", "outline-text-bg" ] }, { "id": "palt-tracking", "num": "W-034", "name": "Proportional Kerning (palt)", "nameJa": "詰め組み（palt）", "category": "text", "description": "全角文字どうしの余白を自動で詰め、字間を美しく整える日本語組版の処理。font-feature-settings: \"palt\" を指定し、letter-spacingをわずかに詰めて仕上げる。", "useCase": "見出しやキャッチコピーの字間が間延びして見えるとき、引き締まったプロ組版の印象にしたいときに使う。", "code": ".palt-title{\n font-feature-settings: \"palt\";\n letter-spacing: -.02em;\n}", "tags": [ "CSS", "組版", "字間", "日本語", "高級感", "すっきり", "整列" ], "support": "広く対応", "svg": "\n \n \n 詰\n め\n 組\n み\n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "hanging-punctuation", "text-spacing-trim", "line-break-strict", "font-feature-pwid" ] }, { "id": "grid-template-areas", "num": "W-035", "name": "CSS Grid (grid-template-areas)", "nameJa": "グリッドエリア指定", "category": "layout", "description": "grid-template-areas でヘッダー・サイド・本文などの領域に名前を付けて配置指定するレイアウト手法。HTMLの記述順序と見た目上の配置を分離でき、コードを見ただけで画面構造が分かる。", "useCase": "管理画面やLPのヘッダー/サイドバー/本文/フッターなど、意味のある領域名でレイアウトの骨組みを組みたいとき。", "code": ".wrap{\n display:grid;\n grid-template-areas:\n \"head head\"\n \"side main\"\n \"foot foot\";\n grid-template-columns:120px 1fr; gap:12px;\n}\n.head{grid-area:head}\n.side{grid-area:side}\n.main{grid-area:main}\n.foot{grid-area:foot}", "tags": [ "CSS", "グリッド", "レイアウト", "領域指定", "整理整頓", "見通しが良い", "レスポンシブ" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n head\n side\n main\n foot\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "full-bleed-breakout", "vertical-embed-override", "logical-properties-vertical", "coordinate-grid-snap" ] }, { "id": "subgrid", "num": "W-036", "name": "Subgrid", "nameJa": "サブグリッド", "category": "layout", "description": "grid-template-rows/columns に subgrid を指定すると、子グリッドが親グリッドのトラック（行・列の区切り）をそのまま引き継ぐ。離れたカード同士でも見出しや価格の高さを厳密に揃えられる。", "useCase": "カードを横に並べたとき、画像・タイトル・価格などの段をカード間できっちり同じ高さに揃えたいとき。", "code": ".cards{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n grid-template-rows:auto auto auto;\n gap:16px;\n}\n.card{\n display:grid;\n grid-row:span 3;\n grid-template-rows:subgrid;\n}", "tags": [ "CSS", "グリッド", "サブグリッド", "カード", "きっちり", "ぴったり揃う", "普及中" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n grid-template-rows: subgrid\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "holy-grail-layout", "aspect-ratio", "centering-shortcuts", "corner-shape" ] }, { "id": "container-queries", "num": "W-037", "name": "Container Queries (@container)", "nameJa": "コンテナクエリ", "category": "layout", "description": "container-type:inline-size を親に指定し、@container で自分が置かれた親要素の幅を基準にスタイルを切り替える。画面幅ではなく置き場所の幅に応じてコンポーネントが自分で形を変える。", "useCase": "同じカード部品をサイドバーとメインカラムなど幅の違う場所で使い回し、置き場所に応じて自動で見た目を最適化したいとき。", "code": ".card-wrap{container-type:inline-size;container-name:card}\n@container card (min-width:320px){\n .card{grid-template-columns:120px 1fr}\n}\n@container card (max-width:319px){\n .card{grid-template-columns:1fr}\n}", "tags": [ "CSS", "コンテナクエリ", "レスポンシブ", "コンポーネント", "賢い", "パッと切替", "普及中" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @container\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "container-style-queries", "has-selector", "css-nesting", "css-scope" ] }, { "id": "aspect-ratio", "num": "W-038", "name": "aspect-ratio", "nameJa": "縦横比の固定", "category": "layout", "description": "aspect-ratio プロパティで幅か高さの一方だけ指定すれば、比率どおりにもう一方が自動で決まる。従来 padding-top ハックで作っていた比率固定ボックスが1行で書ける。", "useCase": "動画埋め込みやサムネイル、カード画像を、幅が変わっても縦横比を崩さず並べたいとき。", "code": ".thumb{\n width:100%;\n aspect-ratio:16/9;\n object-fit:cover;\n}\n.avatar{aspect-ratio:1;border-radius:50%}", "tags": [ "CSS", "サムネイル", "比率固定", "レスポンシブ", "崩れない", "きっちり" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n aspect-ratio: 16 / 9\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "fullscreen-fit-scale", "fluid-typography", "fluid-spacing", "css-shape-function" ] }, { "id": "bento-grid", "num": "W-039", "name": "Bento Grid", "nameJa": "ベントーグリッド", "category": "layout", "description": "grid-template-columns と grid-column/grid-row の span を組み合わせ、大小さまざまなマスをお弁当箱のように敷き詰めるレイアウト手法。情報量の差をそのままマスの大きさに変換できる。", "useCase": "機能紹介セクションやポートフォリオTOPで、情報量の違うカードを1画面に賑やかに見せたいとき。", "code": ".bento{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n grid-auto-rows:60px;\n gap:10px;\n}\n.big{grid-column:span 2;grid-row:span 2}\n.wide{grid-column:span 2}", "tags": [ "CSS", "グリッド", "ベントー", "ポートフォリオ", "賑やか", "目を引く", "おしゃれ" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "mesh-gradient", "centering-shortcuts", "grid-template-areas", "subgrid" ] }, { "id": "full-bleed-breakout", "num": "W-040", "name": "Full-Bleed Breakout Grid", "nameJa": "マガジン風ブレイクアウト", "category": "layout", "description": "3列グリッド grid-template-columns:1fr min(65ch,100%) 1fr で本文幅の列を作り、目立たせたい要素だけ grid-column:1/-1 にして画面端まで breakout させる構成。", "useCase": "雑誌風の記事LPで、見出し画像だけ画面幅いっぱいに広げ、本文は読みやすい幅に保ちたいとき。", "code": ".layout{\n display:grid;\n grid-template-columns:\n 1fr min(65ch,100%) 1fr;\n}\n.layout>*{grid-column:2}\n.breakout{grid-column:1/-1}", "tags": [ "CSS", "グリッド", "マガジン風", "ブレイクアウト", "大胆", "メリハリ", "レスポンシブ" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n grid-column: 1 / -1\n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "grid-template-areas", "aspect-ratio", "fluid-typography", "fluid-spacing" ] }, { "id": "fluid-typography", "num": "W-041", "name": "Fluid Typography (clamp())", "nameJa": "流体タイポグラフィ", "category": "layout", "description": "font-size に clamp(最小値, 可変値, 最大値) を使い、ビューポート幅に応じてブレークポイント無しで文字サイズが連続的に変化する。上限と下限を超えて縮み過ぎ・伸び過ぎることもない。", "useCase": "見出しをスマホからワイドモニターまで、メディアクエリを書かずに自然に追従させたいとき。", "code": "h1{\n font-size:clamp(1.5rem, 4vw + 1rem, 3.5rem);\n}\np{\n font-size:clamp(0.95rem, 0.5vw + 0.85rem, 1.125rem);\n}", "tags": [ "CSS", "タイポグラフィ", "流体", "レスポンシブ", "なめらか", "心地よい" ], "support": "広く対応", "svg": "\n \n \n \n \n \n Aa\n \n \n clamp(1rem, 4vw, 3.5rem)\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "fluid-spacing", "text-box-trim", "text-autospace", "aspect-ratio" ] }, { "id": "fluid-spacing", "num": "W-042", "name": "Fluid Spacing", "nameJa": "流体スペーシング", "category": "layout", "description": "padding や gap にも clamp() を使い、余白をビューポート幅に応じて連続的に変化させる手法。ブレークポイントごとに余白を書き分ける手間がなくなる。", "useCase": "セクションの余白をスマホでは詰めて、デスクトップではゆったり見せたいとき。", "code": ".section{\n padding-block:clamp(24px, 6vw, 96px);\n padding-inline:clamp(16px, 5vw, 64px);\n}\n.stack{gap:clamp(8px, 2vw, 24px)}", "tags": [ "CSS", "スペーシング", "流体", "レスポンシブ", "ゆったり", "なめらか" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n padding: clamp()\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "fluid-typography", "aspect-ratio", "css-shape-function", "grid-template-areas" ] }, { "id": "masonry-columns", "num": "W-043", "name": "Pseudo Masonry (columns)", "nameJa": "擬似マソンリー（columns）", "category": "layout", "description": "CSS多段組み columns を使い、高さの異なるカードを列ごとに縦詰めに配置する擬似マソンリー。真のグリッドmasonryは仕様策定中のため、現状はcolumnsで代用するのが定番。", "useCase": "Pinterest風のギャラリーや、高さの揃わない画像カード一覧を隙間なく詰めたいとき。", "code": ".gallery{\n columns:3 220px;\n column-gap:12px;\n}\n.gallery>*{\n break-inside:avoid;\n margin-bottom:12px;\n}", "tags": [ "CSS", "マソンリー", "ギャラリー", "段組み", "詰まって見える", "リズミカル", "Pinterest風" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "site", "lp" ], "weight": "主役", "relatedIds": [ "grid-lanes", "ring-gallery", "carousel-3d", "content-visibility" ] }, { "id": "centering-shortcuts", "num": "W-044", "name": "Centering Shortcuts", "nameJa": "中央寄せの最短手", "category": "layout", "description": "place-content:center や place-items:center、margin:auto など、要素を上下左右中央に揃える最短のCSS手段をまとめた定石。position:absoluteの計算いらずで一発で決まる。", "useCase": "モーダルやローディング表示、ヒーローセクションの中身を1行で確実に中央揃えしたいとき。", "code": ".center-grid{\n display:grid;\n place-items:center;\n min-height:100dvh;\n}\n.center-flex{\n display:flex;\n align-items:center;\n justify-content:center;\n}", "tags": [ "CSS", "中央寄せ", "グリッド", "フレックス", "一発で決まる", "安心" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "holy-grail-layout", "safe-area-inset", "grid-template-areas", "subgrid" ] }, { "id": "grid-stack", "num": "W-045", "name": "Grid Stack Overlay", "nameJa": "グリッドで要素を重ねる", "category": "layout", "description": "同じ grid-area（または grid-row/column:1/1）を複数の子要素に指定し、position:absoluteを使わずグリッドの1マスへ重ね配置する。ドキュメントの流れの中で重ねられるのが利点。", "useCase": "画像の上にタイトルやグラデーションを重ねるヒーロー画像・カードのオーバーレイを組みたいとき。", "code": ".stack{\n display:grid;\n}\n.stack>*{\n grid-area:1/1;\n}\n.stack img{width:100%;height:100%;object-fit:cover}\n.stack .overlay{align-self:end;padding:16px}", "tags": [ "CSS", "グリッド", "重ね", "オーバーレイ", "position不要", "スタイリッシュ", "奥行き感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n grid-area: 1 / 1\n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "centering-shortcuts", "grid-template-areas", "subgrid", "bento-grid" ] }, { "id": "holy-grail-layout", "num": "W-046", "name": "Holy Grail App Shell", "nameJa": "ホーリーグレイル型アプリシェル", "category": "layout", "description": "grid-template でヘッダー・フッター固定、左右サイドバー固定、中央だけ1frで伸縮するアプリの定番シェル構成を1宣言で組む。かつてfloatやtableで苦労した構成がGridなら一発。", "useCase": "管理画面やチャットアプリなど、ヘッダー/サイド2本/本文/フッターを持つ画面の土台を作るとき。", "code": ".shell{\n display:grid;\n grid-template:\n \"head head head\" auto\n \"nav main aside\" 1fr\n \"foot foot foot\" auto\n / 160px 1fr 160px;\n height:100dvh;\n}", "tags": [ "CSS", "グリッド", "アプリシェル", "管理画面", "土台", "きっちり", "安心" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n 1fr\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "centering-shortcuts", "subgrid", "aspect-ratio", "safe-area-inset" ] }, { "id": "dvh-svh", "num": "W-047", "name": "Dynamic Viewport Units (dvh/svh)", "nameJa": "動的ビューポート単位（dvh/svh）", "category": "layout", "description": "モバイルはアドレスバーの出し入れで100vhの基準が揺れる。dvh（実表示に追従）・svh（最小時基準）・lvh（最大時基準）を使い分ければ、その揺れを吸収できる。", "useCase": "スマホでヒーローセクションやモーダルの高さを画面ぴったりに保ち、下に隙間や見切れを作りたくないとき。", "code": ".hero{\n height:100vh; /* NG: アドレスバーで揺れる */\n height:100dvh; /* OK: 実表示領域に追従 */\n}", "tags": [ "CSS", "ビューポート", "モバイル", "dvh", "ガタつかない", "ぴったり", "普及中" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 100vh\n 100dvh\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "subgrid", "container-queries", "has-selector", "has-selector-interact" ] }, { "id": "logical-properties", "num": "W-048", "name": "Logical Properties", "nameJa": "論理プロパティ", "category": "layout", "description": "margin-inline や padding-block、border-inline-start のように、top/leftなど物理方向でなく書字方向を基準に余白・罫線を指定するプロパティ群。directionが変わってもCSSを書き換えずに反転する。", "useCase": "多言語サイトや将来のRTL対応を見据えて、余白・罫線の指定を書き換え不要にしておきたいとき。", "code": ".card{\n padding-block:16px;\n padding-inline:24px;\n margin-inline-start:auto;\n border-inline-start:4px solid var(--accent);\n}", "tags": [ "CSS", "論理プロパティ", "多言語", "RTL対応", "反転しても崩れない", "スマート" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n direction: ltr\n \n \n \n \n \n \n direction: rtl\n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "has-selector-interact", "grid-lanes", "content-visibility", "container-style-queries" ] }, { "id": "has-selector", "num": "W-049", "name": ":has() Layout Branching", "nameJa": ":has()でレイアウト分岐", "category": "layout", "description": "親要素が特定の子を持つかどうかで自分自身のスタイルを変える :has() 疑似クラス。画像の有無やフォームのエラー状態など、JSのクラス切り替え無しで条件付きレイアウトが組める。", "useCase": "画像付き投稿だけ2カラムにする、フォームにエラーがある時だけ枠を強調するなど条件分岐レイアウトをCSSだけで組みたいとき。", "code": ".card{grid-template-columns:1fr}\n.card:has(img){\n grid-template-columns:96px 1fr;\n}\nform:has(:invalid){\n border-color:var(--danger);\n}", "tags": [ "CSS", "疑似クラス", "条件分岐", "JS不要", "賢い", "スッと切り替わる", "普及中" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n :has(img)\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "container-queries", "subgrid", "dvh-svh", "has-selector-interact" ] }, { "id": "flex-grid-gap", "num": "W-050", "name": "Gap for Flex/Grid", "nameJa": "gapで余白統一", "category": "layout", "description": "子要素のmarginを個別に計算するのをやめ、flexやgridの gap プロパティで要素間の間隔を一括指定する。最後の要素だけ余白が余る・親のパディングと二重になる事故がなくなる。", "useCase": "ボタン列やカード一覧の隙間を、子要素のmargin管理なしで均等にきれいに揃えたいとき。", "code": ".row{\n display:flex;\n gap:12px;\n}\n.grid{\n display:grid;\n grid-template-columns:repeat(auto-fill,minmax(120px,1fr));\n gap:16px;\n}", "tags": [ "CSS", "flex", "グリッド", "gap", "余白統一", "きれいに並ぶ", "すっきり" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n gap\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "reading-flow", "centering-shortcuts", "text-spacing-trim", "font-feature-pwid" ] }, { "id": "safe-area-inset", "num": "W-051", "name": "Safe Area Insets", "nameJa": "セーフエリア対応", "category": "layout", "description": "env(safe-area-inset-top/bottom/left/right) を使い、ノッチや丸角、ホームインジケーターに被らないよう端末側が教えてくれる分だけパディングを足す。数値をハードコードしなくていい。", "useCase": "iPhoneのノッチ・丸角・ホームバーに、固定ヘッダーやボトムナビの中身が隠されないようにしたいとき。", "code": ".bottom-nav{\n padding-bottom:calc(12px + env(safe-area-inset-bottom));\n}\n.header{\n padding-top:env(safe-area-inset-top, 0px);\n}", "tags": [ "CSS", "iPhone", "ノッチ対応", "safe-area", "はみ出さない", "安心" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n env(safe-area-inset-*)\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "centering-shortcuts", "holy-grail-layout", "grid-lanes", "content-visibility" ] }, { "id": "media-preferences", "num": "W-052", "name": "prefers-* Media Queries", "nameJa": "OS設定への追従", "category": "layout", "description": "prefers-color-scheme でOSのダーク/ライト設定に自動追従し、prefers-reduced-motion でアニメを控えめにする。ユーザーがOS側で選んだ設定を、聞かずに尊重するメディアクエリ。", "useCase": "ダークモード端末の利用者や、前庭障害配慮でアニメを減らしたい人に、設定画面を作らず最適な見た目を出したいとき。", "code": "@media (prefers-color-scheme:dark){\n :root{--bg:#101830;--ink:#e8eef9}\n}\n@media (prefers-reduced-motion:reduce){\n *{animation-duration:0.001ms!important}\n}", "tags": [ "CSS", "ダークモード", "アクセシビリティ", "OS設定", "自動追従", "気遣い" ], "support": "広く対応", "svg": "\n \n \n \n \n \n dark\n \n \n \n \n light\n \n \n \n \n motion\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "reading-flow", "css-scroll-controls", "customizable-select", "contrast-color" ] }, { "id": "clip-path-polygon", "num": "W-053", "name": "Clip-path Polygon Slice", "nameJa": "斜め切り (ポリゴンクリップ)", "category": "shape", "description": "要素を任意の多角形で切り抜く。clip-path: polygon(x y, ...)で頂点座標を指定し、四角形を斜めにカットしたセクション境界や見出し背景を作る。", "useCase": "LPのセクション境界やヒーロー背景を斜めにカットして動きのある印象に。画像への適用でも効果的。", "code": ".cppg-hero {\n clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\n}", "tags": [ "CSS", "clip-path", "LP", "セクション", "斜め", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "mix-blend-mode", "text-stroke-outline", "neon-glow-text", "blend-difference-text" ] }, { "id": "clip-path-shapes", "num": "W-054", "name": "Clip-path Basic Shapes", "nameJa": "円形・矩形の切り抜き (inset/circle)", "category": "shape", "description": "clip-path: circle()やinset()で画像や要素を円形・角丸矩形に切り抜く。ホバーで半径や位置を変えると形が滑らかに変形する。", "useCase": "プロフィール画像を丸く切り抜く、カード画像をホバーで拡大する円形マスク演出などに使う。", "code": ".cpsh-avatar {\n clip-path: circle(50%);\n transition: clip-path .4s ease;\n}\n.cpsh-avatar:hover {\n clip-path: circle(65%);\n}", "tags": [ "CSS", "clip-path", "ホバー", "円形", "トリミング", "ぬるっと", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "caption-slide-in", "filter-effects", "variable-font-weight", "hover-pause" ] }, { "id": "clip-path-reveal", "num": "W-055", "name": "Clip-path Reveal Animation", "nameJa": "クリップパスでリビール表示", "category": "shape", "description": "clip-path: inset()やpolygon()の値をtransitionやkeyframesで変化させ、要素が徐々に現れる/隠れるリビール演出を作る。", "useCase": "スクロール表示や画像ホバー時に、カーテンが開くように要素を出現させたいときに使う。", "code": ".cprv-panel {\n clip-path: inset(0 100% 0 0);\n transition: clip-path .8s cubic-bezier(.7,0,.2,1);\n}\n.cprv-panel.is-visible {\n clip-path: inset(0 0 0 0);\n}", "tags": [ "CSS", "clip-path", "スクロール", "リビール", "アニメーション", "ふわっと", "没入感" ], "support": "広く対応", "svg": "\n \n \n REVEAL\n \n \n REVEAL\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "view-timeline-reveal", "image-clip-reveal", "vertical-scroll-snap", "typewriter" ] }, { "id": "svg-clip-path", "num": "W-056", "name": "SVG clipPath Element", "nameJa": "SVGクリップパスで自由形状に切り抜く", "category": "shape", "description": "SVGの要素に任意のパスや図形を定義し、CSSからclip-path: url(#id)で画像やdivを星形・波形など自由な輪郭に切り抜く。", "useCase": "ロゴ型・星型・特殊アイコン型に画像をトリミングしたいバナーやカードに使う。", "code": "\n \n \n \n\n", "tags": [ "SVG", "clip-path", "マスク", "自由形状", "バナー", "目を引く", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-text-mask", "mask-reveal", "svg-mask-type", "clip-path-polygon" ] }, { "id": "mask-gradient-fade", "num": "W-057", "name": "Mask Gradient Fade", "nameJa": "マスクでグラデーションフェード", "category": "shape", "description": "mask-image: linear-gradient()で要素の端を透明に自然にぼかす。画像やテキストブロックの端をふわっと消すのに使う。", "useCase": "長文テキストの下端フェードアウトや、画像の端を背景に馴染ませるヒーロー演出に使う。", "code": ".mgfd-fade {\n mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);\n}", "tags": [ "CSS", "mask", "グラデーション", "フェード", "ぼかし", "ふわっと", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "tooltip", "tilt-shift", "skeleton-shimmer", "gradient-animation" ] }, { "id": "svg-text-mask", "num": "W-058", "name": "SVG Text Mask", "nameJa": "文字型に画像を切り抜く", "category": "shape", "description": "SVGの要素に白文字テキストを描き、画像や動画を重ねることで文字の内側だけをくり抜いて見せる。CSSのbackground-clip:textより柔軟で動画にも使える。", "useCase": "動画を文字の形にくり抜くタイトル演出や、写真をロゴ文字に流し込む特別感のある見出しに使う。", "code": "\n \n \n WAZA\n \n \n", "tags": [ "SVG", "mask", "テキスト", "文字", "写真", "高級感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n AK\n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-clip-path", "text-image-fill", "text-on-path", "gradient-border" ] }, { "id": "shape-outside", "num": "W-059", "name": "Shape Outside Wrap", "nameJa": "図形に沿った回り込みテキスト", "category": "shape", "description": "float要素にshape-outside: circle()やurl(image.png)を指定し、テキストを円形や画像の輪郭に沿って回り込ませる。", "useCase": "雑誌風レイアウトで、丸い画像やイラストの輪郭に沿って本文テキストを流し込みたい記事ページに使う。", "code": ".shpo-figure {\n float: left;\n width: 160px;\n shape-outside: circle(50%);\n clip-path: circle(50%);\n margin: 0 16px 8px 0;\n}", "tags": [ "CSS", "shape-outside", "回り込み", "テキスト", "レイアウト", "こなれ感", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "vertical-writing", "scroll-margin-padding", "line-clamp", "text-wrap-balance" ] }, { "id": "organic-blob", "num": "W-060", "name": "Organic Blob Shape", "nameJa": "有機的なブロブ形状", "category": "shape", "description": "border-radiusに8つの%値（水平4つ/垂直4つ）を指定し、不規則な有機的ブロブ形状を作る。keyframesで数値を変化させると柔らかく蠢く。", "useCase": "背景装飾やアイコン台紙に、角丸四角より柔らかく親しみやすい形を出したいときに使う。", "code": ".blob-shape {\n border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;\n animation: blob-morph 6s ease-in-out infinite;\n}\n@keyframes blob-morph {\n 50% { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; }\n}", "tags": [ "CSS", "border-radius", "ブロブ", "背景装飾", "有機的", "ふわっと", "柔らかい", "親しみ" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "lava-blob", "clip-path-reveal", "mask-gradient-fade", "speech-bubble" ] }, { "id": "gradient-border", "num": "W-061", "name": "Gradient Border", "nameJa": "グラデーション枠線", "category": "shape", "description": "border-imageや、背景を二重に重ねるbackground-origin: border-boxの手法でグラデーションの枠線を作る。border-imageはborder-radiusと併用できないため、角丸にしたい場合は背景を二重に重ねる技法を使う。", "useCase": "カードやボタンの縁を単色より華やかなグラデーション枠にして、高級感や特別感を出したいときに使う。", "code": ".gbdr-card {\n border: 3px solid transparent;\n border-radius: 16px;\n background:\n linear-gradient(var(--w-bg,#101830), var(--w-bg,#101830)) padding-box,\n linear-gradient(135deg, var(--w-accent,#4fe3c1), var(--w-amber,#ffc857)) border-box;\n}", "tags": [ "CSS", "border", "グラデーション", "カード", "縁取り", "高級感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "gradient-text", "mesh-gradient", "duotone-image", "text-image-fill" ] }, { "id": "conic-gradient-chart", "num": "W-062", "name": "Conic Gradient Pie Chart", "nameJa": "円錐グラデーションで円グラフ", "category": "shape", "description": "background: conic-gradient()で角度ごとに色を割り当て、画像やJSなしに円グラフ・ローディングリングを描く。%指定でCSS変数から動的に更新できる。", "useCase": "ダッシュボードの割合表示、料金プラン比較、進捗リングなどをCSSだけで軽量に描きたいときに使う。", "code": ".cgcp-pie {\n width: 100px; height: 100px; border-radius: 50%;\n background: conic-gradient(\n var(--w-accent,#4fe3c1) 0% 65%,\n var(--w-amber,#ffc857) 65% 100%\n );\n}", "tags": [ "CSS", "conic-gradient", "グラフ", "データ可視化", "円グラフ", "パッと切替", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n 65%\n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "ripple-effect", "svg-line-area-chart", "bar-chart-grid-vs-svg", "svg-radar-chart" ] }, { "id": "mix-blend-mode", "num": "W-063", "name": "Mix Blend Mode", "nameJa": "画像合成 (ブレンドモード)", "category": "shape", "description": "mix-blend-modeプロパティで要素と背景の色をscreen/multiply/differenceなどの計算式で合成し、写真やテキストに特殊な色重なり効果を出す。", "useCase": "見出しテキストを写真の上に重ねて自然に馴染ませたり、2枚の画像をアート的に掛け合わせたい演出に使う。", "code": ".mbmd-text {\n mix-blend-mode: difference;\n color: var(--w-ink,#e8eef9);\n}\n.mbmd-layer {\n mix-blend-mode: screen;\n}", "tags": [ "CSS", "mix-blend-mode", "合成", "写真", "アート", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "blend-difference-text", "clip-path-polygon", "duotone-image", "text-stroke-outline" ] }, { "id": "glassmorphism", "num": "W-064", "name": "Glassmorphism", "nameJa": "すりガラス (グラスモーフィズム)", "category": "shape", "description": "backdrop-filter: blur()と半透明背景を組み合わせ、背後の内容が透けて見えるすりガラス風パネルを作る。淡い枠線を添えると質感が増す。", "useCase": "ナビゲーションバーやモーダル、カード型UIに透明感と奥行きを持たせたいデザインに使う。", "code": ".glsm-panel {\n background: rgba(255,255,255,.12);\n backdrop-filter: blur(16px) saturate(160%);\n -webkit-backdrop-filter: blur(16px) saturate(160%);\n border: 1px solid rgba(255,255,255,.25);\n border-radius: 16px;\n}", "tags": [ "CSS", "backdrop-filter", "すりガラス", "半透明", "UI", "高級感", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "blur-reveal-text", "glass-depth", "aurora-background", "vertical-scroll-snap" ] }, { "id": "filter-effects", "num": "W-065", "name": "CSS Filter Effects", "nameJa": "フィルター効果 (ぼかし・彩度・影)", "category": "shape", "description": "filter: blur()/saturate()/drop-shadow()等を単体または複数組み合わせ、画像の質感を非破壊で加工する。hover遷移でtransitionを付けると変化が滑らか。", "useCase": "サムネイル画像のホバーで鮮やかにする、非アクティブなカードをグレーアウトするなどの状態表現に使う。", "code": ".fltr-img {\n filter: grayscale(60%) blur(1px);\n transition: filter .4s ease;\n}\n.fltr-img:hover {\n filter: grayscale(0%) blur(0) saturate(130%)\n drop-shadow(0 8px 16px rgba(0,0,0,.35));\n}", "tags": [ "CSS", "filter", "ホバー", "画像加工", "ぬるっと", "くっきり", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n blur・saturate・shadow\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "hover-zoom", "clip-path-shapes", "duotone-image", "variable-font-weight" ] }, { "id": "wave-divider", "num": "W-066", "name": "SVG Wave Divider", "nameJa": "波形のセクション区切り", "category": "shape", "description": "セクション境界にSVGので波形を描画し、直線区切りより柔らかい印象のセクション切り替えを作る。position: absoluteで下端に重ねる。", "useCase": "LPでヒーローと次セクションの境目、フッター上部などを柔らかい曲線で繋ぎたいときに使う。", "code": "\n \n", "tags": [ "SVG", "divider", "波形", "セクション", "LP", "柔らかい", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "clip-path-polygon", "wave-divider-bg", "text-on-path", "progress-ring" ] }, { "id": "speech-bubble", "num": "W-067", "name": "Speech Bubble Shape", "nameJa": "吹き出し・三角形", "category": "shape", "description": "角丸の四角にborderやclip-pathで三角形の尻尾を付け足し、会話やツールチップの吹き出し形状を作る。擬似要素::afterに三角形を配置するのが定番。", "useCase": "FAQやチャットUI、キャラクターのセリフ表示、ツールチップの補足説明に使う。", "code": ".spbb-bubble {\n position: relative;\n border-radius: 16px;\n background: var(--w-ink,#e8eef9);\n}\n.spbb-bubble::after {\n content: \"\";\n position: absolute; left: 24px; bottom: -10px;\n border: 10px solid transparent;\n border-top-color: var(--w-ink,#e8eef9);\n}", "tags": [ "CSS", "擬似要素", "吹き出し", "チャット", "三角形", "親しみ", "パッと切替" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "details-content", "conic-gradient-chart", "ripple-effect", "target-css-toggle" ] }, { "id": "duotone-image", "num": "W-068", "name": "Duotone Image Effect", "nameJa": "デュオトーン (二色化) 画像", "category": "shape", "description": "filter: grayscale()+セピア調整、またはmix-blend-modeとグラデーションレイヤーを重ねてグレースケール画像を2色のトーンに変換する。", "useCase": "ブランドカラーに写真を統一したいセクション背景や、モノトーンで統一感を出したいギャラリーに使う。", "code": ".dtnm-wrap { position: relative; }\n.dtnm-wrap img { filter: grayscale(100%) contrast(1.1); display: block; }\n.dtnm-wrap::before {\n content: \"\"; position: absolute; inset: 0;\n background: linear-gradient(135deg, var(--w-accent,#4fe3c1), var(--w-amber,#ffc857));\n mix-blend-mode: color;\n}", "tags": [ "CSS", "mix-blend-mode", "デュオトーン", "画像加工", "ブランド", "高級感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "gradient-text", "gradient-border", "mix-blend-mode", "filter-effects" ] }, { "id": "text-image-fill", "num": "W-069", "name": "Background Clip Text Fill", "nameJa": "画像で文字を塗る", "category": "shape", "description": "background-clip: textとcolor: transparentを使い、太字テキストの内側に写真やグラデーション画像を流し込んで塗りつぶす。", "useCase": "インパクトある見出しに写真やグラデーションを組み込み、単色テキストより目を引くタイトルにしたいときに使う。", "code": ".tifl-title {\n background: url('texture.jpg') center/cover;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n font-weight: 900;\n}", "tags": [ "CSS", "background-clip", "テキスト", "画像", "見出し", "目を引く", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n FILL\n \n \n \n \n \n", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "text-image-mask", "gradient-text", "svg-text-mask", "gradient-border" ] }, { "id": "transition-basics", "num": "W-070", "name": "Transition Basics (Targeted Properties)", "nameJa": "トランジション設計（プロパティ限定）", "category": "motion", "description": "transition: allで全プロパティを対象にせず、transform・box-shadowなど動かしたいプロパティだけをtransition-propertyで指定して意図しない再計算やバグを防ぐ基本設計。", "useCase": "ボタンやカードのホバー演出で複数プロパティを同時に動かしつつ、無関係な変化まで一緒にアニメしてしまうのを防ぎたい場面。", "code": ".btn {\n transition-property: transform, box-shadow, background-color;\n transition-duration: .25s, .25s, .4s;\n transition-timing-function: ease-out;\n}\n.btn:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px rgba(0,0,0,.2);\n}", "tags": [ "CSS", "transition", "ホバー", "基礎", "パフォーマンス", "さりげない", "きびきび" ], "support": "広く対応", "svg": "\n \n \n \n \n transform + shadow\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "hover-pause", "reduced-motion", "hover-focus-states", "tooltip" ] }, { "id": "keyframes-multistep", "num": "W-071", "name": "Multi-step @keyframes", "nameJa": "多段@keyframesアニメ", "category": "motion", "description": "0%・20%・45%・65%のように複数の中間ステップを@keyframesに置き、単純な往復ではない弾むような複雑な軌跡を作る技法。", "useCase": "ロゴのアテンション演出やアイコンのバウンド、注目を集めたいCTAボタンの揺れ演出などに使う。", "code": "@keyframes kfms-bounce {\n 0% { transform: translateY(0) scale(1); }\n 20% { transform: translateY(-24px) scale(1.05); }\n 45% { transform: translateY(0) scale(.95); }\n 65% { transform: translateY(-8px) scale(1.02); }\n 100% { transform: translateY(0) scale(1); }\n}\n.icon { animation: kfms-bounce 1.8s ease-in-out infinite; }", "tags": [ "CSS", "keyframes", "基礎", "バウンド", "目を引く", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "offset-path", "property-custom-animate", "infinite-loop-motion", "text-stroke-outline" ] }, { "id": "easing-design", "num": "W-072", "name": "Easing Design (cubic-bezier / linear() Spring)", "nameJa": "イージング設計（スプリング風含む）", "category": "motion", "description": "動きの緩急をcubic-bezier()で作り込み、さらにlinear()関数で振動するような値を並べてバネのオーバーシュートを表現する。既定のeaseより意図の伝わる速度曲線を選ぶ。", "useCase": "モーダルの出現やボタンのプレス演出など、安っぽく見えない動きの質感をCSSだけで作りたい場面。", "code": ".pop {\n transform: scale(.8);\n transition: transform .5s\n linear(0, .42 8%, 1.12 30%, .94 52%, 1.03 68%, 1 100%);\n}\n.pop.is-open { transform: scale(1); }", "tags": [ "CSS", "イージング", "基礎", "スプリング", "ふわっと", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n linear vs spring\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "blur-reveal-text", "gradient-animation", "pricing-card-hover-lift", "keyframes-multistep" ] }, { "id": "starting-style", "num": "W-073", "name": "@starting-style Entry Animation", "nameJa": "@starting-styleで出現アニメ", "category": "motion", "description": "displayやvisibilityが変わる要素でも、@starting-styleに開始値を書くだけでtransitionが出現の瞬間から効くようにする仕組み。JSでの初期値制御が不要になる。", "useCase": "モーダルやトースト通知、ドロップダウンをパッと出さず、フェード＋拡大しながら現れさせたい場面。", "code": "@starting-style {\n .toast[open] { opacity: 0; transform: translateY(12px) scale(.94); }\n}\n.toast[open] {\n opacity: 1; transform: translateY(0) scale(1);\n transition: opacity .3s, transform .3s, display .3s allow-discrete;\n}", "tags": [ "CSS", "starting-style", "モーダル", "出現", "ふわっと", "目を引く" ], "support": "新しく普及中", "svg": "\n \n \n \n Saved\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "scroll-reveal", "animation-composition", "allow-discrete", "infinite-loop-motion" ] }, { "id": "view-transitions-spa", "num": "W-074", "name": "View Transitions API (Same-Document)", "nameJa": "View Transitions API（同一ページ内）", "category": "motion", "description": "document.startViewTransition()でDOM更新前後のスナップショットを撮り、要素を自動でクロスフェード・モーフさせる。view-transition-nameで個別要素も指定できる。", "useCase": "SPAのフィルタ切替やタブ切替、ギャラリーのグリッド⇔詳細表示の遷移を複雑な実装なしで滑らかにしたい場面。", "code": "document.startViewTransition(() => {\n updateDOM();\n});\n\n/* CSS */\n.card { view-transition-name: card-1; }\n::view-transition-old(card-1),\n::view-transition-new(card-1) { animation-duration: .4s; }", "tags": [ "CSS", "JavaScript", "View Transitions", "SPA", "ぬるっと", "没入感" ], "support": "新しく普及中", "svg": "\n \n \n \n \n grid to detail\n", "useFor": [ "site", "lp" ], "weight": "主役", "relatedIds": [ "view-transitions-mpa", "parallax-card-image", "page-turn", "scroll-snap" ] }, { "id": "view-transitions-mpa", "num": "W-075", "name": "Cross-Document View Transitions", "nameJa": "View Transitions（ページ遷移・MPA）", "category": "motion", "description": "通常のページ遷移（aタグのクリック）でも@view-transitionルールとview-transition-nameだけでフェードやモーフの遷移を付けられるMPA向けAPI。JS不要。", "useCase": "静的サイトやブログ・ECのページ遷移を、フルリロードの白フラッシュではなく画像や見出しが繋がって見える遷移にしたい場面。", "code": "@view-transition { navigation: auto; }\nimg.hero { view-transition-name: hero-image; }\n::view-transition-old(hero-image),\n::view-transition-new(hero-image) { animation-duration: .5s; }", "tags": [ "CSS", "View Transitions", "ページ遷移", "MPA", "ぬるっと", "没入感" ], "support": "新しく普及中", "svg": "\n \n \n \n \n page A\n \n \n \n page B\n \n \n", "useFor": [ "site" ], "weight": "主役", "relatedIds": [ "view-transitions-spa", "view-transition-class", "scroll-snap", "scroll-text-highlight" ] }, { "id": "flip-technique", "num": "W-076", "name": "FLIP Technique", "nameJa": "FLIPテクニック", "category": "motion", "description": "First・Last・Invert・Playの略。要素移動前後の位置差分をtransformで逆算し一瞬で戻してから0へアニメすることで、レイアウト変更を滑らかに見せる手法。", "useCase": "リスト並べ替え、カード追加・削除、グリッドのフィルタリングなど、レイアウトが飛ぶ変化を動いたように見せたい場面。", "code": "const first = el.getBoundingClientRect();\nmoveInDOM();\nconst last = el.getBoundingClientRect();\nconst dx = first.left - last.left, dy = first.top - last.top;\nel.animate([\n { transform: `translate(${dx}px, ${dy}px)` },\n { transform: 'translate(0, 0)' }\n], { duration: 300, easing: 'ease-out' });", "tags": [ "JavaScript", "FLIP", "レイアウト", "並べ替え", "ぬるっと", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "magnetic-button", "view-transitions-spa", "web-animations-api", "text-scramble" ] }, { "id": "offset-path", "num": "W-077", "name": "Motion Along a Path (offset-path)", "nameJa": "offset-pathでパス移動", "category": "motion", "description": "offset-pathにSVGパスやshape()を指定し、offset-distanceをアニメさせることで要素を曲線に沿って動かす。offset-rotateで進行方向へ向きも追従できる。", "useCase": "アイコンやアバターが曲線を描いて移動する装飾、プロセス図の上を進むポインター、遊び心のあるローディング演出に使う。", "code": ".dot {\n offset-path: path('M10,80 C60,10 180,10 230,80');\n offset-rotate: auto;\n animation: opth-run 3s linear infinite;\n}\n@keyframes opth-run { to { offset-distance: 100%; } }", "tags": [ "CSS", "offset-path", "パスアニメ", "軌道", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "keyframes-multistep", "property-custom-animate", "text-stroke-outline", "neon-glow-text" ] }, { "id": "animation-composition", "num": "W-078", "name": "animation-composition", "nameJa": "animation-compositionで複数アニメ合成", "category": "motion", "description": "同じプロパティ（例: transform）を狙う複数の@keyframesを animation-composition: add / accumulate で足し合わせ、ベースの動きに一時的な演出を重ねられる。", "useCase": "常時ゆれる浮遊アニメの上にホバー時だけ追加でバウンドさせるなど、ベースアニメと演出を独立管理したい場面。", "code": "@keyframes acmp-float { 50% { transform: translateY(-6px); } }\n@keyframes acmp-nudge { 50% { transform: translateX(10px); } }\n.chip { animation: acmp-float 2.4s ease-in-out infinite; }\n.chip:hover {\n animation: acmp-float 2.4s ease-in-out infinite,\n acmp-nudge .6s ease-in-out infinite;\n animation-composition: add;\n}", "tags": [ "CSS", "composition", "合成", "浮遊", "ふわっと", "目を引く" ], "support": "新しく普及中", "svg": "\n \n \n \n \n base\n add\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "infinite-loop-motion", "starting-style", "floating-shadow", "scroll-reveal" ] }, { "id": "stagger-delay", "num": "W-079", "name": "Staggered Delay Chain", "nameJa": "時間差の連鎖（スタガーアニメ）", "category": "motion", "description": ":nth-child()やCSSカスタムプロパティ（--i）でanimation-delayを要素ごとにずらし、順番に発火して見せる。JSでstyle.setProperty('--i', i)する構成が定番。", "useCase": "リストやカードグループの初期表示、ナビゲーションメニューの展開など、要素が波のように順番に現れる演出に使う。", "code": ".item {\n animation: stgd-in .5s ease-out both;\n animation-delay: calc(var(--i) * 80ms);\n}\n@keyframes stgd-in { from { opacity:0; transform: translateY(12px) } }\n\n/* JS: 要素ごとに --i を注入 */\nels.forEach((el, i) => el.style.setProperty('--i', i));", "tags": [ "CSS", "JavaScript", "stagger", "delay", "連鎖", "ぱらぱら", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "ripple-effect", "scroll-reveal", "horizontal-scroll-section", "stagger-char-reveal" ] }, { "id": "infinite-loop-motion", "num": "W-080", "name": "Infinite Loop Motion (Float / Pulse / Spin)", "nameJa": "無限ループ系（浮遊・脈動・回転）", "category": "motion", "description": "animation-iteration-count: infiniteで浮遊(translateY往復)・脈動(scale/opacity往復)・回転(rotate)を常時再生し、背景装飾やアイコンに生命感を与える基礎パターン。", "useCase": "ヒーローセクションの背景オブジェクト、通知バッジの脈動、ローディングスピナーなど止まらず動き続ける装飾全般。", "code": "@keyframes iflp-float { 50% { transform: translateY(-10px); } }\n@keyframes iflp-pulse { 50% { transform: scale(1.15); opacity: .7; } }\n@keyframes iflp-spin { to { transform: rotate(360deg); } }\n.float { animation: iflp-float 3s ease-in-out infinite; }\n.pulse { animation: iflp-pulse 1.6s ease-in-out infinite; }\n.spin { animation: iflp-spin 2s linear infinite; }", "tags": [ "CSS", "keyframes", "浮遊", "脈動", "回転", "ふわっと", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "animation-composition", "keyframes-multistep", "starting-style", "cube-3d" ] }, { "id": "web-animations-api", "num": "W-081", "name": "Web Animations API (element.animate)", "nameJa": "Web Animations API（element.animate）", "category": "motion", "description": "element.animate(keyframes, options)でCSSを書かずJSからキーフレームアニメを生成・制御する。play/pause/reverse/finishedなど再生制御がしやすい。", "useCase": "操作に応じて動的にキーフレームを組み立てたい場合や、アニメ完了を待ってから次の処理をつなげたいインタラクティブなUIに使う。", "code": "const anim = card.animate(\n [{ transform: 'scale(1)' }, { transform: 'scale(1.05)' }, { transform: 'scale(1)' }],\n { duration: 500, easing: 'ease-out', iterations: Infinity }\n);\nbtn.onclick = () => anim.playState === 'running' ? anim.pause() : anim.play();", "tags": [ "JavaScript", "WAAPI", "制御", "インタラクティブ", "きびきび", "ぬるっと" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "mouse-tilt", "view-transitions-spa", "flip-technique", "will-change-gpu" ] }, { "id": "hover-pause", "num": "W-082", "name": "Pause on Hover (animation-play-state)", "nameJa": "ホバーで一時停止（animation-play-state）", "category": "motion", "description": ":hoverでanimation-play-state: pausedを当てるだけで、常時ループ中のアニメを止めて詳細を見やすくする。JS不要の軽量な操作性向上テク。", "useCase": "自動再生カルーセルやマーキー、回転するロゴをカーソルを乗せている間だけ止めて読みやすくしたい場面。", "code": ".marquee { animation: hvpz-scroll 12s linear infinite; }\n.marquee:hover { animation-play-state: paused; }\n@keyframes hvpz-scroll { to { transform: translateX(-50%) } }", "tags": [ "CSS", "play-state", "ホバー", "マーキー", "さりげない", "すっと" ], "support": "広く対応", "svg": "\n \n \n NEW ARRIVAL - SALE - NEW ARRIVAL\n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "transition-basics", "hover-focus-states", "tooltip", "hover-lift-card" ] }, { "id": "interpolate-size", "num": "W-083", "name": "interpolate-size: allow-keywords", "nameJa": "interpolate-sizeでheight: autoへのアニメ", "category": "motion", "description": "html { interpolate-size: allow-keywords; }を指定すると、heightやwidthのautoなどキーワード値もtransitionの対象になり、高さを逆算する処理が不要になる。", "useCase": "アコーディオンやFAQの開閉、可変長リストの展開をJSで高さ計測せずCSSだけでheight: autoへ滑らかにアニメさせたい場面。", "code": "html { interpolate-size: allow-keywords; }\n.accordion-body {\n height: 0;\n overflow: hidden;\n transition: height .3s ease;\n}\n.accordion-body[data-open] { height: auto; }", "tags": [ "CSS", "interpolate-size", "アコーディオン", "height", "ぬるっと", "すっきり" ], "support": "新しく普及中", "svg": "\n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "view-transitions-spa", "view-transitions-mpa", "allow-discrete", "details-content" ] }, { "id": "allow-discrete", "num": "W-084", "name": "transition-behavior: allow-discrete", "nameJa": "allow-discreteでdisplayをアニメ", "category": "motion", "description": "transition-propertyにdisplayやcontent-visibilityを含め、transition-behavior: allow-discreteを指定すると、none⇔blockの切り替えも他プロパティと同期してフェードできる。", "useCase": "モーダルやツールチップをdisplay: noneで完全に消しつつ、消える直前までopacityのフェードアウトを見せたい場面。", "code": ".modal {\n opacity: 0;\n display: none;\n transition: opacity .25s, display .25s allow-discrete;\n}\n.modal[open] { opacity: 1; display: block; }", "tags": [ "CSS", "allow-discrete", "display", "モーダル", "ぬるっと", "ふわっと" ], "support": "新しく普及中", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "starting-style", "easing-design", "view-transitions-spa", "view-transitions-mpa" ] }, { "id": "will-change-gpu", "num": "W-085", "name": "will-change & GPU Compositing Caution", "nameJa": "will-changeとGPU合成の注意", "category": "motion", "description": "will-change: transformで事前にレイヤー分離を促しアニメをなめらかにする一方、多用するとメモリを圧迫するため、アニメ直前に付与し終了後は解除する運用が要点。", "useCase": "スクロールに連動する大きな要素や常時アニメする背景装飾で、カクつき（ジャンク）を防ぎつつレイヤー爆発は避けたい場面。", "code": ".card { transition: transform .3s; }\n.card:hover {\n will-change: transform;\n transform: translateY(-6px);\n}\n\n/* JS: 終了後に解除する運用 */\nel.addEventListener('transitionend', () => {\n el.style.willChange = 'auto';\n});", "tags": [ "CSS", "JavaScript", "will-change", "GPU", "きびきび", "なめらか" ], "support": "広く対応", "svg": "\n \n \n \n \n without\n will-change\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "view-transitions-spa", "web-animations-api", "css-custom-highlights", "transition-basics" ] }, { "id": "reduced-motion", "num": "W-086", "name": "Respecting prefers-reduced-motion", "nameJa": "prefers-reduced-motion対応", "category": "motion", "description": "@media (prefers-reduced-motion: reduce)でアニメ時間を極小化・無効化し、OS設定でアニメを減らしたいユーザーに配慮する。動き系の実装で必ず添える基礎。", "useCase": "大きく動く背景演出やパララックスを含むLPやサイト全般で、めまいや不快感に配慮したアクセシビリティ対応が必要な場面。", "code": "@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: .001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: .001ms !important;\n }\n}", "tags": [ "CSS", "アクセシビリティ", "reduced-motion", "基礎", "さりげない", "ひかえめ" ], "support": "広く対応", "svg": "\n \n \n \n \n no-preference\n reduce\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "transition-basics", "hover-focus-states", "keyframes-multistep", "easing-design" ] }, { "id": "property-custom-animate", "num": "W-087", "name": "@property Registered Custom Property Animation", "nameJa": "@propertyでカスタムプロパティをアニメ", "category": "motion", "description": "@propertyでカスタムプロパティに型(syntax)と初期値を登録すると、通常は補間できないグラデーション角度や色までtransition/animationで滑らかに変化させられる。", "useCase": "グラデーションの回転演出や数値カウントアップ表示など、素のCSSでは補間できない値を動かしたい場面。", "code": "@property --pcst-angle {\n syntax: '';\n inherits: false;\n initial-value: 0deg;\n}\n.gradient {\n background: conic-gradient(from var(--pcst-angle), var(--accent), var(--bg));\n transition: --pcst-angle 1s linear;\n}\n.gradient:hover { --pcst-angle: 360deg; }", "tags": [ "CSS", "@property", "カスタムプロパティ", "グラデーション", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n hue cycles via @property\n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "keyframes-multistep", "offset-path", "gradient-text", "text-stroke-outline" ] }, { "id": "hover-focus-states", "num": "W-088", "name": "Hover & Focus-Visible States", "nameJa": "ホバー・フォーカス状態設計", "category": "interact", "description": "マウス操作の:hoverとキーボード操作の:focus-visibleを分離し、マウス時は枠線を出さずキーボード操作時だけ明示的なアウトラインを表示する状態設計。", "useCase": "ボタン・リンク・フォーム全般で、見た目の綺麗さとキーボード操作のアクセシビリティを両立したい場面。", "code": ".btn:hover { background: #2563eb; }\n.btn:focus-visible {\n outline: 3px solid #93c5fd;\n outline-offset: 2px;\n}\n.btn:focus:not(:focus-visible) { outline: none; }", "tags": [ "CSS", "アクセシビリティ", "ホバー", "フォーカス", "さりげない", "基本" ], "support": "広く対応", "svg": "HoverFocusTabmouse vs Tab key", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "tooltip", "hover-pause", "reduced-motion", "hover-lift-card" ] }, { "id": "has-selector-interact", "num": "W-089", "name": ":has() Parent Selector", "nameJa": ":has()親セレクタ活用", "category": "interact", "description": "子要素の状態に応じて親要素の見た目を:has()で切り替えるCSSセレクタ。チェック済みの子を持つカードの枠線を強調するなどJS無しで実現できる。", "useCase": "カード選択のハイライト、フォームのエラー枠強調など、親の見た目を子の状態で変えたいレイアウト全般。", "code": ".card:has(input:checked) {\n border-color: var(--w-accent, #4fe3c1);\n background: rgba(79,227,193,.08);\n}\n.form-group:has(:invalid) { outline: 2px solid crimson; }", "tags": [ "CSS", "セレクタ", "状態管理", "普及中", "スマート", "省コード" ], "support": "広く対応", "svg": "Card:has(input:checked)", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "anchor-positioning", "details-summary-accordion", "popover-api", "css-scroll-controls" ] }, { "id": "popover-api", "num": "W-090", "name": "Popover API", "nameJa": "Popover API", "category": "interact", "description": "要素にpopover属性、トリガーにpopovertarget属性を付けるだけでトップレイヤー表示のポップアップを実装できるAPI。外側クリックやEscで自動的に閉じる。", "useCase": "メニュー・ヒントカード・簡易通知など、z-index管理やJSの開閉制御を書かずに浮かせたいUI全般。", "code": "\n
\n
  • 編集
  • 削除
\n
", "tags": [ "HTML", "API", "レイヤー", "普及中", "パッと切替", "省コード" ], "support": "新しく普及中", "svg": "開くtop-layer", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "details-summary-accordion", "dialog-modal", "has-selector-interact", "anchor-positioning" ] }, { "id": "dialog-modal", "num": "W-091", "name": " Modal", "nameJa": "dialog要素のモーダル", "category": "interact", "description": "dialog要素の.showModal()でネイティブモーダルを開く。背景は::backdropで暗転し、フォーカストラップとEscでの閉じる挙動が標準で備わっている。", "useCase": "確認ダイアログ・フォームモーダル・利用規約表示など、自前でフォーカス管理を書かずにモーダルを作りたい場面。", "code": "

確認しますか？

\n", "tags": [ "HTML", "API", "モーダル", "安定", "パッと切替", "高級感" ], "support": "広く対応", "svg": "確認しますか？閉じる", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "popover-api", "target-css-toggle", "command-palette", "lightbox-dialog" ] }, { "id": "anchor-positioning", "num": "W-092", "name": "CSS Anchor Positioning", "nameJa": "アンカーポジショニング", "category": "interact", "description": "anchor-nameで基準要素を登録し、position-anchor・position-area・anchor()で別要素を相対配置するCSS機能。主要ブラウザの最新版で利用でき、position-try-fallbacksで表示領域外へのはみ出しも回避できる。", "useCase": "ドロップダウンやツールチップをトリガーボタンに追従させたいが、ライブラリを使わず素のCSSで完結させたい場面。", "code": ".trigger { anchor-name: --btn; }\n.menu {\n position: absolute;\n position-anchor: --btn;\n top: anchor(bottom);\n left: anchor(left);\n}", "tags": [ "CSS", "位置", "レイアウト", "アンカー", "普及中", "省コード" ], "support": "新しく普及中", "svg": "anchoranchor() / anchor-name", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "has-selector-interact", "scroll-margin-padding", "details-summary-accordion", "text-orientation-upright" ] }, { "id": "details-summary-accordion", "num": "W-093", "name": "Details/Summary Exclusive Accordion", "nameJa": "アコーディオン（details/summary）", "category": "interact", "description": "details要素とsummaryだけで開閉するアコーディオン。同じname属性を複数のdetailsに付けるとラジオボタンのように1つだけ開く排他制御になる。", "useCase": "FAQ・仕様一覧・LPの折りたたみセクションをJSを書かずに実装したい場面。", "code": "
質問A

回答A

\n
質問B

回答B

", "tags": [ "HTML", "アコーディオン", "省コード", "さりげない", "普及中" ], "support": "新しく普及中", "svg": "質問A質問B", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "popover-api", "inert-attribute", "has-selector-interact", "anchor-positioning" ] }, { "id": "tooltip", "num": "W-094", "name": "CSS Tooltip", "nameJa": "ツールチップ", "category": "interact", "description": "要素の::afterにcontent: attr(data-tip)で吹き出しを仕込み、:hoverや:focus時にopacityとtransformでふわっと表示するCSSツールチップ。", "useCase": "アイコンボタンの説明や専門用語の補足、フォーム入力欄のヒントなど、常時は隠しておきたい補足情報の表示。", "code": ".tip { position: relative; }\n.tip::after {\n content: attr(data-tip);\n position: absolute; bottom: 130%; left: 50%;\n transform: translateX(-50%) translateY(4px);\n opacity: 0; transition: .2s;\n}\n.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }", "tags": [ "CSS", "ホバー", "補足情報", "安定", "ふわっと", "さりげない" ], "support": "広く対応", "svg": "?補足説明テキスト", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "hover-focus-states", "hover-pause", "hover-lift-card", "clip-path-shapes" ] }, { "id": "custom-cursor", "num": "W-095", "name": "Custom Cursor", "nameJa": "カスタムカーソル", "category": "interact", "description": "cursor: noneでシステムカーソルを消し、fixed配置の要素をmousemoveの座標に合わせてtransformで追従させ、独自グラフィックのカーソルに差し替える演出。", "useCase": "ブランド世界観の強いLPやポートフォリオサイトで、カーソル自体を演出の一部にしたい場面。", "code": "body { cursor: none; }\n.cursor-dot {\n position: fixed; width: 20px; height: 20px; border-radius: 50%;\n background: var(--accent); pointer-events: none;\n transform: translate(var(--x), var(--y));\n transition: transform .08s linear;\n}", "tags": [ "CSS", "JS", "カーソル", "演出", "目を引く", "高級感", "ダイナミック" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "horizontal-scroll-section", "carousel-3d", "cursor-spotlight", "laser-pointer-cursor" ] }, { "id": "magnetic-button", "num": "W-096", "name": "Magnetic Button", "nameJa": "磁石ボタン", "category": "interact", "description": "mousemoveでカーソルとボタン中心の距離を計算し、近づくとボタンをtransform: translateで引き寄せ、離れるとease-outで元位置へ戻す動き。", "useCase": "CTAボタンやSNSアイコンなど、操作の楽しさとクリック率を上げたい主要導線に使う。", "code": "btn.addEventListener('mousemove', e => {\n const r = btn.getBoundingClientRect();\n const x = e.clientX - r.left - r.width / 2;\n const y = e.clientY - r.top - r.height / 2;\n btn.style.transform = `translate(${x * .3}px, ${y * .3}px)`;\n});\nbtn.addEventListener('mouseleave', () => btn.style.transform = '');", "tags": [ "JS", "ホバー", "CTA", "ダイナミック", "目を引く", "ぬるっと" ], "support": "広く対応", "svg": "CLICK", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "text-scramble", "custom-cursor", "drag-and-drop", "flip-technique" ] }, { "id": "ripple-effect", "num": "W-097", "name": "Ripple Effect", "nameJa": "リップルエフェクト", "category": "interact", "description": "クリック位置を起点に円をscale(0)からscale(4)へ広げながらopacityを0にするアニメーションで、水面の波紋のような押下フィードバックを出す表現。", "useCase": "Material Design風のボタン・カードタップで、押した瞬間のフィードバックを視覚的に強調したい場面。", "code": ".ripple {\n position: absolute; border-radius: 50%;\n background: rgba(255,255,255,.5);\n transform: scale(0); animation: ripple .6s linear;\n}\n@keyframes ripple { to { transform: scale(4); opacity: 0; } }", "tags": [ "CSS", "JS", "クリック", "フィードバック", "パッと切替", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n click feedback\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "copy-button", "custom-cursor", "toast-notification", "scroll-reveal" ] }, { "id": "copy-button", "num": "W-098", "name": "Copy Button", "nameJa": "コピー機能付きボタン", "category": "interact", "description": "navigator.clipboard.writeText()でテキストをコピーし、成功時だけボタンのラベルを一瞬「完了」に切り替える。", "useCase": "コードブロック・クーポンコード・共有用URLなど、ユーザーにワンクリックでコピーさせたい場面。", "code": "btn.addEventListener('click', async () => {\n await navigator.clipboard.writeText(code);\n btn.textContent = 'コピーしました';\n setTimeout(() => btn.textContent = 'コピー', 1500);\n});", "tags": [ "JS", "API", "クリック", "フィードバック", "パッと切替", "便利" ], "support": "広く対応", "svg": "コピー完了", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "ripple-effect", "web-share-api", "scroll-spy-nav", "popover-api" ] }, { "id": "web-share-api", "num": "W-099", "name": "Web Share API", "nameJa": "Web Share API", "category": "interact", "description": "navigator.share()を呼ぶとOS標準の共有シートが開き、LINEやXなど端末にインストール済みのアプリへ直接共有できる。対応判定はnavigator.shareの有無で行う。", "useCase": "モバイル中心のLPや記事ページで、個別のSNSシェアボタンを並べずネイティブ共有UIを使いたい場面。", "code": "if (navigator.share) {\n shareBtn.onclick = () => navigator.share({\n title: document.title, url: location.href\n });\n}", "tags": [ "JS", "API", "シェア", "モバイル", "パッと切替", "便利" ], "support": "限定対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "copy-button", "scroll-spy-nav", "popover-api", "dialog-modal" ] }, { "id": "target-css-toggle", "num": "W-100", "name": "CSS-only Page with :target", "nameJa": ":targetでCSSだけのページ切替", "category": "interact", "description": "aタグのhrefでid付き要素へジャンプし、:target擬似クラスで表示中の要素だけdisplay:blockにする。JS無しでタブ切替や簡易モーダルを作れる。", "useCase": "静的サイトでタブUIやライトボックス、簡易モーダルをJS無しで実装したい場面。", "code": ".panel { display: none; }\n.panel:target { display: block; }\n\nTab1\n
内容
", "tags": [ "CSS", "HTML", "ページ切替", "安定", "パッと切替", "軽量" ], "support": "広く対応", "svg": "#tab1#tab2内容 1内容 2", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "dialog-modal", "customizable-select", "popover-api", "tooltip" ] }, { "id": "scroll-spy-nav", "num": "W-101", "name": "Scroll Spy Navigation", "nameJa": "スクロールスパイ付きナビ", "category": "interact", "description": "IntersectionObserverで表示中のセクションを検知し、対応するナビリンクにactiveクラスを付け替える。スクロール位置にナビのハイライトが自動追従する。", "useCase": "長いLPや資料サイトのサイドナビ・目次で、今どこを読んでいるかを常に示したい場面。", "code": "const io = new IntersectionObserver(entries => {\n entries.forEach(e => {\n nav.querySelector(`[href=\"#${e.target.id}\"]`)\n .classList.toggle('active', e.isIntersecting);\n });\n}, { rootMargin: '-40% 0px -40% 0px' });\nsections.forEach(s => io.observe(s));", "tags": [ "JS", "API", "スクロール", "ナビゲーション", "さりげない", "便利" ], "support": "広く対応", "svg": "概要機能料金", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "copy-button", "web-share-api", "keyboard-shortcuts", "sticky-position" ] }, { "id": "command-palette", "num": "W-102", "name": "Command Palette", "nameJa": "コマンドパレット風検索", "category": "interact", "description": "Ctrl/Cmd+Kなどのショートカットで画面中央にオーバーレイ検索を呼び出し、入力に合わせてリストをインクリメンタルに絞り込む。", "useCase": "ドキュメントサイトやダッシュボードで、メニューを辿らず一発でページ・機能に飛びたいパワーユーザー向け導線。", "code": "document.addEventListener('keydown', e => {\n if ((e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault(); palette.showModal(); input.focus();\n }\n});\ninput.addEventListener('input', () => filterItems(input.value));", "tags": [ "JS", "HTML", "検索", "ショートカット", "パッと切替", "高級感", "没入感" ], "support": "広く対応", "svg": "検索...", "useFor": [ "site" ], "weight": "主役", "relatedIds": [ "lightbox-gallery", "dialog-modal", "lightbox-dialog", "video-background" ] }, { "id": "inert-attribute", "num": "W-103", "name": "inert Attribute", "nameJa": "inert属性", "category": "interact", "description": "要素にinert属性を付けるだけで、配下のクリック・フォーカス・スクリーンリーダー読み上げを丸ごと無効化するHTML標準機能。モーダル表示中の背景操作封じに使う。", "useCase": "モーダルやドロワー表示中に背景コンテンツを完全に触れなくしたい場面。アクセシビリティ対応の手数を減らす。", "code": "
...
\nモーダル内容\n\nmain.toggleAttribute('inert', dialog.open);", "tags": [ "HTML", "アクセシビリティ", "モーダル", "普及中", "さりげない", "安全" ], "support": "広く対応", "svg": "モーダル表示中", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "details-summary-accordion", "customizable-select", "dialog-closedby", "hover-focus-states" ] }, { "id": "drag-and-drop", "num": "W-104", "name": "Drag and Drop", "nameJa": "ドラッグ&ドロップ", "category": "interact", "description": "draggable属性とdragstart/dragover/dropイベントで要素を掴んで別領域へ移動させる。dragoverでpreventDefaultしないとdropが発火しない点に注意。", "useCase": "カンバンボードのカード移動、ファイルアップロードの投げ込み領域、並べ替え可能なリスト作成など。", "code": "card.addEventListener('dragstart', e => e.dataTransfer.setData('id', card.id));\nzone.addEventListener('dragover', e => e.preventDefault());\nzone.addEventListener('drop', e =>\n zone.append(document.getElementById(e.dataTransfer.getData('id'))));", "tags": [ "JS", "API", "ドラッグ", "カンバン", "ダイナミック", "目を引く", "直感的" ], "support": "広く対応", "svg": "", "useFor": [ "site" ], "weight": "主役", "relatedIds": [ "magnetic-button", "custom-cursor", "text-scramble", "horizontal-scroll-section" ] }, { "id": "keyboard-shortcuts", "num": "W-105", "name": "Keyboard Shortcuts", "nameJa": "キーボードショートカット実装", "category": "interact", "description": "keydownイベントでkeyやmodifierキーの組み合わせを判定し、g→hのような連続キー入力も内部バッファで追跡してコマンドを実行する仕組み。", "useCase": "エディタ・ダッシュボード・スライド操作など、マウスに頼らず高速操作したいパワーユーザー向け機能。", "code": "let buffer = '';\ndocument.addEventListener('keydown', e => {\n if (e.target.tagName === 'INPUT') return;\n buffer = (buffer + e.key).slice(-2);\n if (buffer === 'gh') location.hash = '#home';\n});", "tags": [ "JS", "キーボード", "ショートカット", "パワーユーザー", "さりげない", "便利" ], "support": "広く対応", "svg": "ghg → h でホームへ", "useFor": [ "slide", "site" ], "weight": "脇役", "relatedIds": [ "scroll-spy-nav", "copy-button", "web-share-api", "command-palette" ] }, { "id": "perspective-rotate3d", "num": "W-106", "name": "Perspective & rotate3d", "nameJa": "パースペクティブ回転", "category": "depth", "description": "親要素にperspectiveを設定し、子要素をrotateX/rotateYで傾けて奥行きのある回転を作る3D表現の基本形。transform-style: preserve-3dも併用する。", "useCase": "ホバーで傾くバナーや見出しカードなど、あらゆる3D表現の土台として最初に押さえておきたい技。", "code": ".p3d-stage{ perspective: 800px; }\n.p3d-card{ transform: rotateY(25deg) rotateX(10deg); transition: transform .4s; }\n.p3d-card:hover{ transform: rotateY(0) rotateX(0); }", "tags": [ "CSS", "3D", "transform", "ホバー", "奥行き感", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "card-flip", "cube-3d", "ring-gallery", "scroll-3d-rotate" ] }, { "id": "card-flip", "num": "W-107", "name": "Card Flip", "nameJa": "カードフリップ", "category": "depth", "description": "backface-visibility: hiddenで表裏2面を作り、rotateY(180deg)で切り替えてカードがくるっと裏返る定番の3D表現。preserve-3dと併用する。", "useCase": "料金プランの詳細開示、FAQのQ→A切り替え、名刺風の自己紹介カードなどに使う。", "code": ".cflip-inner{ transform-style: preserve-3d; transition: transform .6s; }\n.cflip:hover .cflip-inner{ transform: rotateY(180deg); }\n.cflip-front, .cflip-back{ backface-visibility: hidden; position: absolute; inset: 0; }\n.cflip-back{ transform: rotateY(180deg); }", "tags": [ "CSS", "3D", "ホバー", "カード", "パッと切替", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "pricing-card-hover-lift", "grayscale-hover", "perspective-rotate3d", "page-turn" ] }, { "id": "mouse-tilt", "num": "W-108", "name": "Mouse Tilt", "nameJa": "マウス追従チルト", "category": "depth", "description": "マウス座標から傾き角を計算し、JSでrotateX/rotateYへ反映してカードがカーソルに追従して傾く立体的なインタラクション。", "useCase": "商品カードやプロフィールカードにマウスを乗せた瞬間の高級感を出したいときに使う。", "code": "el.addEventListener('mousemove', e => {\n const r = el.getBoundingClientRect();\n const rx = (e.clientY - r.top - r.height / 2) / 10;\n const ry = (e.clientX - r.left - r.width / 2) / -10;\n el.style.transform = `perspective(600px) rotateX(${rx}deg) rotateY(${ry}deg)`;\n});", "tags": [ "JS", "3D", "マウス追従", "ホバー", "高級感", "ぬるっと", "インタラクティブ" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "page-turn", "card-flip", "variable-font-weight", "web-animations-api" ] }, { "id": "cube-3d", "num": "W-109", "name": "3D Cube", "nameJa": "3Dキューブ", "category": "depth", "description": "6面をtransform-style: preserve-3dで箱状に組み立て、translateZで配置しrotateX/Yで回転させる純CSSの立方体表現。", "useCase": "サービス紹介のロゴキューブやローディング表示など、回転する立体オブジェクトが欲しいときに使う。", "code": ".cube-box{ transform-style: preserve-3d; animation: cube-spin 6s linear infinite; }\n.cube-face{ position: absolute; width: 100px; height: 100px; }\n.cube-front{ transform: translateZ(50px); }\n.cube-back{ transform: rotateY(180deg) translateZ(50px); }\n@keyframes cube-spin{ to{ transform: rotateX(360deg) rotateY(360deg); } }", "tags": [ "CSS", "3D", "preserve-3d", "回転", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "ring-gallery", "scroll-3d-rotate", "carousel-3d", "perspective-rotate3d" ] }, { "id": "carousel-3d", "num": "W-110", "name": "3D Carousel (Coverflow)", "nameJa": "3Dカルーセル", "category": "depth", "description": "複数カードをrotateYとtranslateZで円弧状に並べ、中央を正面・左右を傾けて奥に配置する3Dカルーセル。indexに応じ角度をJSで再計算する。", "useCase": "製品ギャラリーや実績スライダーで、次々にカードをめくる立体的な一覧演出に使う。", "code": ".carousel-track{ transform-style: preserve-3d; }\n.carousel-item{ position: absolute; transition: transform .5s; }\n.carousel-item[data-pos=\"0\"]{ transform: translateZ(0) rotateY(0); }\n.carousel-item[data-pos=\"-1\"]{ transform: translateX(-140px) translateZ(-120px) rotateY(35deg); }\n.carousel-item[data-pos=\"1\"]{ transform: translateX(140px) translateZ(-120px) rotateY(-35deg); }", "tags": [ "CSS", "JS", "3D", "スライダー", "ギャラリー", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "cube-3d", "ring-gallery", "horizontal-scroll-section", "custom-cursor" ] }, { "id": "preserve-3d-nesting", "num": "W-111", "name": "Nested preserve-3d", "nameJa": "入れ子の3D空間", "category": "depth", "description": "transform-style: preserve-3dを親子で入れ子にし、子要素の3D変形を親の3D空間に保ったまま組み合わせる高度な立体構築技法。", "useCase": "複数パーツからなる立体オブジェクト（本・箱・複合カード）を階層構造のまま回転させたいときに使う。", "code": ".nest-scene{ perspective: 900px; }\n.nest-parent{ transform-style: preserve-3d; transform: rotateY(20deg); }\n.nest-child{ transform-style: preserve-3d; transform: translateZ(40px) rotateX(15deg); }\n/* 子要素にもtransform-styleを明示しないと平面化されるので注意 */", "tags": [ "CSS", "3D", "preserve-3d", "階層構造", "精密", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "cube-3d", "isometric", "ring-gallery", "perspective-grid-floor" ] }, { "id": "parallax-layers", "num": "W-112", "name": "Multi-layer Parallax", "nameJa": "多層パララックス", "category": "depth", "description": "背景から前景まで複数レイヤーにtranslateZとscaleを与え、層ごとに移動量を変えることで視差による奥行きを錯覚させる多層パララックス。", "useCase": "ヒーローセクションの背景演出やスクロール連動のストーリーテリングページに使う。", "code": ".pxl-scene{ perspective: 1px; height: 100vh; overflow-y: scroll; transform-style: preserve-3d; }\n.pxl-back{ transform: translateZ(-2px) scale(3); }\n.pxl-mid{ transform: translateZ(-1px) scale(2); }\n.pxl-front{ transform: translateZ(0); }", "tags": [ "CSS", "スクロール", "パララックス", "奥行き感", "没入感", "レイヤー" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "glass-depth", "vertical-scroll-snap", "scroll-snap", "parallax-scroll" ] }, { "id": "floating-shadow", "num": "W-113", "name": "Floating Shadow", "nameJa": "浮遊影の連動", "category": "depth", "description": "要素をtranslateYで上下にふわふわ揺らしつつ、真下の影を要素の高さと連動して伸縮させ、宙に浮いている感覚を強調する表現。", "useCase": "アイコンやプロダクト画像を宙に浮かせて見せたいヒーロー演出やアイキャッチに使う。", "code": ".float-obj{ animation: float-move 3s ease-in-out infinite; }\n.float-shadow{ animation: float-shrink 3s ease-in-out infinite; }\n@keyframes float-move{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } }\n@keyframes float-shrink{ 0%, 100%{ transform: scale(1); opacity: .5; } 50%{ transform: scale(.6); opacity: .25; } }", "tags": [ "CSS", "アニメーション", "浮遊感", "ふわっと", "影", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "starting-style", "animation-composition", "view-timeline-reveal", "scroll-reveal" ] }, { "id": "isometric", "num": "W-114", "name": "Isometric Transform", "nameJa": "アイソメトリック変形", "category": "depth", "description": "rotateXとrotateZの組み合わせで等角投影に近い変形を作り、正面図をそのまま立体的な箱型に見せるアイソメトリック表現。", "useCase": "アプリの機能図やプロセス説明図をゲーム風の立体イラストで見せたいセクションに使う。", "code": ".iso-scene{ transform: rotateX(55deg) rotateZ(45deg); transform-style: preserve-3d; }\n.iso-block{ transform: translateZ(20px); box-shadow: 0 20px 20px rgba(0,0,0,.3); }\n/* matrix()による2.5D近似でも代用可 */", "tags": [ "CSS", "3D", "アイソメトリック", "レイアウト", "精密", "落ち着いた" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "preserve-3d-nesting", "text-orientation-upright", "vertical-embed-override", "logical-properties-vertical" ] }, { "id": "page-turn", "num": "W-115", "name": "Page Turn", "nameJa": "ページめくり", "category": "depth", "description": "要素を左右2分割しrotateY(-160deg)前後で右端を軸にめくり、裏面にグラデーション影を重ねて本のページのような質感を出す。", "useCase": "電子カタログや長文コンテンツのページ送り、写真集風ギャラリーの演出に使う。", "code": ".page-leaf{ transform-origin: left center; transform-style: preserve-3d; transition: transform .8s ease; }\n.page-leaf.turning{ transform: rotateY(-160deg); }\n.page-leaf::after{ content: \"\"; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.25)); opacity: 0; }\n.page-leaf.turning::after{ opacity: 1; }", "tags": [ "CSS", "JS", "3D", "ページ送り", "高級感", "ぬるっと" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "slide", "site" ], "weight": "主役", "relatedIds": [ "mouse-tilt", "card-flip", "carousel-3d", "variable-font-weight" ] }, { "id": "text-extrude", "num": "W-116", "name": "3D Text Extrude", "nameJa": "文字の押し出し", "category": "depth", "description": "同じ文字にtext-shadowで色と濃度を変えた層を斜め方向へ重ね、厚みのある立体文字を作る押し出し表現。層数が多いほど厚みが増す。", "useCase": "インパクトが欲しい見出しやロゴタイプ、レトロ・ゲーム風のタイトル演出に使う。", "code": ".text-3d{ color: #fff; text-shadow:\n 1px 1px 0 #0008, 2px 2px 0 #0008, 3px 3px 0 #0008,\n 4px 4px 0 #0008, 5px 5px 6px rgba(0,0,0,.4);\n}\n/* 層を増やすほど厚みが増す。JS/Sassでループ生成すると保守しやすい */", "tags": [ "CSS", "タイポグラフィ", "立体文字", "高級感", "レトロ", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n DEPTH\n DEPTH\n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "outline-text-bg", "text-image-mask", "gradient-text", "marker-highlight" ] }, { "id": "ring-gallery", "num": "W-117", "name": "Ring Gallery", "nameJa": "リング状回転ギャラリー", "category": "depth", "description": "複数要素をrotateY(360deg/n×i)とtranslateZで円周上に等間隔配置し、親をrotateYで回転させ画像がリング状に周回する演出。", "useCase": "実績ロゴやメンバー紹介をぐるぐる回る立体ギャラリーとして見せたいセクションに使う。", "code": ".ring-stage{ transform-style: preserve-3d; animation: ring-spin 10s linear infinite; }\n.ring-item{\n position: absolute;\n transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(140px);\n}\n@keyframes ring-spin{ to{ transform: rotateY(360deg); } }", "tags": [ "CSS", "3D", "回転", "ギャラリー", "ダイナミック", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "cube-3d", "scroll-3d-rotate", "perspective-grid-floor", "carousel-3d" ] }, { "id": "glass-depth", "num": "W-118", "name": "Layered Glass Depth", "nameJa": "ガラスの奥行き", "category": "depth", "description": "backdrop-filter: blurと半透明背景を持つ層を複数重ね、層ごとに濃度とぼかし量を変えて奥に向かうガラスの厚みを表現する。", "useCase": "モーダルやカード背景にすりガラスの重なりを出し、奥行きのある高級感を演出したいときに使う。", "code": ".glass-l1{ backdrop-filter: blur(4px); background: rgba(255,255,255,.08); }\n.glass-l2{ backdrop-filter: blur(10px); background: rgba(255,255,255,.05); transform: translateZ(-20px) scale(1.05); }\n.glass-l3{ backdrop-filter: blur(18px); background: rgba(255,255,255,.03); transform: translateZ(-40px) scale(1.1); }", "tags": [ "CSS", "すりガラス", "奥行き感", "高級感", "レイヤー", "落ち着いた" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "parallax-layers", "glassmorphism", "perspective-rotate3d", "card-flip" ] }, { "id": "hover-lift-card", "num": "W-119", "name": "Hover Lift Card", "nameJa": "浮き上がるカード", "category": "depth", "description": "ホバー時にtranslateYで要素を持ち上げつつbox-shadowを大きく拡散させ、影の距離感で浮き上がったように見せるシンプルな立体演出。", "useCase": "料金表カードや記事一覧のサムネイルに、触れた瞬間の反応として使う定番テク。", "code": ".lift-card{ transition: transform .25s ease, box-shadow .25s ease; }\n.lift-card:hover{\n transform: translateY(-10px);\n box-shadow: 0 20px 30px rgba(0,0,0,.35);\n}", "tags": [ "CSS", "ホバー", "カード", "浮遊感", "さりげない", "定番" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "pricing-card-hover-lift", "card-flip", "hover-pause", "hover-focus-states" ] }, { "id": "scroll-3d-rotate", "num": "W-120", "name": "Scroll-driven 3D Rotate", "nameJa": "スクロール連動3D回転", "category": "depth", "description": "animation-timeline: scroll()やIntersectionObserverでスクロール量を角度に変換し、要素をrotateX/Yで連続的に回転させる表現。", "useCase": "製品紹介ページでスクロールに合わせてオブジェクトが立体的に回転していく演出に使う。", "code": ".scroll3d-obj{\n animation: scroll3d-turn linear;\n animation-timeline: scroll();\n}\n@keyframes scroll3d-turn{ from{ transform: rotateY(0); } to{ transform: rotateY(360deg); } }", "tags": [ "CSS", "スクロール", "3D", "回転", "ダイナミック", "限定対応" ], "support": "限定対応", "svg": "\n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "cube-3d", "ring-gallery", "perspective-rotate3d", "perspective-grid-floor" ] }, { "id": "perspective-grid-floor", "num": "W-121", "name": "Perspective Grid Floor", "nameJa": "パースグリッド床", "category": "depth", "description": "巨大なグリッド背景をrotateX(70〜80deg)前後で寝かせ、perspectiveで奥へ収束させることでシンセウェーブ風の無限グリッド床を作る。", "useCase": "SF・レトロフューチャー系のヒーロー背景やイベントLPの世界観演出に使う。", "code": ".grid-floor{ perspective: 400px; overflow: hidden; }\n.grid-plane{\n background:\n linear-gradient(#4fe3c1 1px, transparent 1px) 0 0/40px 40px,\n linear-gradient(90deg, #4fe3c1 1px, transparent 1px) 0 0/40px 40px;\n transform: rotateX(75deg);\n animation: grid-scroll 2s linear infinite;\n}\n@keyframes grid-scroll{ to{ background-position: 0 40px; } }", "tags": [ "CSS", "3D", "グリッド", "レトロ", "没入感", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp" ], "weight": "主役", "relatedIds": [ "ring-gallery", "perspective-rotate3d", "cube-3d", "preserve-3d-nesting" ] }, { "id": "tilt-shift", "num": "W-122", "name": "Tilt-Shift Blur", "nameJa": "チルトシフト風ぼかし", "category": "depth", "description": "画面の上下をbackdrop-filter: blurで強くぼかし、中央だけをシャープに残すことでミニチュアジオラマのような被写界深度の浅さを演出する。", "useCase": "実写写真や俯瞰イラストを「ジオラマ風」に見せて可愛らしさや特別感を出したいときに使う。", "code": ".tshift-wrap{ position: relative; }\n.tshift-wrap::before, .tshift-wrap::after{\n content: \"\"; position: absolute; left: 0; right: 0; height: 35%;\n backdrop-filter: blur(6px);\n}\n.tshift-wrap::before{ top: 0; }\n.tshift-wrap::after{ bottom: 0; }", "tags": [ "CSS", "ぼかし", "ミニチュア風", "被写界深度", "さりげない", "演出" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "mask-gradient-fade", "hover-lift-card", "text-emphasis-dots", "vertical-writing" ] }, { "id": "gradient-animation", "num": "W-123", "name": "Animated Gradient", "nameJa": "動くグラデーション", "category": "background", "description": "background-sizeを200%以上に拡大したグラデーションをbackground-positionでずらし続け、色が滑らかに流れる背景を作る。@keyframesでpositionを往復させるだけで実装できる。", "useCase": "LPのヒーローセクションやCTAボタン背景で、単色より動きと高級感を出したいときに使う。", "code": ".grad-anim {\n background: linear-gradient(120deg, #4f46e5, #06b6d4, #4f46e5);\n background-size: 300% 300%;\n animation: gradMove 8s ease infinite;\n}\n@keyframes gradMove {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}", "tags": [ "CSS", "グラデーション", "背景", "ふわっと", "高級感", "ヒーロー", "アニメーション" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "mesh-gradient", "aurora-background", "outline-text-bg", "scrim-overlay" ] }, { "id": "aurora-background", "num": "W-124", "name": "Aurora Background", "nameJa": "オーロラ背景", "category": "background", "description": "複数のradial-gradientを重ねてfilter: blur()で滲ませ、ゆるやかに位置を動かして光の帯が揺らめくオーロラのような背景を作る。", "useCase": "プレミアム感を出したいLPのヒーローやアプリのログイン画面の背景に使う。", "code": ".aurora { position: relative; background: #101830; overflow: hidden; }\n.aurora::before {\n content: \"\";\n position: absolute; inset: -20%;\n background:\n radial-gradient(40% 30% at 30% 30%, #4fe3c1aa, transparent 70%),\n radial-gradient(35% 25% at 70% 60%, #ffc857aa, transparent 70%);\n filter: blur(40px);\n animation: auroraDrift 12s ease-in-out infinite alternate;\n}\n@keyframes auroraDrift {\n from { transform: translate(-5%, -5%) rotate(0deg); }\n to { transform: translate(5%, 5%) rotate(6deg); }\n}", "tags": [ "CSS", "radial-gradient", "blur", "背景", "幻想的", "高級感", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "lava-blob", "starfield", "gradient-animation", "mesh-gradient" ] }, { "id": "mesh-gradient", "num": "W-125", "name": "Mesh Gradient", "nameJa": "メッシュグラデーション", "category": "background", "description": "複数の色をぼかした点として異なる位置に配置したradial-gradientを重ね、面同士を滑らかに混ぜる多色グラデーション背景。単純な2色グラデより奥行きが出る。", "useCase": "SaaSのトップページやカード背景で、単調にならない彩り豊かな余白を作りたいときに使う。", "code": ".mesh {\n background:\n radial-gradient(at 20% 20%, #4fe3c1 0px, transparent 50%),\n radial-gradient(at 80% 10%, #ffc857 0px, transparent 50%),\n radial-gradient(at 60% 80%, #6366f1 0px, transparent 50%),\n radial-gradient(at 10% 90%, #ec4899 0px, transparent 50%),\n #101830;\n}", "tags": [ "CSS", "グラデーション", "背景", "多色", "高級感", "目を引く", "おしゃれ" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "gradient-animation", "outline-text-bg", "gradient-text", "gradient-border" ] }, { "id": "grain-noise", "num": "W-126", "name": "Grain / Noise Texture", "nameJa": "ノイズ・グレイン", "category": "background", "description": "SVGのfeTurbulenceとfeColorMatrixで生成したざらつきをoverlayとして敷き、単調な面にフィルム調の質感を足す。data URI不使用でインラインSVGフィルタとして実装できる。", "useCase": "写真感のあるヒーロー背景や暗色LPで、のっぺり感を消して高級感を出したいときに使う。", "code": "\n \n \n \n \n \n", "tags": [ "SVG", "フィルター", "質感", "背景", "ざらっと", "フィルム調", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "fe-diffuselighting-emboss", "sketchy-outline-filter", "gradient-animate", "drop-shadow-filter" ] }, { "id": "dot-grid-pattern", "num": "W-127", "name": "Dot / Grid Pattern", "nameJa": "ドット・グリッドパターン", "category": "background", "description": "radial-gradientやlinear-gradientをbackground-sizeで繰り返し、等間隔のドットや格子線を敷き詰めて設計図のような整然とした背景を作る。", "useCase": "SaaS管理画面やテック系LPの背景で、余白に情報感・秩序感を持たせたいときに使う。", "code": ".dot-grid {\n background-color: #101830;\n background-image: radial-gradient(#4fe3c1 1px, transparent 1px);\n background-size: 20px 20px;\n}", "tags": [ "CSS", "パターン", "背景", "グリッド", "整然", "テック感", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "outline-text-bg", "scrim-overlay", "text-emphasis-dots", "gradient-animation" ] }, { "id": "flowing-stripes", "num": "W-128", "name": "Flowing Stripes", "nameJa": "流れるストライプ", "category": "background", "description": "repeating-linear-gradientで斜めの縞模様を作り、background-positionをアニメーションさせて縞が流れ続けるように見せる背景演出。", "useCase": "セール告知バナーやCTA周りの背景で、勢いやスピード感を演出したいときに使う。", "code": ".stripes {\n background: repeating-linear-gradient(\n 45deg,\n #4fe3c1 0 10px,\n #101830 10px 20px\n );\n background-size: 200% 200%;\n animation: stripeFlow 3s linear infinite;\n}\n@keyframes stripeFlow {\n from { background-position: 0 0; }\n to { background-position: 40px 40px; }\n}", "tags": [ "CSS", "ストライプ", "背景", "動的", "スピード感", "ダイナミック", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "mesh-gradient", "cursor-spotlight", "outline-text-bg", "crt-scanlines" ] }, { "id": "lava-blob", "num": "W-129", "name": "Lava Lamp Blob", "nameJa": "ラバランプ風ブロブ", "category": "background", "description": "filter: blur()をかけた複数の円をゆっくり移動・変形させ、mix-blend-modeで融合させることでラバランプのような有機的な滲みの背景を作る。", "useCase": "クリエイティブ系ポートフォリオやブランドLPのヒーロー背景で、柔らかく有機的な雰囲気を出したいときに使う。", "code": ".lava { position:relative; overflow:hidden; background:#101830; filter: blur(30px) contrast(20); }\n.lava span {\n position:absolute; width:120px; height:120px; border-radius:50%;\n background:#4fe3c1; mix-blend-mode:screen;\n animation: lavaMove 8s ease-in-out infinite alternate;\n}\n@keyframes lavaMove {\n from { transform: translate(0,0) scale(1); }\n to { transform: translate(60px,-40px) scale(1.4); }\n}", "tags": [ "CSS", "blur", "ブロブ", "背景", "有機的", "ぬるっと", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "aurora-background", "starfield", "cursor-spotlight", "ken-burns" ] }, { "id": "particle-background", "num": "W-130", "name": "Particle Background", "nameJa": "パーティクル背景", "category": "background", "description": "canvasに小さな点を大量に配置し、requestAnimationFrameで座標を更新して漂わせたり線で結んだりする軽量なアニメーション背景。", "useCase": "テック系プロダクトサイトやイベントLPのヒーローで、先進的で動きのある印象を出したいときに使う。", "code": "const c = document.querySelector('canvas'), ctx = c.getContext('2d');\nconst pts = Array.from({length:60}, () => ({\n x: Math.random()*c.width, y: Math.random()*c.height,\n vx: (Math.random()-.5)*.5, vy: (Math.random()-.5)*.5 }));\n(function tick(){\n ctx.clearRect(0,0,c.width,c.height); ctx.fillStyle = '#4fe3c1';\n for (const p of pts){\n p.x += p.vx; p.y += p.vy;\n ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI*2); ctx.fill();\n }\n requestAnimationFrame(tick);\n})();", "tags": [ "Canvas", "JavaScript", "背景", "パーティクル", "先進的", "漂う", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n slow drift · low density\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-raf-loop", "cursor-spotlight", "parallax-background", "canvas-ctx-filter" ] }, { "id": "starfield", "num": "W-131", "name": "Starfield", "nameJa": "星空背景", "category": "background", "description": "小さな円やbox-shadowの点を多数散らし、opacityをランダムに明滅させて瞬く星空を表現する背景。box-shadowの多重指定だけで軽量に実装できる。", "useCase": "ダークテーマのLPや夜・宇宙をテーマにしたセクションの背景で、静かで幻想的な雰囲気を出したいときに使う。", "code": ".stars-bg { position: relative; background: #101830; overflow: hidden; }\n.stars-bg::before {\n content: \"\";\n position: absolute; top: 0; left: 0;\n width: 2px; height: 2px; border-radius: 50%;\n background: transparent;\n box-shadow:\n 20px 30px #e8eef9, 80px 10px #e8eef9, 140px 60px #e8eef9,\n 200px 20px #e8eef9, 40px 100px #e8eef9, 180px 110px #e8eef9;\n animation: twinkle 2.5s ease-in-out infinite alternate;\n}\n@keyframes twinkle { from { opacity:.4 } to { opacity:1 } }", "tags": [ "CSS", "box-shadow", "背景", "星空", "幻想的", "静か", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "aurora-background", "lava-blob", "cursor-spotlight", "ken-burns" ] }, { "id": "cursor-spotlight", "num": "W-132", "name": "Cursor Spotlight", "nameJa": "カーソル追従スポットライト", "category": "background", "description": "mousemoveでカーソル座標を取得しCSS変数に反映、radial-gradientの中心をその変数に紐づけてカーソル周りだけ明るく照らす背景演出。", "useCase": "プロダクト紹介LPのカード群やダークUIで、操作している場所に視線を誘導したいときに使う。", "code": "el.addEventListener('mousemove', e => {\n el.style.setProperty('--x', e.offsetX + 'px');\n el.style.setProperty('--y', e.offsetY + 'px');\n});\n/* CSS */\n.spotlight {\n background: radial-gradient(240px circle at var(--x,50%) var(--y,50%),\n rgba(79,227,193,.25), transparent 70%), #101830;\n}", "tags": [ "CSS", "JavaScript", "カーソル", "背景", "インタラクティブ", "目を引く", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "parallax-background", "horizontal-scroll-section", "custom-cursor", "laser-pointer-cursor" ] }, { "id": "video-background", "num": "W-133", "name": "Video Background", "nameJa": "動画背景", "category": "background", "description": "video要素にautoplay muted loop playsinlineを指定し、object-fit: coverでセクション全面に敷き詰めて実写やCGの動きをそのまま背景にする手法。", "useCase": "ブランドムービーの世界観をそのまま伝えたいファーストビューや、採用LPの雰囲気づくりに使う。", "code": "\n", "tags": [ "HTML", "video", "背景", "実写", "没入感", "ダイナミック", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "aurora-background", "parallax-background", "parallax-scroll", "command-palette" ] }, { "id": "outline-text-bg", "num": "W-134", "name": "Giant Outline Text Background", "nameJa": "巨大アウトライン文字の背景", "category": "background", "description": "fill: transparentと-webkit-text-strokeで縁取りだけの超大型文字を背面に配置し、装飾として薄く見せるレイアウト手法。", "useCase": "スライドやLPのセクション見出し背後に、ブランドワードを大きく薄く敷いて世界観を強調したいときに使う。", "code": ".outline-bg {\n position: absolute; inset: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 12rem; font-weight: 800;\n color: transparent;\n -webkit-text-stroke: 2px rgba(232,238,249,.15);\n pointer-events: none; z-index: 0;\n}", "tags": [ "CSS", "タイポグラフィ", "背景", "装飾", "さりげない", "高級感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n AI\n Section Title\n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "mesh-gradient", "text-extrude", "custom-scrollbar", "text-image-mask" ] }, { "id": "ken-burns", "num": "W-135", "name": "Ken Burns Effect", "nameJa": "ケンバーンズ効果", "category": "background", "description": "静止画をtransform: scale()で数秒から数十秒かけてゆっくり拡大・移動させ、動画のような臨場感を静止画だけで生み出す演出。", "useCase": "写真1枚しかないヒーロー背景やスライドショーの各カットで、静止感をなくしたいときに使う。", "code": ".ken-burns { position: relative; overflow: hidden; }\n.ken-burns::before {\n content: \"\";\n position: absolute; inset: -8%;\n background-image: url(photo.jpg);\n background-size: cover;\n animation: kb 20s ease-in-out infinite alternate;\n}\n@keyframes kb {\n from { transform: scale(1) translate(0,0); }\n to { transform: scale(1.15) translate(-2%,-2%); }\n}", "tags": [ "CSS", "写真", "背景", "ズーム", "臨場感", "ゆったり", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "aurora-background", "lava-blob", "starfield", "cursor-spotlight" ] }, { "id": "scrim-overlay", "num": "W-136", "name": "Scrim Overlay", "nameJa": "暗幕スクリム", "category": "background", "description": "画像や動画の上に黒から透明へのlinear-gradientを重ねて下部や全体を暗くし、白文字の可読性を確保するオーバーレイ手法。", "useCase": "写真・動画背景の上にテキストを乗せるヒーローセクションで、コントラストを確保して読みやすくしたいときに使う。", "code": ".scrim { position: relative; }\n.scrim::after {\n content: \"\";\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%);\n}", "tags": [ "CSS", "グラデーション", "背景", "可読性", "オーバーレイ", "落ち着き", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n Headline\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "gradient-animation", "mesh-gradient", "dot-grid-pattern", "outline-text-bg" ] }, { "id": "floating-shapes", "num": "W-137", "name": "Floating Geometric Shapes", "nameJa": "浮遊する幾何学図形", "category": "background", "description": "円・三角形・多角形などをposition: absoluteで散らし、それぞれ異なる周期のtransform: translateYアニメーションでゆっくり上下浮遊させる背景装飾。", "useCase": "SaaSやスタートアップ系LPの余白で、単色背景に軽やかな動きと現代感を足したいときに使う。", "code": ".shape {\n position: absolute;\n animation: floaty 6s ease-in-out infinite;\n}\n.shape:nth-child(2) { animation-duration: 8s; animation-delay: -2s; }\n@keyframes floaty {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(8deg); }\n}", "tags": [ "CSS", "図形", "背景", "浮遊", "ふわふわ", "軽やか", "装飾" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "outline-text-bg", "css-shape-function", "gradient-animation", "aurora-background" ] }, { "id": "crt-scanlines", "num": "W-138", "name": "CRT Scanlines", "nameJa": "走査線・レトロCRT風", "category": "background", "description": "repeating-linear-gradientで水平の走査線を重ね、上から下へ流れる光の帯やわずかな歪みを添えてブラウン管モニターの質感を再現する背景。", "useCase": "レトロゲーム風・8bit風の演出やノスタルジックなブランド表現をしたいセクションの背景に使う。", "code": ".crt { position: relative; background: #101830; }\n.crt::before {\n content: \"\";\n position: absolute; inset: 0;\n background: repeating-linear-gradient(\n to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px\n );\n animation: scan 6s linear infinite;\n}\n@keyframes scan { from { background-position: 0 0 } to { background-position: 0 12px } }", "tags": [ "CSS", "走査線", "背景", "レトロ", "ノスタルジック", "チープ感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "mesh-gradient", "flowing-stripes", "cursor-spotlight", "outline-text-bg" ] }, { "id": "parallax-background", "num": "W-139", "name": "Parallax Scrolling Background", "nameJa": "パララックス背景", "category": "background", "description": "background-attachment: fixedや複数レイヤーのtransform: translateYをスクロール量に応じて異なる速度で動かし、奥行きのある立体的なスクロール演出を作る。", "useCase": "ストーリー性のあるLPや長尺スクロールページで、奥の背景と手前のコンテンツに視差をつけて没入感を出したいときに使う。", "code": ".parallax-bg {\n background-image: url(bg.jpg);\n background-attachment: fixed;\n background-position: center;\n background-size: cover;\n}\n/* JS: 手前のレイヤーだけ速く動かす */\nwindow.addEventListener('scroll', () => {\n layer.style.transform = `translateY(${scrollY * 0.3}px)`;\n});", "tags": [ "CSS", "JavaScript", "スクロール", "背景", "奥行き", "没入感", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "parallax-scroll", "horizontal-scroll-section", "cursor-spotlight", "scrollytelling" ] }, { "id": "wave-divider-bg", "num": "W-140", "name": "Wave Divider", "nameJa": "波形ディバイダー", "category": "background", "description": "SVGの波形pathをセクション境界に敷き、CSSのd属性アニメーションやSMILでtranslateXやdをゆらすことで水面のように揺らぐ区切りを作る。", "useCase": "LPのセクション間の直線的な境目をなくし、柔らかく自然な区切りにしたいときに使う。", "code": "\n \n\n", "tags": [ "SVG", "CSS", "波形", "背景", "区切り", "やわらか", "ぬるっと" ], "support": "広く対応", "svg": "\n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "lava-blob", "gradient-animation", "aurora-background", "mesh-gradient" ] }, { "id": "number-count-up", "num": "W-141", "name": "Count-Up Number", "nameJa": "数字カウントアップ", "category": "component", "description": "0や小さい値から目標値へ数字が滑らかに増えていく演出。requestAnimationFrameで毎フレーム計算するか、CSSの@propertyで数値型カスタムプロパティを定義しtransitionさせて実装する。", "useCase": "LPの導入社数・売上・満足度などの実績数値や、ダッシュボードのKPIカードを表示時に印象づけたい場面で使う。", "code": "@property --num{syntax:'';initial-value:0;inherits:false}\n.count{transition:--num 1.6s ease-out;counter-reset:num var(--num)}\n.count::after{content:counter(num)}\n.count.in-view{--num:1280}", "tags": [ "CSS", "@property", "カウンター", "数値", "説得力", "ワクワク", "LP", "ダッシュボード" ], "support": "広く対応", "svg": "\n \n \n \n 128\n 512\n 1,280\n 導入社数\n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "before-after-slider", "logo-marquee", "pricing-card-hover-lift", "property-custom-animate" ] }, { "id": "circular-progress", "num": "W-142", "name": "Circular Progress", "nameJa": "円形プログレス", "category": "component", "description": "円環が進捗率に応じてぐるっと塗り進むインジケーター。SVGのにstroke-dasharrayを設定し、stroke-dashoffsetの値をJSやCSSアニメーションで動かして表現する。", "useCase": "スキル達成率、アップロード進捗、ダッシュボードの完了率カードなど、割合をひと目で伝えたいときに使う。", "code": "\n \n \n", "tags": [ "SVG", "プログレス", "進捗", "ぐるっと", "達成感", "ダッシュボード" ], "support": "広く対応", "svg": "\n \n \n \n \n 82%\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "svg-sparkline", "checkmark-draw", "progress-ring", "svg-line-area-chart" ] }, { "id": "skeleton-shimmer", "num": "W-143", "name": "Skeleton Shimmer", "nameJa": "スケルトンスクリーンのシマー", "category": "component", "description": "コンテンツ読み込み中に灰色のブロックへ光の帯が斜めに流れる演出。linear-gradientの背景をbackground-position移動でアニメーションさせて実装する。", "useCase": "画像やカード情報のfetch待ちの間、読み込み中の体感時間をさりげなく短く見せたいリストやカードUIで使う。", "code": ".skel{background:linear-gradient(100deg,#e2e8f0 30%,#f8fafc 50%,#e2e8f0 70%);\n background-size:200% 100%;animation:shimmer 1.4s linear infinite}\n@keyframes shimmer{to{background-position:-200% 0}}", "tags": [ "CSS", "ローディング", "グラデーション", "さりげない", "待機体感", "カード" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "loading-spinner", "hover-lift-card", "line-clamp", "mask-gradient-fade" ] }, { "id": "toast-notification", "num": "W-144", "name": "Toast Notification", "nameJa": "トースト通知", "category": "component", "description": "画面端にパッと現れて数秒だけ静止し、すっと消える短い通知バー。position:fixedで配置し、@keyframesでtranslateYとopacityを操作して出現から消失までを一続きに演出する。", "useCase": "保存完了・エラー・カート追加などの結果を、ユーザーの操作を止めずに一瞬で伝えたいときに使う。", "code": ".toast{position:fixed;right:16px;bottom:16px;animation:toast-in .3s ease-out,\n toast-out .3s ease-in 2.7s forwards}\n@keyframes toast-in{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n@keyframes toast-out{to{transform:translateY(20px);opacity:0}}", "tags": [ "CSS", "通知", "アニメーション", "パッと切替", "フィードバック", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n 保存しました\n \n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "ripple-effect", "skeleton-shimmer", "back-to-top", "text-emphasis-dots" ] }, { "id": "logo-marquee", "num": "W-145", "name": "Logo Marquee", "nameJa": "ロゴが流れるマーキー", "category": "component", "description": "導入企業ロゴなどが途切れず横に流れ続ける帯。同じロゴ列を複製して並べ、translateXを列の幅ぶんだけループさせることで継ぎ目を隠す。", "useCase": "LPの「導入実績」「提携企業」セクションで、ロゴを並べるだけより信頼感を強く演出したいときに使う。", "code": ".marquee{display:flex;width:max-content;animation:marquee 18s linear infinite}\n.marquee-track{display:flex;gap:48px}\n@keyframes marquee{to{transform:translateX(-50%)}}\n/* .marquee-track を2セット複製して並べる */", "tags": [ "CSS", "マーキー", "ロゴ", "無限ループ", "信頼感", "流れる", "LP" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp" ], "weight": "脇役", "relatedIds": [ "timeline", "pricing-card-hover-lift", "hover-pause", "number-count-up" ] }, { "id": "tab-switch", "num": "W-146", "name": "Tabs", "nameJa": "タブ切替", "category": "component", "description": "複数のパネルを1つの表示領域でパッと切り替えるUI。タブのaria-selectedとパネルのhidden属性を同期し、下線インジケーターをtransformで滑らせる。", "useCase": "料金プランの月額/年額切替や、製品仕様・レビューなど複数情報を同じ枠内で見せたいセクションで使う。", "code": "
\n \n \n
\n
...
\n", "tags": [ "HTML", "タブ", "ARIA", "パッと切替", "ナビゲーション", "分かりやすさ" ], "support": "広く対応", "svg": "\n \n \n 概要\n 仕様\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "lightbox-dialog", "popover-api", "dialog-modal", "target-css-toggle" ] }, { "id": "faq-accordion", "num": "W-147", "name": "Accordion", "nameJa": "FAQアコーディオン", "category": "component", "description": "質問行をクリックすると回答欄がにゅっと滑らかに開閉するUI。grid-template-rowsを0frから1frへtransitionさせる手法で、高さautoでも滑らかにアニメーションできる。", "useCase": "FAQページや料金表の補足説明など、初期は畳んでおき必要な人だけ展開させたい場面で使う。", "code": ".acc-item{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}\n.acc-item.open{grid-template-rows:1fr}\n.acc-item > .acc-body{overflow:hidden}", "tags": [ "CSS", "Grid", "アコーディオン", "開閉", "にゅっと", "FAQ", "省スペース" ], "support": "広く対応", "svg": "\n \n \n \n 送料はいくらですか？\n \n \n \n 全国一律550円、1万円\n 以上のご注文で送料無料\n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "details-content", "reading-flow", "interpolate-size", "field-sizing" ] }, { "id": "before-after-slider", "num": "W-148", "name": "Before/After Comparison Slider", "nameJa": "ビフォーアフター比較スライダー", "category": "component", "description": "2枚の画像を1本のハンドルで左右にぬるっと見比べるUI。input[type=range]の値を使いclip-pathやwidthで上側画像の表示範囲をリアルタイムに制御する。", "useCase": "施術・リフォーム・写真編集など、変化を1枚の見た目で説得力高く見せたい実績紹介ページで使う。", "code": "
\n \n \n \n
", "tags": [ "CSS", "clip-path", "比較", "スライダー", "ぬるっと", "説得力" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "clip-path-shapes", "carousel-scroll-snap", "star-rating", "css-shape-function" ] }, { "id": "pricing-card-hover-lift", "num": "W-149", "name": "Card Hover Lift", "nameJa": "料金カードのホバーリフト", "category": "component", "description": "カードにカーソルを乗せるとふわっと浮き上がり、影が濃く広がる。transformのtranslateYとbox-shadowを同時にtransitionさせ、軽さと高級感を両立させる。", "useCase": "料金プラン・サービスカード一覧で、注目させたい選択肢を操作前から気持ちよく感じさせたいときに使う。", "code": ".price-card{transition:transform .2s ease,box-shadow .2s ease}\n.price-card:hover{transform:translateY(-8px);\n box-shadow:0 16px 32px rgba(0,0,0,.18)}", "tags": [ "CSS", "ホバー", "カード", "ふわっと", "浮遊感", "高級感", "LP" ], "support": "広く対応", "svg": "\n \n \n \n \n \n Pro\n ¥1,980\n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "card-flip", "hover-lift-card", "blur-reveal-text", "variable-font-weight" ] }, { "id": "timeline", "num": "W-150", "name": "Timeline", "nameJa": "タイムライン", "category": "component", "description": "縦（または横）の線上にドットを並べ、各ドットから出来事を配置する構成。線はborder-left、ドットは::beforeの円で表現し、スクロール連動で順に強調してもよい。", "useCase": "会社沿革、開発ロードマップ、導入までのステップなど時系列の流れを一望させたいセクションで使う。", "code": ".tl{border-left:2px solid #cbd5e1;margin-left:12px}\n.tl-item{position:relative;padding:12px 0 12px 20px}\n.tl-item::before{content:\"\";position:absolute;left:-7px;top:16px;\n width:12px;height:12px;border-radius:50%;background:#4fe3c1}", "tags": [ "CSS", "タイムライン", "縦線", "沿革", "分かりやすさ", "流れる" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "stepper", "star-rating", "logo-marquee", "field-sizing" ] }, { "id": "stepper", "num": "W-151", "name": "Stepper", "nameJa": "ステッパー", "category": "component", "description": "「1→2→3」のように現在位置を丸数字と接続線で示すナビゲーション。完了ステップは塗り、現在地は強調色、未到達はグレーにして差をつける。", "useCase": "フォーム入力・購入手続き・申込フローなど複数画面をまたぐ手続きで、残りの工程数を可視化したいときに使う。", "code": "
    \n
  1. 1
  2. 2
  3. 3
    4. \n
\n", "tags": [ "CSS", "ステップ", "フォーム", "進行状況", "分かりやすさ", "達成感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n 1\n 2\n 3\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "field-sizing", "timeline", "star-rating", "customizable-select" ] }, { "id": "carousel-scroll-snap", "num": "W-152", "name": "Scroll-Snap Carousel", "nameJa": "カルーセル（scroll-snap製）", "category": "component", "description": "JS不要でスクロールが各カードにピタッと止まるカルーセル。親要素にoverflow-x:autoとscroll-snap-type:x mandatory、子要素にscroll-snap-align:centerを指定する。", "useCase": "商品一覧・お客様の声・実績写真をスワイプや横スクロールで1枚ずつ気持ちよく見せたいときに使う。", "code": ".carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px}\n.carousel > *{scroll-snap-align:center;flex:0 0 80%}", "tags": [ "CSS", "スクロール", "カルーセル", "吸着", "ぬるっと", "気持ちいい" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "scroll-snap", "smooth-scroll", "scroll-driven-animation", "scroll-text-highlight" ] }, { "id": "lightbox-dialog", "num": "W-153", "name": "Lightbox (native )", "nameJa": "ライトボックス（dialog製）", "category": "component", "description": "画像やコンテンツをクリックするとパッと画面中央にモーダル表示するUI。ネイティブの要素とshowModal()を使い、背景は::backdropで暗転させる。", "useCase": "ギャラリーの拡大表示や、フォーム・注意事項をページ遷移せずJS最小限で見せたいときに使う。", "code": "\n\ndialog::backdrop{background:rgba(0,0,0,.6)}\ndialog{border:none;border-radius:12px;animation:lb-in .2s ease}\n@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}", "tags": [ "HTML", "dialog", "モーダル", "ギャラリー", "パッと切替", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "lightbox-gallery", "dialog-closedby", "dialog-modal", "command-palette" ] }, { "id": "star-rating", "num": "W-154", "name": "Star Rating", "nameJa": "星評価", "category": "component", "description": "星アイコンを評価分だけじわっと塗りつぶして表示するUI。灰色の星の上に色つきの星をclip-pathで重ね、幅を評価値に応じて変えて部分塗りを再現する。", "useCase": "レビュー・口コミの評価表示や、フォームでユーザーに星をつけて評価してもらう入力UIで使う。", "code": ".stars{--rating:3.5;--stars:5;position:relative;display:inline-block;color:#cbd5e1}\n.stars::after{content:'★★★★★';position:absolute;inset:0;color:#ffc857;\n clip-path:inset(0 calc(100% - (var(--rating)/var(--stars)*100%)) 0 0)}", "tags": [ "CSS", "評価", "clip-path", "レビュー", "分かりやすさ", "じわっと" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n ★★★★★\n ★★★★★\n \n 4.2 / 5\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "image-clip-reveal", "before-after-slider", "timeline", "stepper" ] }, { "id": "flip-clock-countdown", "num": "W-155", "name": "Flip Clock Countdown", "nameJa": "フリップ時計カウントダウン", "category": "component", "description": "数字カードがぱたんと上下に割れてめくれ、次の数字に切り替わるカウントダウン表示。2枚の半分カードにtransform: rotateXを適用し、境目で数字を切り替える。", "useCase": "セール終了・イベント開始までの残り時間を、LPやキャンペーンページで緊張感をもって見せたいときに使う。", "code": ".flip-card{perspective:200px}\n.flip-top{transform-origin:bottom;animation:flip .6s ease-in forwards}\n@keyframes flip{to{transform:rotateX(-90deg)}}", "tags": [ "CSS", "3D変形", "カウントダウン", "フリップ", "パッと切替", "緊張感", "キャンペーン" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n 5\n 4\n \n \n 5\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "toast-notification", "ripple-effect", "target-css-toggle", "card-flip" ] }, { "id": "cta-pulse-button", "num": "W-156", "name": "Pulsing CTA Button", "nameJa": "CTAボタンの脈動", "category": "component", "description": "ボタンの外側にリング状の影がじわっと拡大しながら透明になるのを繰り返し、心臓の鼓動のように視線を引きつける。box-shadowか擬似要素のscaleをkeyframesでループさせる。", "useCase": "申込・購入・予約など「今すぐ押してほしい」最重要ボタンを、他の要素より目立たせたいときに使う。", "code": ".cta{position:relative;animation:pulse 1.8s ease-out infinite}\n@keyframes pulse{\n 0%{box-shadow:0 0 0 0 rgba(79,227,193,.5)}\n 100%{box-shadow:0 0 0 20px rgba(79,227,193,0)}\n}", "tags": [ "CSS", "ボタン", "CTA", "目を引く", "ダイナミック", "脈動" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n 今すぐ申込む\n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "text-stroke-outline", "neon-glow-text", "blend-difference-text", "keyframes-multistep" ] }, { "id": "back-to-top", "num": "W-157", "name": "Back to Top Button", "nameJa": "戻るトップボタン", "category": "component", "description": "一定量スクロールすると画面右下にすっと現れ、クリックでページ最上部へ滑らかに戻る丸ボタン。表示はscroll判定でopacity切替、移動はscroll-behavior:smoothで実現する。", "useCase": "長い記事・LPを読み終えたユーザーが迷わず最初に戻れるようにしたい、縦に長いページで使う。", "code": ".back-top{position:fixed;right:20px;bottom:20px;opacity:0;\n transition:opacity .25s ease}\n.back-top.show{opacity:1}\nhtml{scroll-behavior:smooth}\nconst btn=document.querySelector('.back-top');\naddEventListener('scroll',()=>btn.classList.toggle('show',scrollY>400));", "tags": [ "CSS", "スクロール", "ボタン", "導線", "さりげない", "すっきり" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "sticky-position", "sticky-header-shrink", "overscroll-behavior", "scroll-margin-padding" ] }, { "id": "loading-spinner", "num": "W-158", "name": "Loading Spinner", "nameJa": "ローディングスピナー各種", "category": "component", "description": "読み込み待ちをぐるぐる回転や明滅で示すインジケーター群。円弧の一部だけ色を変えてrotateさせる定番タイプから、ドットが順番に明滅するタイプまで実装パターンがある。", "useCase": "ボタン押下後の通信待ちや、ページ全体のローディング画面など、待ち時間の長さが読めない場面で使う。", "code": ".spinner{width:32px;height:32px;border:4px solid #e2e8f0;\n border-top-color:#4fe3c1;border-radius:50%;\n animation:spin .8s linear infinite}\n@keyframes spin{to{transform:rotate(360deg)}}", "tags": [ "CSS", "ローディング", "回転", "定番", "待機体感", "ぐるっと" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "skeleton-shimmer", "smooth-scroll", "cube-3d", "ring-gallery" ] }, { "id": "stroke-draw", "num": "W-159", "name": "Line Drawing Animation", "nameJa": "線画が描かれる", "category": "svgfx", "description": "パスがまるで手描きされるように少しずつ現れる表現。stroke-dasharrayでパス全長分の破線を作り、stroke-dashoffsetを長さ分から0までアニメーションさせて描画過程を再現する。", "useCase": "ロゴやアイコンの登場演出、LPのプロセス図や矢印の強調、スライドの図解アニメに使う。", "code": ".sdraw-line{\n stroke-dasharray: 240;\n stroke-dashoffset: 240;\n animation: sdraw-go 2.4s ease-in-out infinite;\n}\n@keyframes sdraw-go{\n 0%{stroke-dashoffset:240}\n 55%,70%{stroke-dashoffset:0}\n 100%{stroke-dashoffset:-240}\n}", "tags": [ "SVG", "ストローク", "線画", "描画アニメ", "ロゴ", "手描き感", "じわじわ" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "svg-pathlength-normalize", "svg-vector-effect-stroke", "checkmark-draw", "progress-ring" ] }, { "id": "path-morph", "num": "W-160", "name": "Path Morphing", "nameJa": "パスモーフィング", "category": "svgfx", "description": "図形の輪郭(d属性)を別の形へなめらかに変形させる表現。SMILので頂点数と命令の並びを揃えた複数のパスデータ間を補間する。", "useCase": "アイコンが別アイコンへ切り替わる演出、ボタンの状態変化、抽象図形の背景アクセントに使う。", "code": "\n \n", "tags": [ "SVG", "SMIL", "モーフィング", "アイコン切替", "変形", "ぬるっと", "有機的" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "blob-morph", "smil-animate-basic", "smil-animatetransform", "smil-animatemotion-mpath" ] }, { "id": "goo-effect", "num": "W-161", "name": "Goo / Metaball Effect", "nameJa": "グーイー効果（メタボール）", "category": "svgfx", "description": "複数の図形が近づくと融合して見える液状の表現。feGaussianBlurでぼかした後、feColorMatrixのアルファ値を強調して輪郭を再びシャープにし一体化させる。", "useCase": "ボタンホバーの吸着演出、ローディングインジケーター、有機的なブロブ背景のアクセントに使う。", "code": "\n \n \n \n\n…circles…", "tags": [ "SVG", "フィルター", "メタボール", "液体感", "ホバー", "ぬるっと", "一体感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "displacement-map", "drop-shadow-filter", "fe-colormatrix-huerotate", "fe-componenttransfer-posterize" ] }, { "id": "turbulence-wobble", "num": "W-162", "name": "Turbulence Wobble", "nameJa": "ノイズのゆらぎ（feTurbulence）", "category": "svgfx", "description": "輪郭や塗りがゆらゆら揺れる有機的なノイズ表現。feTurbulenceでフラクタルノイズを生成し、baseFrequencyをアニメーションさせて連続的な揺らぎを作る。", "useCase": "水面や炎のような背景演出、見出し文字の揺らぎ、エネルギー感のあるローディング表現に使う。", "code": "\n \n \n \n \n", "tags": [ "SVG", "フィルター", "ノイズ", "ゆらぎ", "水面", "ダイナミック", "有機的" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "slide" ], "weight": "主役", "relatedIds": [ "displacement-map", "fe-colormatrix-huerotate", "fe-componenttransfer-posterize", "fe-morphology-outline" ] }, { "id": "displacement-map", "num": "W-163", "name": "Displacement Map", "nameJa": "変位マップ（feDisplacementMap）", "category": "svgfx", "description": "別レイヤーの明暗を歪みの強さに変換し、元図形を波打たせる表現。feDisplacementMapのinとin2にソースとマップを指定し、scaleの値で歪みの強度を変化させる。", "useCase": "見出しの液体感演出、ガラス越しのような屈折表現、画像やロゴの溶けるトランジションに使う。", "code": "\n \n \n \n \n", "tags": [ "SVG", "フィルター", "歪み", "変位", "ダイナミック", "液体感", "目を引く" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "slide" ], "weight": "主役", "relatedIds": [ "goo-effect", "turbulence-wobble", "fe-colormatrix-huerotate", "fe-componenttransfer-posterize" ] }, { "id": "text-on-path", "num": "W-164", "name": "Text on Path", "nameJa": "パスに沿う文字", "category": "svgfx", "description": "文字列を直線ではなく任意の曲線に沿って配置し流す表現。でパスを参照し、startOffsetをアニメーションさせて文字を巡回させる。", "useCase": "円形バッジのロゴ文言、装飾的な見出し、スクロール誘導ラベルの演出に使う。", "code": "\n\n \n \n SCROLL DOWN • SCROLL DOWN •\n \n", "tags": [ "SVG", "テキスト", "パス装飾", "循環", "バッジ", "さりげない", "目を引く" ], "support": "広く対応", "svg": "SCROLL • FOLLOW THE PATH •textPath + startOffset", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "animated-favicon", "svg-text-mask", "svg-paint-order-outline", "displacement-map" ] }, { "id": "mask-reveal", "num": "W-165", "name": "Mask Reveal", "nameJa": "マスクによるリビール", "category": "svgfx", "description": "maskで隠した要素を徐々に見せる表現。内の白い図形やグラデーションを動かし、見える範囲が広がることで画像や見出しが現れて見える。", "useCase": "画像や見出しの登場演出、スクロール連動の切り替え、ビフォーアフター表現に使う。", "code": "\n \n \n \n\n…contents…", "tags": [ "SVG", "マスク", "リビール", "登場演出", "スクロール連動", "じわっと", "高級感" ], "support": "広く対応", "svg": "REVEAL", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-clip-path", "svg-mask-type", "gradient-animate", "drop-shadow-filter" ] }, { "id": "gradient-animate", "num": "W-166", "name": "Animated Gradient", "nameJa": "グラデーションアニメーション", "category": "svgfx", "description": "linearGradient内のstop-colorや位置を動かし、塗りの色や角度が滑らかに移り変わる表現。各にCSSアニメーションを適用してstop-colorを時間差で変化させる。", "useCase": "ボタンやバッジ背景の高級感演出、見出しのアクセント帯、ローディングバーの質感づけに使う。", "code": "\n \n \n\n", "tags": [ "SVG", "グラデーション", "色アニメ", "背景", "ボタン", "高級感", "なめらか" ], "support": "広く対応", "svg": "3 color stops stay visible", "useFor": [ "lp", "slide" ], "weight": "脇役", "relatedIds": [ "gradient-animation", "mesh-gradient", "grain-noise", "svg-spreadmethod" ] }, { "id": "checkmark-draw", "num": "W-167", "name": "Checkmark Draw-in", "nameJa": "チェックマークが描かれる", "category": "svgfx", "description": "レ点やチェックアイコンが1本の線として描かれ、丸で囲われて完了を示す表現。円とチェックのパスそれぞれにstroke-dasharray/dashoffsetを設定し時間差でアニメーションさせる。", "useCase": "フォーム送信完了、タスク完了、料金プラン比較表のチェック項目強調に使う。", "code": ".circle{stroke-dasharray:170;stroke-dashoffset:170;\n animation:c 2.6s ease-in-out infinite}\n.check{stroke-dasharray:60;stroke-dashoffset:60;\n animation:k 2.6s ease-in-out infinite}\n@keyframes c{0%{stroke-dashoffset:170}40%,100%{stroke-dashoffset:0}}\n@keyframes k{0%,45%{stroke-dashoffset:60}70%,100%{stroke-dashoffset:0}}", "tags": [ "SVG", "ストローク", "チェック", "完了演出", "フォーム", "パッと切替", "達成感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-vector-effect-stroke", "stroke-draw", "progress-ring", "circular-progress" ] }, { "id": "progress-ring", "num": "W-168", "name": "Circular Progress Ring", "nameJa": "円形プログレスリング", "category": "svgfx", "description": "円周に沿ったストロークが割合分だけ伸びる進捗表現。stroke-dasharrayを円周長(2πr)に固定し、stroke-dashoffsetを目標値まで動かして進み具合を表す。", "useCase": "ローディング表示、スキルレベルやKPIの割合表示、アップロード進捗のUIに使う。", "code": ".ring{\n stroke-dasharray: 220; /* 2*PI*r */\n stroke-dashoffset: 220;\n transform: rotate(-90deg);\n transform-origin: center;\n animation: fill 2s ease-in-out forwards;\n}\n@keyframes fill{ to{ stroke-dashoffset: 53 } }", "tags": [ "SVG", "プログレス", "ストローク", "ローディング", "KPI表示", "さりげない", "期待感" ], "support": "広く対応", "svg": "76%", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-vector-effect-stroke", "stroke-draw", "text-on-path", "checkmark-draw" ] }, { "id": "blob-morph", "num": "W-169", "name": "Blob Morph", "nameJa": "ブロブモーフィング", "category": "svgfx", "description": "有機的な不定形の塊が呼吸するように輪郭を変え続ける表現。同じ命令数で揃えた複数のパス形状をSMILので行き来させる。", "useCase": "LPやスライドの背景装飾、アイコンの台座、セクション区切りのアクセント図形に使う。", "code": "\n \n", "tags": [ "SVG", "モーフィング", "ブロブ", "背景装飾", "アイコン台座", "ぬるっと", "没入感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "slide" ], "weight": "主役", "relatedIds": [ "path-morph", "lava-blob", "goo-effect", "viewbox-camera" ] }, { "id": "symbol-sprite", "num": "W-170", "name": "Symbol + Use Sprite", "nameJa": "symbol+useのアイコンスプライト", "category": "svgfx", "description": "で図形を一度だけ定義し、複数ので使い回して差し替え・一括色変更を可能にする実装パターン。呼び出し側でx/y/widthや色だけを変えて再利用する。", "useCase": "アイコンセットの統一管理、ダークモード切替時の一括色変更、ページ読み込みの軽量化に使う。", "code": "\n \n\n\n", "tags": [ "SVG", "アイコン", "スプライト", "再利用", "実装効率", "統一感", "整然とした" ], "support": "広く対応", "svg": "one symbol → three uses", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "svg-paint-order-outline", "fe-colormatrix-huerotate", "fe-componenttransfer-posterize", "fe-morphology-outline" ] }, { "id": "svg-pattern-bg", "num": "W-171", "name": "SVG Pattern Background", "nameJa": "SVGパターン背景", "category": "svgfx", "description": "要素で小さな図形タイルを定義し、fill=\"url(#id)\"で敷き詰めて背景を作る表現。patternTransformをアニメーションさせるとタイルが流れる背景になる。", "useCase": "セクション背景のテクスチャ、ドットやグリッドの装飾背景、ヒーローエリアの奥行き演出に使う。", "code": "\n \n \n\n", "tags": [ "SVG", "パターン", "背景テクスチャ", "反復", "ヒーロー", "さりげない", "奥行き感" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "fe-tile-pattern", "text-on-path", "progress-ring", "animated-favicon" ] }, { "id": "viewbox-camera", "num": "W-172", "name": "viewBox Camera Move", "nameJa": "viewBoxのカメラワーク", "category": "svgfx", "description": "SVGのviewBox値自体をアニメーションさせ、拡大・縮小やパンといったカメラが動くような視点変化を作る表現。でx/y/width/heightを遷移させる。", "useCase": "地図や図解のズームイン演出、インフォグラフィックの視点誘導、スライドの注目箇所ハイライトに使う。", "code": "\n \n …contents…\n", "tags": [ "SVG", "viewBox", "カメラワーク", "ズーム", "インフォグラフィック", "没入感", "ダイナミック" ], "support": "広く対応", "svg": "MAP VIEW", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "svg-vector-effect-stroke", "svg-preserveaspectratio", "turbulence-wobble", "displacement-map" ] }, { "id": "drop-shadow-filter", "num": "W-173", "name": "Drop Shadow Filter", "nameJa": "ドロップシャドウ（feDropShadow）", "category": "svgfx", "description": "要素に落ち影を付けて浮遊感や立体感を出す表現。feDropShadowでぼかし・オフセット・不透明度を指定し、ホバーやアニメーションで影の伸縮を変化させる。", "useCase": "カードやボタンのホバー時の浮遊演出、アイコンの立体感付与、ヒーロー画像の奥行き表現に使う。", "code": "\n \n\n\n", "tags": [ "SVG", "フィルター", "影", "立体感", "ホバー", "浮遊感", "高級感" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "goo-effect", "grain-noise", "pricing-card-hover-lift", "fe-colormatrix-huerotate" ] }, { "id": "animated-favicon", "num": "W-174", "name": "Animated Favicon", "nameJa": "アニメするファビコン", "category": "svgfx", "description": "SVGファビコン内のCSSやSMILでタブアイコンを動かす表現。ブラウザ・省電力状態・バックグラウンドタブによって停止または非対応になるため、通知の唯一の手段にはせず静止時にも意味が通る図柄にする。", "useCase": "処理中や新着を補助的に示す場面。常時点滅は注意を奪うため避け、短時間・低頻度にし、ページタイトル等にも同じ状態を示す。", "code": "\n\n \n \n \n\n", "tags": [ "SVG", "ファビコン", "タブ", "通知", "ブランディング", "さりげない", "目を引く" ], "support": "限定対応", "svg": "状態はタイトルにも表示tab icon · motion is optional", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-on-path", "displacement-map", "progress-ring", "svg-pattern-bg" ] }, { "id": "fullscreen-fit-scale", "num": "W-175", "name": "Fit-to-Screen Scaling", "nameJa": "画面フィット拡大縮小", "category": "slide", "description": "16:9固定キャンバスをtransform: scaleでビューポート全体にフィットさせ、余白（レターボックス）を発生させつつ比率を保つ手法。resizeイベントでscale値を再計算する。", "useCase": "プロジェクターや配信画面などアスペクト比が読めない環境で、スライドを常に16:9のまま破綻なく表示したいときに使う。", "code": ":root{--k:1}\n.fit-stage{width:1280px;height:720px;transform-origin:top left;\n transform:scale(var(--k))}\n", "tags": [ "CSS", "JavaScript", "スケーリング", "レスポンシブ", "16:9", "きっちり", "安定感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "aspect-ratio", "print-pdf-css", "css-custom-highlights", "css-shape-function" ] }, { "id": "scroll-snap-deck", "num": "W-176", "name": "Full-page Scroll Snap Deck", "nameJa": "縦フルページ scroll-snap デッキ", "category": "slide", "description": "縦に並べた各スライドをscroll-snap-type: y mandatoryで1画面ずつピタッと止める手法。子要素にscroll-snap-alignとheight:100vhを組み合わせる。", "useCase": "マウスホイールやスワイプだけでページ送りできる、プレゼン風の縦スクロールLPやスライドサイトを作りたいときに使う。", "code": ".snap-deck{\n height:100vh; overflow-y:scroll;\n scroll-snap-type:y mandatory;\n}\n.snap-deck > section{\n height:100vh;\n scroll-snap-align:start;\n}", "tags": [ "CSS", "スクロール", "デッキ", "フルページ", "ピタッと", "没入感", "ネイティブ実装" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "vertical-scroll-snap", "parallax-layers", "scroll-snap", "parallax-scroll" ] }, { "id": "arrow-key-nav", "num": "W-177", "name": "Arrow Key Navigation", "nameJa": "矢印キーでのページ送り", "category": "slide", "description": "keydownイベントで←→キーを監視し、現在スライドのインデックスを増減して表示を切り替えるJS実装。スペースやPageDown/Upも兼用させることが多い。", "useCase": "マウスに触れず登壇者がキーボードだけでスライドを進める、標準的なプレゼン操作を実装したいときに使う。", "code": "document.addEventListener('keydown', e => {\n if (e.key === 'ArrowRight' || e.key === ' ') goTo(idx + 1);\n if (e.key === 'ArrowLeft') goTo(idx - 1);\n});\nfunction goTo(i){\n idx = Math.max(0, Math.min(total - 1, i));\n slides[idx].scrollIntoView();\n}", "tags": [ "JavaScript", "キーボード", "ナビゲーション", "プレゼン操作", "キビキビ", "サクサク", "定番" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n →\n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "reading-progress-bar", "scroll-snap-events", "fullscreen-api", "smooth-scroll" ] }, { "id": "fragment-reveal", "num": "W-178", "name": "Fragment Step Reveal", "nameJa": "フラグメント段階表示", "category": "slide", "description": "箇条書きの各行に段階番号をふり、クリックやキー送りのたびに1行ずつopacityを切り替えて表示していく手法。data-step属性とクラス付与で制御する。", "useCase": "説明を要素ごとに小出しにしたい、聞き手の視線を1行ずつ誘導したいスライドの箇条書きパートに使う。", "code": ".frag{opacity:0; transition:opacity .3s}\n.frag.is-shown{opacity:1}\nnextBtn.onclick = () => {\n const next = document.querySelector('.frag:not(.is-shown)');\n if (next) next.classList.add('is-shown');\n};", "tags": [ "CSS", "JavaScript", "箇条書き", "段階表示", "ステップ", "じわっと", "小出し感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "主役", "relatedIds": [ "css-custom-highlights", "fullscreen-fit-scale", "view-transitions-slide", "overview-grid-zoom" ] }, { "id": "target-only-slide-switch", "num": "W-179", "name": ":target-only Slide Switching", "nameJa": ":targetだけでのスライド切替", "category": "slide", "description": "各スライドをid付きセクションにし、アンカーリンクとCSSの:target疑似クラスだけでdisplayを切り替える、JS不要のページ送り実装。", "useCase": "JSを一切使わず、軽量な単一HTMLだけで簡易スライドショーやLP内タブを作りたいときに使う。", "code": "section{display:none}\nsection:target{display:block}\n\n次へ\n
...
\n
...
", "tags": [ "CSS", "JS不要", "アンカー", "軽量", "カチッと", "割り切り" ], "support": "広く対応", "svg": "\n \n \n \n #slide-1\n \n #slide-2\n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "anchor-positioning", "target-css-toggle", "scroll-margin-padding", "has-selector" ] }, { "id": "url-hash-sync", "num": "W-180", "name": "URL Hash Sync", "nameJa": "URLハッシュとページ同期", "category": "slide", "description": "現在のスライド番号をlocation.hashへ都度書き込み、hashchangeイベントで逆にスライド位置を復元する双方向同期。リロードや共有URLで途中から開ける。", "useCase": "特定ページへ直接リンクしたい、リロードしても同じスライドに留まってほしい社内資料や配布用スライドに使う。", "code": "function setSlide(i){\n idx = i; render();\n history.replaceState(null, '', '#' + (i + 1));\n}\naddEventListener('hashchange', () => {\n const i = Number(location.hash.slice(1)) - 1;\n if (!Number.isNaN(i)) setSlide(i);\n});", "tags": [ "JavaScript", "URL", "共有", "状態保存", "さりげない", "安心感" ], "support": "広く対応", "svg": "\n \n \n \n deck.html\n #1\n #2\n #3\n \n 1\n 2\n 3\n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "image-fallback", "slide-progress-indicator", "presenter-notes-broadcast", "scroll-spy-nav" ] }, { "id": "slide-progress-indicator", "num": "W-181", "name": "Slide Progress Indicator", "nameJa": "スライド番号・プログレス表示", "category": "slide", "description": "「3 / 20」のような現在ページ番号表示と、画面端の細いバーをwidth: calc()で現在位置に応じて伸ばすプログレスバーを併用する定番UI。", "useCase": "聴衆に残り時間・残りページ感を伝えたい、長尺スライドの進行状況を常時可視化したいときに使う。", "code": ".progress{\n position:fixed; bottom:0; left:0; height:4px;\n background:var(--w-accent,#4fe3c1);\n width:calc(100% * var(--i) / var(--total));\n transition:width .3s;\n}\n{{i}} / {{total}}", "tags": [ "CSS", "UI", "進捗表示", "ページ番号", "さりげない", "安心感" ], "support": "広く対応", "svg": "\n \n \n \n 4 / 12\n \n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "sticky-position", "overscroll-behavior", "url-hash-sync", "text-emphasis-dots" ] }, { "id": "view-transitions-slide", "num": "W-182", "name": "View Transitions Page Change", "nameJa": "View Transitionsでのページ転換", "category": "slide", "description": "document.startViewTransition()でDOM更新を包み、前後のスナップショットをブラウザが自動でクロスフェード/モーフィングするAPI。view-transition-nameで要素単位の連続移動も指定できる。", "useCase": "スライド切替の瞬間にふわっとクロスフェードや要素の滑らかな移動を付けたい、映画的な転換を作りたいときに使う。", "code": "function go(next){\n if (!document.startViewTransition) return render(next);\n document.startViewTransition(() => render(next));\n}\n\n::view-transition-old(root),\n::view-transition-new(root){ animation-duration:.4s; }", "tags": [ "JavaScript", "CSS", "ページ転換", "クロスフェード", "ふわっと", "目を引く", "映画的" ], "support": "新しく普及中", "svg": "\n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "主役", "relatedIds": [ "scroll-reveal", "stagger-char-reveal", "laser-pointer-cursor", "starting-style" ] }, { "id": "presenter-notes-broadcast", "num": "W-183", "name": "Presenter Notes via BroadcastChannel", "nameJa": "発表者ノート（BroadcastChannel + window.open）", "category": "slide", "description": "window.open()で別ウィンドウを開き、BroadcastChannelでスライド番号・発表メモ・タイマーを親子ウィンドウ間にリアルタイム送信する2画面プレゼン構成。", "useCase": "登壇者用モニターにカンペとタイマーを出し、投影画面には本編スライドだけを映す2画面運用をしたいときに使う。", "code": "const ch = new BroadcastChannel('deck');\nwindow.open('notes.html', 'notes');\nch.postMessage({ idx, note: notes[idx], elapsed });\n\n// notes.html側\nnew BroadcastChannel('deck').onmessage = e => render(e.data);", "tags": [ "JavaScript", "2画面", "発表者ノート", "裏方", "こっそり", "安心感" ], "support": "広く対応", "svg": "\n \n \n \n 投影用\n \n ノート\n 05:12\n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "url-hash-sync", "image-fallback", "scroll-into-view-container", "element-scoped-view-transition" ] }, { "id": "autoplay-timer-advance", "num": "W-184", "name": "Timed Autoplay", "nameJa": "自動再生（タイマー送り）", "category": "slide", "description": "setIntervalなどを合図に、一定秒数ごとに自動でスライドインデックスを進めるタイマー駆動の自動再生。progress用の円形カウントダウンと組み合わせることが多い。", "useCase": "展示会サイネージや無人ブースでループ再生させたい、動画のように放置しても進行するスライドにしたいときに使う。", "code": "let idx = 0;\nsetInterval(() => {\n idx = (idx + 1) % slides.length;\n render(idx);\n}, 6000);", "tags": [ "JavaScript", "タイマー", "自動再生", "サイネージ", "淡々と", "一定リズム" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "scroll-into-view-container", "element-scoped-view-transition", "css-registerproperty-js", "css-typed-om" ] }, { "id": "overview-grid-zoom", "num": "W-185", "name": "Grid Overview Mode", "nameJa": "俯瞰モード（全体グリッド表示）", "category": "slide", "description": "全スライドをtransform: scale()で縮小しCSS Gridに並べて一覧できる俯瞰表示。クリックで該当スライドへズームインして戻る、PowerPointの「すべてのスライド」相当の機能。", "useCase": "発表中に構成を見失わないよう全体像を一瞬確認したい、目的のページへ素早くジャンプしたいときに使う。", "code": ".overview .deck{\n display:grid; grid-template-columns:repeat(4,1fr);\n gap:12px;\n}\n.overview section{\n transform:scale(.22);\n transform-origin:top left;\n transition:transform .3s;\n}", "tags": [ "CSS", "JavaScript", "一覧性", "俯瞰", "ズームアウト", "見渡せる", "すっきり" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "主役", "relatedIds": [ "slide-thumbnail-navigator", "css-custom-highlights", "text-spacing-trim", "font-feature-pwid" ] }, { "id": "print-pdf-css", "num": "W-186", "name": "Print-to-PDF Layout", "nameJa": "印刷PDF化（@page / print CSS）", "category": "slide", "description": "@media printと@pageルールでページサイズ・余白を指定し、1スライド=1ページで強制改ページするpage-break-after: alwaysを適用してブラウザの印刷機能でPDF化する。", "useCase": "配布資料やハンドアウトとして、URLではなくPDFで納品・共有したいときに使う。", "code": "@media print{\n @page{ size:1280px 720px; margin:0; }\n section{\n page-break-after:always;\n width:1280px; height:720px;\n }\n .no-print{ display:none; }\n}", "tags": [ "CSS", "印刷", "PDF化", "配布資料", "きっちり", "整然" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "fullscreen-fit-scale", "aspect-ratio", "subgrid", "holy-grail-layout" ] }, { "id": "fullscreen-api", "num": "W-187", "name": "Fullscreen API", "nameJa": "フルスクリーンAPI", "category": "slide", "description": "element.requestFullscreen()でブラウザChromeを消し画面全体をスライド専用にする。fullscreenchangeイベントでボタン表示やレイアウトを切り替える。", "useCase": "URLバーやタブを隠して本番同然の見た目でリハーサル・登壇したい、Escで即戻れる形にしたいときに使う。", "code": "toggleBtn.onclick = () => {\n if (!document.fullscreenElement) {\n deck.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n};", "tags": [ "JavaScript", "API", "全画面", "没入感", "本番感", "定番" ], "support": "広く対応", "svg": "\n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "arrow-key-nav", "view-transitions-spa", "copy-button", "web-share-api" ] }, { "id": "per-slide-background", "num": "W-188", "name": "Per-slide Background Switching", "nameJa": "スライドごとの背景切替", "category": "slide", "description": "各セクションにdata-theme属性やクラスを付け、background/CSS変数を差し替えて画面ごとに色・写真・グラデーションを変える手法。transitionで切替時になじませる。", "useCase": "章の切れ目を色で伝えたい、写真スライドと図解スライドで空気感を変えたいときに使う。", "code": "section[data-bg=\"dark\"]{ --bg:var(--w-bg,#101830); --ink:#fff; }\nsection[data-bg=\"light\"]{ --bg:#fff; --ink:#101830; }\nsection{\n background:var(--bg); color:var(--ink);\n transition:background .4s;\n}", "tags": [ "CSS", "背景", "テーマ切替", "章分け", "雰囲気", "メリハリ" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "parallax-scroll", "full-bleed-breakout", "gradient-animation", "aurora-background" ] }, { "id": "laser-pointer-cursor", "num": "W-189", "name": "Laser Pointer Cursor", "nameJa": "レーザーポインタ風カーソル", "category": "slide", "description": "mousemoveの座標を追従する小さな発光ドットをposition: fixedで表示し、box-shadowでにじませてレーザーポインタのように見せる演出。キー操作でON/OFFすることが多い。", "useCase": "画面共有やオンライン登壇で、話している箇所を指し示すレーザーポインタが手元に無いときの代替に使う。", "code": "const dot = document.querySelector('.laser');\naddEventListener('mousemove', e => {\n dot.style.left = e.clientX + 'px';\n dot.style.top = e.clientY + 'px';\n});\n\n.laser{\n position:fixed; width:12px; height:12px; border-radius:50%;\n background:var(--w-amber,#ffc857);\n box-shadow:0 0 12px 4px var(--w-amber,#ffc857);\n pointer-events:none;\n}", "tags": [ "JavaScript", "CSS", "カーソル", "指し示す", "発光", "目を引く", "ライブ感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "主役", "relatedIds": [ "custom-cursor", "cursor-spotlight", "view-transitions-slide", "neon-glow-text" ] }, { "id": "single-html-file-tips", "num": "W-190", "name": "Single-file HTML Deck", "nameJa": "単一HTMLファイル運用の勘所", "category": "slide", "description": "CSSはstyleタグ、JSはscriptタグ、アイコンはインラインSVGで1ファイルに全部同梱し、外部依存なしでダブルクリックやメール添付だけで動く形に閉じる設計方針。", "useCase": "ネット環境が不安な会場や社外への1ファイル送付、file://直開きでも崩れない配布用スライドを作りたいときに使う。", "code": "\n\n\n", "tags": [ "HTML", "単一ファイル", "配布", "オフライン対応", "持ち運びやすい", "割り切り" ], "support": "広く対応", "svg": "\n \n \n \n CSS\n \n JS\n \n SVG\n \n .html\n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "popover-hint", "target-only-slide-switch", "details-summary-accordion", "customizable-select" ] }, { "id": "slide-thumbnail-navigator", "num": "W-191", "name": "Thumbnail Rail Navigator", "nameJa": "サムネイル一覧ナビゲーター", "category": "slide", "description": "画面端に全スライドの縮小プレビューを並べたレールを常設し、クリックやキー操作で該当スライドへジャンプする。現在位置はハイライト枠で示す。", "useCase": "章数が多い長尺スライドで目的のページへ素早く移動したい、聴衆にも進行の全体像を見せたいときに使う。", "code": ".rail{ display:flex; flex-direction:column; gap:6px; overflow-y:auto; }\n.rail button{ width:64px; height:36px; border:2px solid transparent; }\n.rail button.is-active{ border-color:var(--w-accent,#4fe3c1); }\n.rail button:hover{ transform:scale(1.05); }", "tags": [ "CSS", "JavaScript", "サムネイル", "一覧性", "ジャンプ移動", "見渡せる", "サクッと" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide" ], "weight": "脇役", "relatedIds": [ "overview-grid-zoom", "css-custom-highlights", "fullscreen-fit-scale", "fragment-reveal" ] }, { "id": "touch-swipe-navigation", "num": "W-192", "name": "Touch Swipe Navigation", "nameJa": "スワイプでのページ送り", "category": "slide", "description": "touchstart/touchmove/touchendの座標差からスワイプ方向を判定し、一定距離を超えたら前後のスライドへ切り替えるモバイル向けジェスチャー実装。", "useCase": "スマホやタブレットでスライドを閲覧・発表するとき、画面を左右にフリックするだけでページ送りできるようにしたいときに使う。", "code": "let x0;\nel.addEventListener('touchstart', e => x0 = e.touches[0].clientX);\nel.addEventListener('touchend', e => {\n const dx = e.changedTouches[0].clientX - x0;\n if (dx < -50) next();\n else if (dx > 50) prev();\n});", "tags": [ "JavaScript", "タッチ", "スワイプ", "モバイル", "フリック", "ぬるっと", "直感的" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "脇役", "relatedIds": [ "view-transitions-spa", "flip-technique", "web-animations-api", "magnetic-button" ] }, { "id": "object-fit", "num": "W-193", "name": "Object Fit", "nameJa": "オブジェクトフィット", "category": "media", "description": "親要素の枠に対して画像や動画の縦横比を保ったまま埋める/収める表現。object-fit: coverは枠からはみ出た部分を自動トリミングして埋め、containは画像全体を枠内に収めて余白を作る（トリミングはされない）。", "useCase": "サムネイルグリッドやヒーロー画像で、元画像の比率がバラバラでも枠を揃えて破綻なく並べたいときに使う。", "code": ".ofit-img {\n width: 100%;\n height: 240px;\n object-fit: cover;\n object-position: center;\n}", "tags": [ "CSS", "画像", "object-fit", "トリミング", "レイアウト", "すっきり", "きれいに整う" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n cover\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "object-position", "aspect-ratio-placeholder", "line-clamp", "text-wrap-balance" ] }, { "id": "object-position", "num": "W-194", "name": "Object Position", "nameJa": "オブジェクトポジション", "category": "media", "description": "object-fit:coverと組み合わせ、画像内のどの部分を基準に切り抜くかをobject-positionで指定する（例: top、20% 80%）。", "useCase": "人物写真や商品写真をカードに配置する際、顔や重要部分が縦横比変換で切れてしまうのを防ぎたいときに使う。", "code": ".opos-img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n object-position: top center; /* 顔を優先表示 */\n}", "tags": [ "CSS", "画像", "object-position", "トリミング", "被写体優先", "ジャストフィット", "狙い通り" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n top\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "object-fit", "aspect-ratio-placeholder", "blur-up", "clip-path-shapes" ] }, { "id": "hover-zoom", "num": "W-195", "name": "Hover Zoom", "nameJa": "ホバーズーム", "category": "media", "description": "カード内画像にマウスを乗せると拡大表示される定番演出。親にoverflow:hidden、画像にtransition付きtransform: scale(1.1)を適用する。", "useCase": "商品カードやポートフォリオのサムネイルで、操作可能な印象とインタラクション感を出したいときに使う。", "code": ".hzoom-frame { overflow: hidden; border-radius: 8px; }\n.hzoom-img {\n transition: transform .4s ease;\n}\n.hzoom-frame:hover .hzoom-img { transform: scale(1.12); }", "tags": [ "CSS", "ホバー", "transform", "インタラクション", "ズーム", "ぬるっと", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "filter-effects", "grayscale-hover", "caption-slide-in", "parallax-card-image" ] }, { "id": "image-clip-reveal", "num": "W-196", "name": "Clip-Path Reveal", "nameJa": "画像スクロールリビール", "category": "media", "description": "スクロールに連動してclip-pathやmaskの範囲を広げ、画像が徐々に切り出されて現れる演出。IntersectionObserverでクラスを切り替える。", "useCase": "LPのセクション切り替えや作品紹介で、画像が「現れる」印象的な導入を作りたいときに使う。", "code": ".creveal-img {\n clip-path: inset(0 100% 0 0);\n transition: clip-path .9s cubic-bezier(.2,.8,.2,1);\n}\n.creveal-img.is-visible { clip-path: inset(0 0 0 0); }", "tags": [ "CSS", "スクロール", "clip-path", "演出", "没入感", "じわっと", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "parallax-scroll", "horizontal-scroll-section", "clip-path-reveal", "parallax-background" ] }, { "id": "lazy-loading", "num": "W-197", "name": "Lazy Loading", "nameJa": "画像の遅延読み込み", "category": "media", "description": "img要素にloading=\"lazy\"を指定し、ビューポートに近づくまで画像の読み込みを遅らせてページの初期表示を高速化する表現。", "useCase": "画像点数の多い記事ページやギャラリーで、初期表示速度とスクロール体験を両立させたいときに使う。", "code": "\"説明\"", "tags": [ "HTML", "パフォーマンス", "画像", "遅延読み込み", "表示速度", "サクサク", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "responsive-srcset", "youtube-facade", "image-fallback", "details-summary-accordion" ] }, { "id": "responsive-srcset", "num": "W-198", "name": "Responsive srcset/sizes", "nameJa": "レスポンシブ画像 (srcset/sizes)", "category": "media", "description": "srcsetで複数解像度の画像候補を用意し、sizesで表示幅の目安を伝え、ブラウザが端末に最適な画像を自動選択して読み込む。", "useCase": "モバイルから大画面まで同じ画像スロットで、通信量と表示画質のバランスを最適化したいときに使う。", "code": "", "tags": [ "HTML", "レスポンシブ", "画像最適化", "srcset", "パフォーマンス", "きびきび", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n 400w -> 800w -> 1600w\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "lazy-loading", "picture-art-direction", "transition-basics", "details-summary-accordion" ] }, { "id": "picture-art-direction", "num": "W-199", "name": "Picture Art Direction", "nameJa": "pictureでのアートディレクション", "category": "media", "description": "内に複数を並べ、画面幅ごとに構図の異なる画像を出し分ける。狭い画面では縦構図トリミング版を出すなど。", "useCase": "ヒーロービジュアルで、スマホでは被写体アップ、PCでは全景を見せるなど画面幅ごとに最適な構図を出したいときに使う。", "code": "\n \n \n \"説明\"\n", "tags": [ "HTML", "レスポンシブ", "picture", "アートディレクション", "構図", "ジャストフィット", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "responsive-srcset", "details-summary-accordion", "lazy-loading", "video-autoplay-loop" ] }, { "id": "aspect-ratio-placeholder", "num": "W-200", "name": "Aspect Ratio Placeholder", "nameJa": "アスペクト比プレースホルダ", "category": "media", "description": "aspect-ratioプロパティで画像読み込み前から確保領域を予約し、読み込み完了時のレイアウトシフト（CLS）を防ぐ。", "useCase": "記事やカード一覧で画像がガクッと表示位置をずらす現象を防ぎ、読み込み中も安定したレイアウトを保ちたいときに使う。", "code": ".aratio-box {\n aspect-ratio: 16 / 9;\n background: var(--placeholder, #1a2540);\n width: 100%;\n}\n.aratio-box img { width: 100%; height: 100%; object-fit: cover; }", "tags": [ "CSS", "レイアウト", "CLS対策", "画像", "aspect-ratio", "安定感", "さりげない" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "object-fit", "vertical-writing", "scroll-margin-padding", "line-clamp" ] }, { "id": "blur-up", "num": "W-201", "name": "Blur-Up", "nameJa": "ぼかしプレースホルダ", "category": "media", "description": "極小のぼやけたプレビュー画像を先に表示し、本画像の読み込み完了と同時にfilter: blur(0)へトランジションしてくっきり切り替える手法。", "useCase": "写真中心のギャラリーやヒーロー画像で、読み込み待ちの間も体感速度を良く見せたいときに使う。", "code": ".bup-img {\n filter: blur(16px);\n transition: filter .6s ease-out;\n}\n.bup-img.is-loaded { filter: blur(0); }", "tags": [ "CSS", "画像", "ぼかし", "blur-up", "体感速度", "ふわっと", "じわっと" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "mask-gradient-fade", "object-fit", "object-position", "image-clip-reveal" ] }, { "id": "grayscale-hover", "num": "W-202", "name": "Grayscale to Color Hover", "nameJa": "モノクロ→カラー ホバー", "category": "media", "description": "通常時はfilter: grayscale(1)で白黒表示し、ホバー時にgrayscale(0)へtransitionしてカラーへ切り替わる演出。", "useCase": "実績一覧やチームメンバー紹介で、静的な一覧に抑揚をつけカーソルを合わせた項目だけ目立たせたいときに使う。", "code": ".ghov-img {\n filter: grayscale(1);\n transition: filter .35s ease;\n}\n.ghov-img:hover { filter: grayscale(0); }", "tags": [ "CSS", "ホバー", "filter", "グレースケール", "インタラクション", "パッと切替", "高級感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "card-flip", "hover-zoom", "blur-reveal-text", "variable-font-weight" ] }, { "id": "lightbox-gallery", "num": "W-203", "name": "Lightbox Gallery", "nameJa": "ギャラリーグリッド + ライトボックス", "category": "media", "description": "サムネイルグリッドをクリックすると背景を暗転させたオーバーレイに拡大画像を表示する。dialog要素やposition:fixedのオーバーレイで実装する。", "useCase": "作品集や施工事例など、一覧性を保ちつつクリックした写真だけ大きくじっくり見せたいときに使う。", "code": "\n \"拡大画像\"\n\n", "tags": [ "HTML", "JS", "モーダル", "ギャラリー", "dialog", "パッと切替", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "lightbox-dialog", "command-palette", "dialog-closedby", "youtube-facade" ] }, { "id": "video-autoplay-loop", "num": "W-204", "name": "Autoplay Loop Video", "nameJa": "動画の自動再生ループ", "category": "media", "description": "video要素にautoplay・muted・loop・playsinline属性を付け、音声なしの短尺映像を背景のように無限ループ再生する。muted必須が自動再生条件。", "useCase": "LPのヒーロー背景や機能紹介の動きの説明で、画像より情報量の多い映像を音無しでさりげなく流したいときに使う。", "code": "", "tags": [ "HTML", "動画", "自動再生", "ループ", "背景演出", "さりげない", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "details-summary-accordion", "lazy-loading", "responsive-srcset", "picture-art-direction" ] }, { "id": "scroll-scrub-video", "num": "W-205", "name": "Scroll-Scrubbed Video", "nameJa": "スクロールで動画スクラブ", "category": "media", "description": "スクロール位置に応じてvideo要素のcurrentTimeをJSで書き換え、動画の再生を早送り・巻き戻しのようにスクロール操作へ同期させる。", "useCase": "製品の分解・組み立てや360度回転をスクロールに合わせて見せたい、映画的な縦スクロール演出をしたいときに使う。", "code": "window.addEventListener('scroll', () => {\n const progress = getScrollProgress(section);\n video.currentTime = video.duration * progress;\n});", "tags": [ "JS", "スクロール", "動画", "スクラブ", "currentTime", "没入感", "ダイナミック" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n", "useFor": [ "lp" ], "weight": "主役", "relatedIds": [ "horizontal-scroll-section", "parallax-background", "image-clip-reveal", "parallax-scroll" ] }, { "id": "youtube-facade", "num": "W-206", "name": "YouTube Embed Facade", "nameJa": "YouTube埋め込みのファサード", "category": "media", "description": "初期表示はサムネイル画像＋再生ボタンの静的HTMLのみとし、クリックされた時点で初めてiframe（YouTube本体）を生成・挿入する遅延読み込み手法。", "useCase": "記事や解説ページに動画を複数埋め込む際、YouTube側の重い初期スクリプトでページ表示が遅くなるのを避けたいときに使う。", "code": "facade.addEventListener('click', () => {\n facade.innerHTML =\n ``;\n}, { once: true });", "tags": [ "HTML", "JS", "動画", "パフォーマンス", "iframe遅延", "サクサク", "パッと切替" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n iframe\n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "lazy-loading", "lightbox-gallery", "command-palette", "css-typed-om" ] }, { "id": "caption-slide-in", "num": "W-207", "name": "Caption Slide-In", "nameJa": "キャプションのスライドイン", "category": "media", "description": "figure内の画像にfigcaptionを重ね、通常は画面外へtranslateYで隠しておき、ホバーやスクロール表示時にtranslateY(0)へ滑り込ませる。", "useCase": "写真ギャラリーや事例紹介で、画像本体はすっきり見せつつ説明文をインタラクション時だけ提示したいときに使う。", "code": ".cslide-fig { position: relative; overflow: hidden; }\n.cslide-cap {\n position: absolute; inset: auto 0 0 0;\n transform: translateY(100%);\n transition: transform .35s ease;\n}\n.cslide-fig:hover .cslide-cap { transform: translateY(0); }", "tags": [ "CSS", "ホバー", "キャプション", "figcaption", "スライドイン", "ぬるっと", "さりげない" ], "support": "広く対応", "svg": "作品タイトル", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "clip-path-shapes", "hover-zoom", "parallax-card-image", "variable-font-weight" ] }, { "id": "text-image-mask", "num": "W-208", "name": "Image Text Mask", "nameJa": "画像内テキストマスク", "category": "media", "description": "background-clip: textとcolor: transparentを組み合わせ、太い見出し文字の中に画像を流し込んで見せる表現。", "useCase": "ヒーロー見出しやタイトルカードで、文字自体を強い視覚要素として画像と一体化させたいときに使う。", "code": ".tmask-title {\n background: url('photo.jpg') center/cover;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n font-weight: 900;\n}", "tags": [ "CSS", "見出し", "background-clip", "テキストマスク", "タイポグラフィ", "高級感", "目を引く" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "slide", "lp" ], "weight": "主役", "relatedIds": [ "text-image-fill", "gradient-text", "text-extrude", "outline-text-bg" ] }, { "id": "parallax-card-image", "num": "W-209", "name": "Card Parallax Image", "nameJa": "カード内パララックス画像", "category": "media", "description": "マウス移動やスクロール量に応じてカード内の背景画像だけを前景よりゆっくり／別方向に動かし奥行きを出す。transformのtranslateをJSで駆動する。", "useCase": "商品カードやプロフィールカードに立体感を出し、他の平坦なカードより印象に残る一枚にしたいときに使う。", "code": "card.addEventListener('mousemove', (e) => {\n const x = (e.offsetX / card.clientWidth - .5) * 20;\n const y = (e.offsetY / card.clientHeight - .5) * 20;\n bgImg.style.transform = `translate(${x}px, ${y}px) scale(1.1)`;\n});", "tags": [ "JS", "CSS", "ホバー", "パララックス", "奥行き", "ぬるっと", "没入感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "view-transitions-spa", "parallax-background", "hover-zoom", "caption-slide-in" ] }, { "id": "image-fallback", "num": "W-210", "name": "Broken Image Fallback", "nameJa": "壊れた画像のフォールバック", "category": "media", "description": "img要素のonerrorイベントで読み込み失敗を検知し、代替画像やプレースホルダSVGへsrcを差し替えて表示崩れを防ぐ。", "useCase": "CMS入稿画像やユーザー投稿画像などURL切れが起こり得る場面で、壊れたアイコン表示のまま放置しないようにしたいときに使う。", "code": "\"ユーザー画像\"\n", "tags": [ "HTML", "JS", "エラー処理", "フォールバック", "画像", "さりげない", "安心感" ], "support": "広く対応", "svg": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "lazy-loading", "url-hash-sync", "details-summary-accordion", "responsive-srcset" ] }, { "id": "css-scroll-controls", "num": "W-211", "name": "CSS Scroll Buttons and Markers", "nameJa": "CSSだけのスクロールボタン／マーカー", "category": "scroll", "description": "スクロールコンテナから::scroll-button()と::scroll-markerを生成し、JavaScriptなしでカルーセルの前後ボタンと現在位置マーカーを作る。生成された操作部品にはブラウザがキーボード操作の意味も付与する。", "useCase": "商品カードや事例一覧を横送りにしつつ、操作ボタン・ページ位置・スクロールスナップを一体で実装したい場面。非対応ブラウザでも通常の横スクロールへフォールバックできる。", "code": ".rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-marker-group: after; }\n.rail::scroll-button(left) { content: \"←\"; }\n.rail::scroll-button(right) { content: \"→\"; }\n.card { scroll-snap-align: center; }\n.card::scroll-marker { content: \"\"; }\n.card::scroll-marker:target-current { background: currentColor; }", "tags": [ "CSS", "カルーセル", "scroll-snap", "アクセシビリティ", "省コード" ], "support": "限定対応", "svg": "::scroll-button() + ::scroll-marker", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "reading-flow", "sibling-index-stagger", "customizable-select", "contrast-color" ] }, { "id": "scroll-state-queries", "num": "W-212", "name": "Container Scroll-State Queries", "nameJa": "スクロール状態コンテナクエリ", "category": "scroll", "description": "container-type: scroll-stateで、スクロール可能・スナップ中・stickyで固定中などの状態をCSSから問い合わせる。スクロール監視用JavaScriptを減らし、子要素の見た目を状態に応じて切り替えられる。", "useCase": "固定された見出しへ影を付ける、まだ下へ進めるときだけスクロール誘導を出す、スナップ中のカードを強調する、といった状態表示に使う。", "code": ".scroller { container: scroller / scroll-state; overflow: auto; }\n@container scroller scroll-state(scrollable: bottom) {\n .more-hint { opacity: 1; }\n}\n.sticky { position: sticky; top: 0; container-type: scroll-state; }\n@container scroll-state(stuck: top) { .title { box-shadow: 0 4px 12px #0004; } }", "tags": [ "CSS", "コンテナクエリ", "スクロール状態", "sticky", "省JavaScript" ], "support": "限定対応", "svg": "scroll-state(stuck: top)", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "container-style-queries", "scroll-triggered-animation", "field-sizing", "container-queries" ] }, { "id": "scroll-target-group", "num": "W-213", "name": "Scroll Target Group", "nameJa": "現在セクションを示す:target-current", "category": "scroll", "description": "ナビゲーションへscroll-target-group: autoを指定すると、内部リンクのうち現在表示中の対象を:target-currentで選べる。IntersectionObserverを使わず、目次やスクロールスパイの現在位置をCSSで示せる。", "useCase": "長い記事の目次、1ページLPの固定ナビ、カルーセルの自作マーカーで、閲覧中の章を自動ハイライトしたい場面。", "code": ".toc { scroll-target-group: auto; }\n.toc a { color: #94a3c0; }\n.toc a:target-current { color: #4fe3c1; font-weight: 700; }", "tags": [ "CSS", "目次", "scroll-spy", ":target-current", "ナビゲーション" ], "support": "限定対応", "svg": "\n \n \n \n scroll-target-group: auto\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "smooth-scroll", "sticky-position", "css-scroll-controls", "scroll-state-queries" ] }, { "id": "scroll-into-view-container", "num": "W-214", "name": "scrollIntoView Container Option", "nameJa": "scrollIntoViewのcontainer指定", "category": "scroll", "description": "scrollIntoView()のcontainerオプションで、対象へ移動するときに最も近いスクロール領域だけを動かすか、すべての祖先を動かすかを選べる。入れ子スクロールで外側ページまで意図せず動く問題を避けられる。", "useCase": "モーダル内リスト、横カルーセル内の選択項目、埋め込みエディタなど、ページ全体の位置を保ったまま内側だけスクロールさせたい場面。", "code": "item.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n container: 'nearest'\n});", "tags": [ "JavaScript", "scrollIntoView", "入れ子スクロール", "UX" ], "support": "限定対応", "svg": "\n \n \n \n container: \"nearest\"\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "element-scoped-view-transition", "css-registerproperty-js", "css-typed-om", "canvas-ctx-filter" ] }, { "id": "text-box-trim", "num": "W-215", "name": "Text Box Trim", "nameJa": "文字の上下余白を字面でトリミング", "category": "text", "description": "text-box-trimとtext-box-edgeで、フォントの行ボックスに含まれる見えない上下余白を大文字上端やベースラインに合わせて切り詰める。異なるフォントでも見出し周囲の間隔を設計値へ揃えやすい。", "useCase": "ヒーロー見出し、ボタン、カードタイトルなど、文字の見た目上の端と隣接要素の間隔を精密に揃えたい場面。", "code": ".heading {\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n}", "tags": [ "CSS", "タイポグラフィ", "行ボックス", "余白調整" ], "support": "新しく普及中", "svg": "\n \n \n Ag\n text-box-trim: trim-both\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-autospace", "text-emphasis-dots", "fluid-typography", "text-extrude" ] }, { "id": "css-custom-highlights", "num": "W-216", "name": "CSS Custom Highlight API", "nameJa": "Custom Highlight API", "category": "text", "description": "RangeとHighlightをCSS.highlightsへ登録し、DOMをspanで分割せずに任意の文字範囲を::highlight()で装飾する。検索結果・校正箇所・共同編集の選択範囲を元の文書構造のまま重ねられる。", "useCase": "ページ内検索、文章校正、コードレビュー、複数ユーザーのカーソル表示など、同じ文章へ複数種類のハイライトを重ねたい場面。", "code": "const range = new Range();\nrange.setStart(textNode, 4);\nrange.setEnd(textNode, 10);\nCSS.highlights.set('search', new Highlight(range));\n\n::highlight(search) { background: #ffc857; color: #101830; }", "tags": [ "JavaScript", "CSS", "Range", "検索", "ハイライト" ], "support": "新しく普及中", "svg": "\n \n \n Search withoutchanging the DOM.\n CSS.highlights + ::highlight()\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "stagger-char-reveal", "view-transitions-spa", "will-change-gpu", "ripple-effect" ] }, { "id": "text-autospace", "num": "W-217", "name": "Text Autospace", "nameJa": "日本語と英数字の間隔を自動調整", "category": "text", "description": "text-autospaceで、日本語などの表意文字と英字・数字が隣接する箇所へ読みやすい間隔を自動挿入する。手入力の半角スペースを混ぜずに、日本語組版のリズムを一貫させられる。", "useCase": "日本語の記事、製品名に英字を含むLP、数値の多い資料など、和文と欧文が頻繁に混ざる本文や見出し。", "code": ".article {\n text-autospace: normal;\n}\n.code { text-autospace: no-autospace; }", "tags": [ "CSS", "日本語組版", "タイポグラフィ", "可読性" ], "support": "新しく普及中", "svg": "\n \n \n AIで作るAI で作る\n text-autospace: normal\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-box-trim", "diagram-label-min-size", "text-emphasis-dots", "word-break-auto-phrase" ] }, { "id": "grid-lanes", "num": "W-218", "name": "CSS Grid Lanes", "nameJa": "Grid Lanes（ネイティブ・マソンリー）", "category": "layout", "description": "display: grid-lanesで、高さの異なる項目を空きの少ないレーンへ配置するネイティブなマソンリーレイアウト。DOM・Tab・読み上げはソース順のままだが、視覚順は空きレーン優先でずれ得るため、操作要素では順序も検証する。", "useCase": "写真ギャラリー、カード型ポートフォリオ、記事一覧など、高さが不揃いな要素を自然に詰めて並べたい場面。視覚順とキーボード順の差が理解を妨げない内容に使う。", "code": ".gallery {\n display: grid-lanes;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 1rem;\n}", "tags": [ "CSS", "Grid Lanes", "マソンリー", "ギャラリー" ], "support": "限定対応", "svg": "\n \n \n \n display: grid-lanes\n", "useFor": [ "site", "lp" ], "weight": "主役", "relatedIds": [ "masonry-columns", "ring-gallery", "carousel-3d", "content-visibility" ] }, { "id": "content-visibility", "num": "W-219", "name": "Content Visibility", "nameJa": "content-visibilityで画面外描画を省略", "category": "layout", "description": "content-visibility: autoで画面外セクションのレイアウト・描画を必要になるまで省略し、長いページの初期レンダリング負荷を下げる。contain-intrinsic-sizeで未描画時の予測サイズを与えるとスクロール位置の揺れも抑えられる。", "useCase": "長文記事、大量カードのカタログ、下部に多くのセクションを持つLPなど、初期表示外のDOMが重いページ。", "code": ".section {\n content-visibility: auto;\n contain-intrinsic-size: auto 520px;\n}", "tags": [ "CSS", "パフォーマンス", "レンダリング", "長いページ" ], "support": "広く対応", "svg": "\n \n \n \n content-visibility: auto\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "unicode-range-subset", "font-metric-override", "transition-basics", "grid-lanes" ] }, { "id": "container-style-queries", "num": "W-220", "name": "Container Style Queries", "nameJa": "コンテナのCSS変数でスタイル分岐", "category": "layout", "description": "@container style()で祖先のカスタムプロパティ値を問い合わせ、コンポーネントの見た目を状態やテーマに応じて分岐する。サイズではなく「variantがfeaturedか」のような設計トークンを条件にできる。", "useCase": "同じカード部品を通常・強調・警告へ切り替える、埋め込まれた領域のテーマへ子部品を追従させる、といったコンポーネント設計。", "code": ".card { --variant: featured; }\n@container style(--variant: featured) {\n .card__body { border-color: #4fe3c1; }\n .card__badge { display: inline-flex; }\n}", "tags": [ "CSS", "コンテナクエリ", "デザイントークン", "コンポーネント" ], "support": "新しく普及中", "svg": "\n \n \n \n @container style(--variant)\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "container-queries", "css-nesting", "css-scope", "scroll-state-queries" ] }, { "id": "css-scope", "num": "W-221", "name": "CSS @scope", "nameJa": "@scopeで部品内だけスタイル適用", "category": "layout", "description": "@scopeでセレクタが一致する範囲を部品のルートから下限までに限定し、外側や入れ子部品へのルール流出を抑える。外側CSSの流入や継承は遮断しないため、Shadow DOMのような完全なカプセル化ではない。", "useCase": "CMS内の埋め込み部品やカードの入れ子で、この部品から出ていくセレクタの影響範囲を限定したい場面。外側から入るカスケードは別途確認する。", "code": "@scope (.profile-card) to (.profile-card .nested) {\n :scope { border: 1px solid #4fe3c1; }\n h2 { color: #4fe3c1; }\n}", "tags": [ "CSS", "@scope", "スコープ", "コンポーネント", "保守性" ], "support": "新しく普及中", "svg": "\n \n \n scope start\n @scope (.card) to (.nested)\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-nesting", "container-style-queries", "container-queries", "grid-lanes" ] }, { "id": "css-nesting", "num": "W-222", "name": "Native CSS Nesting", "nameJa": "ネイティブCSSネスト", "category": "layout", "description": "CSSルールの中へ子セレクタや状態セレクタを直接入れ子にし、プリプロセッサなしで部品の関係を近くにまとめる。&で親セレクタを明示でき、メディアクエリも部品内へ置ける。", "useCase": "カードやボタンなど状態の多い部品で、hover・focus・子要素・レスポンシブ指定を読みやすく保ちたい場面。", "code": ".card {\n padding: 1rem;\n & h2 { margin: 0; }\n &:hover { border-color: #4fe3c1; }\n @media (width < 40rem) { padding: .75rem; }\n}", "tags": [ "CSS", "ネスト", "保守性", "コンポーネント" ], "support": "広く対応", "svg": "\n \n \n & .child\n &:hover / & .child\n", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-scope", "container-style-queries", "container-queries", "grid-lanes" ] }, { "id": "reading-flow", "num": "W-223", "name": "CSS Reading Flow", "nameJa": "見た目と読み上げ順をそろえるreading-flow", "category": "layout", "description": "reading-flowでGridやFlexの視覚順に合わせて、Tab移動と支援技術の読み順を指定する。基本は意味の通るDOM順を優先し、レスポンシブ再配置で見た目とのずれが避けられない場合に補助する。", "useCase": "ダッシュボードやカードグリッドで表示順をCSSにより大きく並べ替えた際、キーボード操作が画面上を不自然に飛ばないよう整える場面。", "code": ".dashboard {\n display: grid;\n grid-template-columns: 1fr 1fr;\n reading-flow: grid-rows;\n}", "tags": [ "CSS", "アクセシビリティ", "Tab順", "Grid", "Flex" ], "support": "限定対応", "svg": "\n \n \n 1234\n reading-flow: grid-rows\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "media-preferences", "css-scroll-controls", "customizable-select", "contrast-color" ] }, { "id": "corner-shape", "num": "W-224", "name": "CSS Corner Shape", "nameJa": "corner-shapeで角の形を選ぶ", "category": "shape", "description": "border-radiusの曲率にcorner-shapeを組み合わせ、丸・squircle・scoop・bevelなどの角形状をCSSだけで選ぶ。clip-pathを個別に描かず、サイズ変更へ追従する装飾的なカードを作れる。", "useCase": "ブランドカード、バッジ、写真フレーム、CTAなど、通常の角丸より個性を出しながらレスポンシブに保ちたい場面。", "code": ".card {\n border-radius: 28px;\n corner-shape: squircle;\n}\n.ticket {\n border-radius: 20px;\n corner-shape: scoop;\n}", "tags": [ "CSS", "角丸", "squircle", "scoop", "カード" ], "support": "限定対応", "svg": "\n \n \n \n round → squircle → scoop\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "gradient-border", "card-flip", "hover-lift-card", "skeleton-shimmer" ] }, { "id": "css-shape-function", "num": "W-225", "name": "CSS shape() Function", "nameJa": "shape()でレスポンシブな輪郭を描く", "category": "shape", "description": "shape()関数でline・curve・arcなどの命令をCSS内に書き、clip-pathやoffset-pathの輪郭を割合・CSS変数でレスポンシブに定義する。固定座標のpath()よりサイズ変更へ追従しやすい。", "useCase": "斜めに切ったヒーロー、吹き出し、可変サイズのボタン輪郭、モーションパスを同じ設計トークンから作りたい場面。", "code": ".hero {\n --notch: 12%;\n clip-path: shape(from 0 0,\n line to 100% 0, line to 100% 88%,\n line to var(--notch) 100%, line to 0 82%, close);\n}", "tags": [ "CSS", "clip-path", "shape()", "レスポンシブ", "図形" ], "support": "新しく普及中", "svg": "\n \n \n \n shape(from … line to … close)\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "clip-path-polygon", "clip-path-shapes", "clip-path-reveal", "aspect-ratio" ] }, { "id": "view-transition-class", "num": "W-226", "name": "View Transition Class", "nameJa": "複数要素をまとめるview-transition-class", "category": "motion", "description": "各要素には固有のview-transition-nameを与えたまま、共通のview-transition-classを付けると、複数の遷移擬似要素へ1本のCSSルールを適用できる。カード群の速度や方向を一括管理しやすい。", "useCase": "一覧から詳細への遷移や並べ替えで、複数カードへ同じタイミング関数・時間・スライド方向を適用したい場面。", "code": ".card { view-transition-class: card; }\n#card-a { view-transition-name: card-a; }\n#card-b { view-transition-name: card-b; }\n::view-transition-group(.card) {\n animation-duration: .45s;\n animation-timing-function: ease-in-out;\n}", "tags": [ "CSS", "View Transitions", "ページ遷移", "一括指定" ], "support": "新しく普及中", "svg": "\n \n \n \n \n \n 3 names, 1 shared class rule\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "view-transitions-mpa", "view-transitions-spa", "element-scoped-view-transition", "scroll-triggered-animation" ] }, { "id": "element-scoped-view-transition", "num": "W-227", "name": "Element-Scoped View Transition", "nameJa": "要素内だけのView Transition", "category": "motion", "description": "document全体ではなく任意の要素でstartViewTransition()を呼び、そのサブツリーだけを遷移対象にする。独立した部品の更新を同時実行でき、ページ全体の遷移との競合も減らせる。", "useCase": "ダッシュボードの各ウィジェット、モーダル内の表示切替、複数カードの独立更新など、局所的な状態変化を滑らかにつなぎたい場面。", "code": "const transition = panel.startViewTransition(() => {\n panel.classList.toggle('compact');\n});\nawait transition.finished;", "tags": [ "JavaScript", "View Transitions", "コンポーネント", "局所更新" ], "support": "限定対応", "svg": "\n \n \n \n element.startViewTransition()\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "view-transitions-spa", "view-transition-class", "css-registerproperty-js", "scroll-into-view-container" ] }, { "id": "scroll-triggered-animation", "num": "W-228", "name": "CSS Scroll-Triggered Animation", "nameJa": "CSSスクロールトリガー", "category": "motion", "description": "timeline-triggerでスクロール範囲を監視し、animation-triggerで通常の時間ベースアニメーションを再生・逆再生する。スクロール量へ直結するscroll-driven animationと違い、境界を越えた瞬間から一定時間で完走する。", "useCase": "要素が画面へ入ったら一度だけ展開する、離れたら逆再生する、といったIntersectionObserver相当の出現制御を宣言的に書きたい場面。", "code": ".card {\n timeline-trigger: --reveal view() contain 15% contain 85%;\n animation: reveal .45s ease both;\n animation-trigger: --reveal play-forwards play-backwards;\n}\n@keyframes reveal { from { opacity: 0; translate: 0 24px; } }", "tags": [ "CSS", "スクロール", "timeline-trigger", "出現", "省JavaScript" ], "support": "限定対応", "svg": "\n \n \n \n timeline-trigger → animation-trigger\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "view-timeline-reveal", "scroll-reveal", "starting-style", "scroll-state-queries" ] }, { "id": "sibling-index-stagger", "num": "W-229", "name": "Sibling Index Stagger", "nameJa": "sibling-index()で自動スタガー", "category": "motion", "description": "sibling-index()とsibling-count()で、兄弟要素の位置と総数をCSS計算へ使う。各要素へstyle属性や:nth-child()を列挙せず、個数が変わるリストにも自動で時間差を付けられる。", "useCase": "動的に件数が増減するメニュー、カード一覧、文字分割アニメーションで、保守しやすい連続ディレイを作りたい場面。", "code": ".item {\n animation: enter .5s ease both;\n animation-delay: calc((sibling-index() - 1) * 80ms);\n}\n.item { --progress: calc(sibling-index() / sibling-count()); }", "tags": [ "CSS", "スタガー", "sibling-index()", "リスト", "省コード" ], "support": "新しく普及中", "svg": "\n \n \n \n delay = sibling-index() × 80ms\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-scroll-controls", "has-selector-interact", "anchor-positioning", "view-transition-class" ] }, { "id": "customizable-select", "num": "W-230", "name": "Customizable Select", "nameJa": "ネイティブselectの完全カスタマイズ", "category": "interact", "description": "appearance: base-selectでネイティブselectの動作とアクセシビリティを保ちながら、開閉ボタン・選択中内容・picker・optionをCSSで詳細に装飾する。selectedcontentは選択optionの内容を閉じたボタンへ複製する。", "useCase": "画像付き商品選択、ブランドに合わせたプルダウン、検索可能な選択UIの土台など、独自div製selectを避けたい場面。", "code": "\n\n", "tags": [ "HTML", "CSS", "select", "フォーム", "アクセシビリティ" ], "support": "限定対応", "svg": "\n \n \n 🌿 Forest🌿 Forest ✓🌊 Ocean\n appearance: base-select\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "open-pseudo-class", "form-associated-custom-elements", "hover-focus-states", "target-css-toggle" ] }, { "id": "command-invokers", "num": "W-231", "name": "Invoker Commands", "nameJa": "command／commandforでUIを操作", "category": "interact", "description": "buttonのcommandforとcommandで、JavaScriptを書かずにdialogやpopoverへshow-modal・close・toggle-popoverなどの命令を送る。独自コマンドは--から始め、commandイベントで受け取れる。", "useCase": "モーダルの開閉、ポップオーバーメニュー、確認UIなど、HTMLだけで操作の関連付けを明示し、イベント処理を減らしたい場面。", "code": "\n\n \n", "tags": [ "HTML", "button", "dialog", "popover", "省JavaScript" ], "support": "新しく普及中", "svg": "\n \n \n command\n commandfor + command\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "dialog-closedby", "lightbox-dialog", "lightbox-gallery", "popover-hint" ] }, { "id": "dialog-closedby", "num": "W-232", "name": "Dialog Closedby Attribute", "nameJa": "dialogの閉じ方をclosedbyで制御", "category": "interact", "description": "dialogのclosedby属性で、Escなどの閉じ要求だけを許すcloserequest、背景クリックも許すany、操作ボタン以外では閉じないnoneを宣言できる。用途ごとの閉じ方をJavaScriptなしで揃えられる。", "useCase": "画像ライトボックスはany、重要な同意確認はnone、通常モーダルはcloserequest、と誤操作リスクに応じて閉じ方を選びたい場面。", "code": "…\n\n \n", "tags": [ "HTML", "dialog", "モーダル", "UX", "省JavaScript" ], "support": "限定対応", "svg": "\n \n \n \n any / closerequest / none\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "command-invokers", "lightbox-dialog", "lightbox-gallery", "dialog-modal" ] }, { "id": "open-pseudo-class", "num": "W-233", "name": "Open Pseudo-Class", "nameJa": ":openで開いているUIを装飾", "category": "interact", "description": ":openはselectやdialogなど、開いた状態を持つUIを共通の考え方で選択する疑似クラス。属性の有無やブラウザ固有セレクタへ分岐せず、開いているコントロールの枠や背景を変えられる。", "useCase": "プルダウンを開いたときの枠・背景変更、開いているdialogの導入アニメーションなど、開閉中のUIへ明確な状態感を出したい場面。", "code": "select:open {\n border-color: #4fe3c1;\n background: color-mix(in srgb, #4fe3c1 12%, Canvas);\n}\ndialog:open {\n opacity: 1;\n outline: 2px solid #4fe3c1;\n}", "tags": [ "CSS", ":open", "select", "dialog", "状態" ], "support": "新しく普及中", "svg": "\n \n \n select\n :open\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "customizable-select", "command-invokers", "dialog-closedby", "text-box-trim" ] }, { "id": "navigation-api", "num": "W-234", "name": "Navigation API", "nameJa": "Navigation APIで遷移を一元管理", "category": "interact", "description": "window.navigationのnavigateイベントでリンク遷移・履歴移動・再読み込みを一つの入口から扱い、intercept()でSPA更新へ差し替える。History APIより現在エントリや遷移完了を追いやすい。", "useCase": "ルーターを自作する小規模SPA、View Transitionsと組み合わせたページ切替、保存確認を挟むナビゲーション制御。", "code": "navigation.addEventListener('navigate', (event) => {\n if (!event.canIntercept || new URL(event.destination.url).origin !== location.origin) return;\n event.intercept({ handler: async () => {\n main.replaceChildren(await render(event.destination.url));\n }});\n});", "tags": [ "JavaScript", "Navigation API", "SPA", "履歴", "ルーティング" ], "support": "新しく普及中", "svg": "\n \n \n \n navigate → intercept → render\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "view-transitions-spa", "css-typed-om", "offscreen-canvas-worker", "scroll-into-view-container" ] }, { "id": "popover-hint", "num": "W-235", "name": "Hint Popover", "nameJa": "popover=\"hint\"の軽量ヒント", "category": "interact", "description": "popover=\"hint\"はツールチップなど短時間の補助情報向けの状態。同じhint階層では他のhintを閉じる一方、APIで表示するか、開いているauto内のinvokerから表示すればautoと共存できる。外部ボタンのクリックはautoをlight-dismissし得る。", "useCase": "ツールバー内のボタン補足、用語説明、グラフのポイント情報など、既存のメニューを保ったまま一時的な説明を重ねたい場面。表示条件とアクセシブルな名前は別途設計する。", "code": "\n
短い補足説明
\n", "tags": [ "HTML", "Popover API", "ツールチップ", "トップレイヤー" ], "support": "限定対応", "svg": "\n \n \n 用語短い補足説明\n popover=\"hint\"\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "details-summary-accordion", "customizable-select", "command-invokers", "dialog-closedby" ] }, { "id": "field-sizing", "num": "W-236", "name": "Field Sizing", "nameJa": "入力内容に合わせるfield-sizing", "category": "component", "description": "field-sizing: contentでinput・textarea・selectのサイズを入力内容へ自動追従させる。JavaScriptでscrollHeightを測らず、min/maxサイズだけCSSで制約して自然に伸びる入力欄を作れる。", "useCase": "チャット入力、短いタグ入力、自由記述フォームなど、内容量に応じて欄を広げつつ画面を占有しすぎないようにしたい場面。", "code": "textarea {\n field-sizing: content;\n min-block-size: 3lh;\n max-block-size: 10lh;\n}", "tags": [ "CSS", "フォーム", "textarea", "自動サイズ", "省JavaScript" ], "support": "新しく普及中", "svg": "\n \n \n \n field-sizing: content\n", "useFor": [ "site", "lp" ], "weight": "脇役", "relatedIds": [ "stepper", "scroll-state-queries", "scroll-triggered-animation", "customizable-select" ] }, { "id": "details-content", "num": "W-237", "name": "Details Content Pseudo-Element", "nameJa": "detailsの本文を::details-contentで選ぶ", "category": "component", "description": "::details-contentでdetails要素のsummary以外の本文ラッパーを直接選択できる。余分なdivを足さずに、開閉本文のoverflow・opacity・block-sizeなどをまとめて装飾できる。", "useCase": "FAQや仕様表のアコーディオンで、意味のある最小HTMLを保ちながら本文だけへ開閉アニメーションや余白を適用したい場面。", "code": ":root { interpolate-size: allow-keywords; }\ndetails::details-content {\n block-size: 0; opacity: 0; overflow: clip;\n transition: block-size .3s, opacity .3s, content-visibility .3s allow-discrete;\n}\ndetails[open]::details-content { block-size: auto; opacity: 1; }", "tags": [ "CSS", "details", "アコーディオン", "擬似要素", "省HTML" ], "support": "新しく普及中", "svg": "\n \n \n \n ::details-content\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "faq-accordion", "interpolate-size", "speech-bubble", "field-sizing" ] }, { "id": "search-element-landmark", "num": "W-238", "name": "Search Element", "nameJa": "search要素で検索領域を示す", "category": "component", "description": "はサイト内検索や絞り込み操作のまとまりを意味するHTMLランドマーク。単なるdivではなく支援技術へ検索領域として伝わり、同じページに複数ある場合はaria-labelで区別できる。", "useCase": "ヘッダー検索、商品絞り込み、地図内検索など、入力欄と送信・フィルター操作を一つの検索領域として明示したい場面。", "code": "\n
\n \n \n \n
\n", "tags": [ "HTML", "セマンティクス", "アクセシビリティ", "検索", "ランドマーク" ], "support": "広く対応", "svg": "\n \n \n \n <search aria-label=\"…\">\n", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "customizable-select", "inert-attribute", "command-palette", "form-associated-custom-elements" ] }, { "id": "contrast-color", "num": "W-239", "name": "CSS contrast-color()", "nameJa": "背景に対する文字色をcontrast-color()で選ぶ", "category": "background", "description": "contrast-color()は指定色に対し、白と黒のうちコントラストが高い方をブラウザに選ばせる。手作業の色分岐を減らせるが、中間色では小さい文字のWCAG基準を満たさない場合があるため、実際の配色でコントラストを測定する。", "useCase": "動的カラーのタグ、カテゴリバッジ、カラーピッカーのプレビューなど、背景色を事前に固定できない部品の初期選択に使い、重要な文字色は検査結果で補正する。", "code": ".badge {\n --surface: oklch(72% .18 155);\n background: var(--surface);\n color: contrast-color(var(--surface));\n}", "tags": [ "CSS", "色", "コントラスト", "アクセシビリティ", "動的テーマ" ], "support": "新しく普及中", "svg": "\n \n \n AaAa\n contrast-color(var(--surface))\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "light-dark-color", "css-scroll-controls", "reading-flow", "customizable-select" ] }, { "id": "light-dark-color", "num": "W-240", "name": "CSS light-dark()", "nameJa": "light-dark()でテーマ色を1宣言にする", "category": "background", "description": "color-schemeをlight darkにした上でlight-dark()を使うと、ライト時とダーク時の色を一つの宣言に記述できる。OS設定やcolor-schemeの切替へフォーム部品も含めて自然に追従する。", "useCase": "ライト／ダーク両対応のページで、背景・文字・境界線などの色トークンを短く一貫して定義したい場面。", "code": ":root {\n color-scheme: light dark;\n --surface: light-dark(#ffffff, #111a31);\n --text: light-dark(#17233c, #e8eef9);\n}\nbody { background: var(--surface); color: var(--text); }", "tags": [ "CSS", "ダークモード", "color-scheme", "テーマ", "色" ], "support": "広く対応", "svg": "\n \n \n \n light-dark(light, dark)\n", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "contrast-color", "media-preferences", "text-box-trim", "text-autospace" ] }, { "id": "vertical-scroll-snap", "num": "W-241", "name": "Vertical Writing with Scroll Snap", "nameJa": "縦書きの章送り（スクロール連動）", "category": "scroll", "description": "writing-mode: vertical-rlの文章は右から左へ列が進むため、横方向のスクロールがそのまま縦書きの読み進行と一致する。overflow-x: autoとscroll-snap-typeを組み合わせると、縦組みの1ページ分がぴたっと吸着しながら右から左へ章送りされる、書籍のような読書体験になる。", "useCase": "縦書きの小説・コラム記事をWeb上でページめくり風に読ませたいとき、和風のスクロールストーリーテリングを作りたいとき。", "code": ".wj-vss-track{\n writing-mode: vertical-rl;\n display:flex;\n overflow-x:auto;\n scroll-snap-type:x mandatory;\n}\n.wj-vss-track>section{\n flex:0 0 100%;\n scroll-snap-align:start;\n}", "tags": [ "CSS", "縦書き", "スクロール", "和風", "没入感" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "text-combine-upright", "scroll-snap", "parallax-scroll", "scrollytelling" ] }, { "id": "ruby-mono", "num": "W-242", "name": "Mono Ruby Annotation", "nameJa": "モノルビ（1字ずつのふりがな）", "category": "text", "description": "とで、漢字1字ごとに読みを個別に添えるふりがな表記。文字ごとにを分けて書くと、各文字の真上に読みがぴったり揃う「モノルビ」になる。で非対応ブラウザ用の丸カッコ表記も用意できる。", "useCase": "難読な人名・専門用語で、どの読みがどの文字に対応するかを一字単位ではっきり示したいとき。教材や辞書的な見出しに向く。", "code": "\n 漢(かん)\n 字(じ)\n", "tags": [ "HTML", "日本語", "ふりがな", "タイポグラフィ", "正確" ], "support": "広く対応", "svg": "漢字", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "ruby-group-jukugo", "ruby-overhang", "text-emphasis-dots", "text-box-trim" ] }, { "id": "ruby-group-jukugo", "num": "W-243", "name": "Group Ruby for Compound Words", "nameJa": "グループルビ・熟語ルビ（熟語まとめ読み）", "category": "text", "description": "を文字ごとに分けず、熟語全体に1つだけ付けると、読みが base 全体の幅へ均等に配置される「グループルビ」になる。ruby-align: space-around（既定値）が両端に半分の余白を残しながら文字間へ均等配分し、モノルビとは違う一体感のある見た目になる。印刷組版では、文字ごとの対応をできる限り保ちつつ収まらない分だけ全体配分に切り替える「熟語ルビ」という中間的な流儀もあるが、CSSのルビモジュールにはその専用アルゴリズムはなく、Web上はグループルビと同じ仕組み（ひとつの＋ruby-align）で近似することになる。", "useCase": "「明日」「今日」のように読みが文字単位に分解しにくい熟語・当て字。見出しやキャッチコピーで熟語をひとまとまりに読ませたいとき。", "code": "\n 明日(あした)\n\n\nruby { ruby-align: space-around; }", "tags": [ "HTML", "CSS", "日本語", "ふりがな", "熟語", "整列" ], "support": "新しく普及中", "svg": "明日", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "ruby-overhang", "ruby-mono", "line-break-strict", "hanging-punctuation" ] }, { "id": "ruby-overhang", "num": "W-244", "name": "Ruby Overhang Control", "nameJa": "ルビのはみ出し配置（ruby-overhang）", "category": "text", "description": "ruby-overhangは、ルビ文字が base より幅広いときに隣の文字の上へはみ出してよいかを指定する。autoなら隣接する空白や約物の上に自然にはみ出し、noneなら要素の幅の中に収まるよう詰め込まれる。", "useCase": "短い漢字1字に長い読みを付けるとき、行間の詰まった本文でルビ同士がぶつからないように制御したい場面。", "code": "ruby { ruby-overhang: auto; } /* 隣へはみ出しを許可 */\n.tight ruby { ruby-overhang: none; } /* 幅の中に収める */", "tags": [ "CSS", "日本語", "ふりがな", "先端" ], "support": "限定対応", "svg": "字", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "word-break-auto-phrase", "ruby-group-jukugo", "text-orientation-upright", "unicode-range-subset" ] }, { "id": "text-emphasis-dots", "num": "W-245", "name": "Text Emphasis Marks", "nameJa": "圏点・傍点（文字上の強調点）", "category": "text", "description": "text-emphasisで、文中の特定の文字だけに小さな点や三角を打って強調する日本語の伝統的な傍点表現。filled sesameやfilled dotなど記号の形と色をCSSだけで指定でき、太字や下線と違って字面を崩さずに強調できる。", "useCase": "小説的なテキストで特定の語だけに視線を誘導したいとき、注意書きの重要語を目立たせたいときに使う。", "code": ".wj-emph{\n text-emphasis: filled sesame var(--w-amber,#ffc857);\n text-emphasis-position: over;\n}", "tags": [ "CSS", "日本語", "強調", "タイポグラフィ", "さりげない" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "vertical-writing", "outline-text-bg", "text-box-trim", "text-autospace" ] }, { "id": "text-combine-upright", "num": "W-246", "name": "Tate-Chu-Yoko (Combine Upright)", "nameJa": "縦中横（縦書き中の数字を横向きに収める）", "category": "text", "description": "text-combine-upright: allで、縦書きの中に出てくる短い数字やアルファベットを1文字分の枠に横向きのまま収める「縦中横」を実装する。桁数の多い数字を1文字ずつ縦に並べず、読みやすい横並びのまま縦書きの流れに埋め込める。", "useCase": "縦書きの本文中に出てくる西暦・電話番号・略号などの2〜4桁の数字を、縦書きのリズムを崩さず自然に見せたいとき。", "code": ".tcu-vert{\n writing-mode: vertical-rl;\n}\n.tcu-num{\n text-combine-upright: all;\n}", "tags": [ "CSS", "縦書き", "日本語", "数字", "和風" ], "support": "広く対応", "svg": "231マス分", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "text-orientation-upright", "vertical-embed-override", "font-feature-vert-vkrn", "font-feature-pwid" ] }, { "id": "word-break-auto-phrase", "num": "W-247", "name": "Phrase-Based Line Breaking", "nameJa": "文節改行（word-break: auto-phrase）", "category": "text", "description": "word-break: auto-phraseは、lang=\"ja\"の文章を形態素解析し、文節の途中で行が折り返らないよう自動調整する。今までは助詞の直前で改行されて読みにくくなることがあったが、意味のまとまりを保ったまま折り返せる。", "useCase": "幅の狭いカードやスマホ幅の見出し・キャプションで、日本語の文節が不自然な位置でちぎれるのを防ぎたいとき。", "code": ".wba-phrase{\n word-break: auto-phrase;\n}\n/* lang=\"ja\" が指定された要素にのみ効果がある */", "tags": [ "CSS", "日本語", "改行", "可読性", "先端" ], "support": "限定対応", "svg": "文節の途中で分断文節の切れ目で改行", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "ruby-overhang", "line-break-strict", "text-autospace", "text-orientation-upright" ] }, { "id": "line-break-strict", "num": "W-248", "name": "Line Break Strictness", "nameJa": "禁則の強さ調整（line-break）", "category": "text", "description": "line-breakは、行頭に句読点や小書き文字を置かない禁則処理の厳しさを4段階で切り替える。strictは新聞のように最も厳格な禁則、looseは短い行幅でも詰まりすぎないゆるい禁則にする。", "useCase": "見出しの折り返しは行末の記号をやや許容したい、本文は厳格な禁則で品位を保ちたいなど、要素ごとに禁則の厳しさを使い分けたいとき。", "code": ".wj-body{ line-break: strict; } /* 句読点の行頭禁止を厳格に */\n.wj-caption{ line-break: loose; } /* 狭い幅向けにゆるく */", "tags": [ "CSS", "日本語", "禁則処理", "改行", "整列" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "word-break-auto-phrase", "hanging-punctuation", "ruby-group-jukugo", "palt-tracking" ] }, { "id": "overflow-wrap-wbr", "num": "W-249", "name": "Manual Break Opportunities", "nameJa": "改行位置を明示的に制御（overflow-wrap / wbr）", "category": "text", "description": "overflow-wrap: anywhereは、URLやIDのように途中に区切りがない長い文字列でも強制的に折り返してはみ出しを防ぐ。逆に自然文ではを挟むことで、余分な空白を入れずに任意の位置だけへ改行の候補地点を用意できる。", "useCase": "狭いカードにURLや長い英数字の識別子を収めたいとき、日本語の長いカタカナ複合語の途中に改行してもよい箇所だけ指定したいとき。", "code": "

https://example.com/very/long/path

\n\n

今日のオススメアプリ

", "tags": [ "CSS", "HTML", "改行", "レイアウト", "はみ出し防止" ], "support": "広く対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-orientation-upright", "word-break-auto-phrase", "line-break-strict", "vertical-embed-override" ] }, { "id": "hanging-punctuation", "num": "W-250", "name": "Hanging Punctuation", "nameJa": "句読点のぶら下げ組み（hanging-punctuation）", "category": "text", "description": "hanging-punctuationは、行末の句読点をテキストボックスの外側へはみ出させ、文字の並びの右端をそろえて見せる組版技法。allow-endを指定すると、行末に来た「、」「。」が右マージンの外へぶら下がり、他の行と視覚的な右端がぴったり揃う。", "useCase": "雑誌的なエディトリアルLPや引用ブロックで、行末の見た目を厳密に整列させたい高級感のある本文レイアウトに使う。", "code": ".wj-hang{\n hanging-punctuation: allow-end;\n text-align: justify;\n}", "tags": [ "CSS", "日本語", "組版", "整列", "高級感" ], "support": "限定対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "palt-tracking", "line-break-strict", "text-spacing-trim", "vertical-writing" ] }, { "id": "text-spacing-trim", "num": "W-251", "name": "Punctuation Spacing Trim", "nameJa": "約物の前後アキ詰め（text-spacing-trim）", "category": "text", "description": "全角の括弧や句読点はグリフの内部に半角分の余白を持つため、続けて並ぶと間延びして見える。text-spacing-trimはその余白を規則に沿ってトリミングし、隣り合う約物どうしの間隔を締める。日本語と英数字の間隔を自動挿入するtext-autospaceとは逆に、約物どうしの余分な間隔を詰める側の調整。", "useCase": "括弧書きや記号が連続する見出し・キャプションで、約物の間が間延びして見えるのを引き締めたいとき。", "code": ".wj-trim{\n text-spacing-trim: space-first; /* 行頭以外の開き括弧を詰める */\n}", "tags": [ "CSS", "日本語", "組版", "約物", "すっきり" ], "support": "限定対応", "svg": "」（ の間を詰める", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "palt-tracking", "hanging-punctuation", "font-feature-pwid", "ruby-overhang" ] }, { "id": "text-orientation-upright", "num": "W-252", "name": "Upright Text Orientation", "nameJa": "縦書き中の英数字を直立させる（text-orientation）", "category": "text", "description": "縦書き（writing-mode: vertical-rl）の既定はtext-orientation: mixedで、英数字を90度横倒しにして縦の流れへ埋め込む。text-orientation: uprightに切り替えると、アルファベットも回転させず1文字ずつ直立させたまま縦に積む見た目になる。", "useCase": "縦書きの見出しでロゴやブランド名のアルファベットだけ横倒しにしたくない場合、縦組みの表の見出しラベルを直立のまま並べたい場合。", "code": ".wj-mixed{ text-orientation: mixed; } /* 英字は横倒し */\n.wj-upright{ text-orientation: upright; } /* 英字も直立 */", "tags": [ "CSS", "縦書き", "日本語", "レイアウト" ], "support": "広く対応", "svg": "A", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "vertical-embed-override", "logical-properties-vertical", "text-combine-upright", "font-feature-vert-vkrn" ] }, { "id": "font-feature-vert-vkrn", "num": "W-253", "name": "Vertical Glyph Substitution & Kerning", "nameJa": "縦書き専用のグリフ差し替えとカーニング（vert / vkrn）", "category": "text", "description": "font-feature-settingsの'vert'は、括弧や小書き仮名など縦書き専用に用意された字形へ自動で差し替えるOpenType機能。'vkrn'は縦方向に並んだ字間の詰まり過ぎ・空き過ぎを補正するカーニング。writing-mode: vertical-rlと組み合わせて使う。", "useCase": "縦書きの本文で丸括弧やかぎ括弧が横向きのまま表示されてしまう、字間が不揃いに見えるのを、対応フォントの力を借りて自動補正したいとき。", "code": ".wj-vert-body{\n writing-mode: vertical-rl;\n font-feature-settings: \"vert\" 1, \"vkrn\" 1;\n}\n/* 実際に効果が出るかはフォント側の対応次第 */", "tags": [ "CSS", "縦書き", "OpenType", "日本語", "フォント" ], "support": "広く対応", "svg": "「字」", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-orientation-upright", "vertical-embed-override", "text-combine-upright", "font-feature-pwid" ] }, { "id": "font-feature-pwid", "num": "W-254", "name": "Proportional Widths for Numerals & Kana", "nameJa": "数字・かなをプロポーショナル幅にする（pwid）", "category": "text", "description": "和文フォントの数字やかなは既定で全角の等幅グリッドに収まっているため、「1」と「8」のように線の量が違う文字でも同じ幅になり、間延びして見えることがある。font-feature-settings: \"pwid\"は文字ごとの自然な太さに応じたプロポーショナル幅の字形に差し替える。", "useCase": "見出しや価格表示で数字の並びを引き締めたいとき、かな交じりの文章を等幅の堅い印象から解放したいとき。", "code": ".wj-pwid{\n font-feature-settings: \"pwid\" 1;\n}", "tags": [ "CSS", "OpenType", "日本語", "数字", "すっきり" ], "support": "広く対応", "svg": "18", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-combine-upright", "text-spacing-trim", "font-feature-vert-vkrn", "font-variant-east-asian" ] }, { "id": "font-variant-east-asian", "num": "W-255", "name": "East Asian Glyph Variants", "nameJa": "旧字体・ルビ用字形の切り替え（font-variant-east-asian）", "category": "text", "description": "font-variant-east-asianは、同じ文字でもJIS規格の版によって異なる字形（jis78の旧字体やjis04の新字体など）や、ルビ表示に最適化した小さめで少し太いruby用字形へ切り替える。フォントがその字形バリエーションを収録している場合に有効になる。", "useCase": "屋号や固有名詞で意図的に旧字体の風合いを出したいとき、ルビの視認性を上げる専用グリフを使いたいとき。", "code": ".wj-old-style{\n font-variant-east-asian: jis78;\n}\n.wj-ruby-text{\n font-variant-east-asian: ruby;\n}", "tags": [ "CSS", "OpenType", "日本語", "旧字体", "和風" ], "support": "広く対応", "svg": "桧檜jis78 ⇄ jis04", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-combine-upright", "font-feature-vert-vkrn", "font-feature-pwid", "vertical-writing" ] }, { "id": "unicode-range-subset", "num": "W-256", "name": "Japanese Font Subsetting via unicode-range", "nameJa": "和文Webフォントの部分読み込み（unicode-rangeサブセット）", "category": "text", "description": "和文フォントは数千〜1万字を超えるグリフを持ち丸ごと読み込むと重い。同じfont-familyに対してunicode-rangeの異なる@font-faceを複数用意しておくと、ブラウザはページ内に実際に登場する文字を含む範囲のファイルだけを選んで読み込む。", "useCase": "ひらがな・カタカナ・常用漢字だけのサイトで、収録字数の多い明朝体やゴシック体を軽量に配信したいとき。", "code": "@font-face{\n font-family:\"WJFont\";\n src:url(\"wjfont-kana.woff2\") format(\"woff2\");\n unicode-range:U+3040-30FF; /* かな */\n}\n@font-face{\n font-family:\"WJFont\";\n src:url(\"wjfont-kanji.woff2\") format(\"woff2\");\n unicode-range:U+4E00-9FFF; /* 漢字 */\n}", "tags": [ "CSS", "Webフォント", "日本語", "パフォーマンス" ], "support": "広く対応", "svg": "かな漢字記号", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "font-metric-override", "ruby-overhang", "text-orientation-upright", "content-visibility" ] }, { "id": "font-metric-override", "num": "W-257", "name": "Font Metric Overrides for Fallback Matching", "nameJa": "フォールバックとのズレ吸収（size-adjust / ascent-override）", "category": "text", "description": "和文Webフォントの読み込み中はローカルのフォールバック書体で表示され、読み込み後に置き換わると行の高さや文字サイズがずれてガクッとレイアウトが動く。size-adjustでフォールバック側の文字サイズ比率を、ascent-overrideで上端の基準線をWebフォント側に近づけると、置き換わり時のズレを抑えられる。size-adjustは主要ブラウザに広く定着済みだが、ascent-overrideはSafari未対応のため@supportsで分けるのが安全。", "useCase": "読み込みに時間のかかる和文Webフォントを使うページで、表示中のガタつき（レイアウトシフト）を減らしたいとき。", "code": "@font-face{\n font-family:\"wj-fallback\";\n src:local(\"Hiragino Sans\");\n size-adjust: 92%;\n}\n@supports font-face(ascent-override:90%){\n @font-face{\n font-family:\"wj-fallback\";\n src:local(\"Hiragino Sans\");\n ascent-override: 90%;\n }\n}", "tags": [ "CSS", "Webフォント", "日本語", "パフォーマンス", "レイアウトシフト" ], "support": "限定対応", "svg": "", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "unicode-range-subset", "ruby-overhang", "text-orientation-upright", "text-emphasis-dots" ] }, { "id": "ruby-heading-reveal", "num": "W-258", "name": "Animated Ruby Heading Reveal", "nameJa": "ルビ付き見出しのアニメーション演出", "category": "text", "description": "のrt要素だけをCSSアニメーションの対象にして、見出しの本体が先に立ち上がり、ふりがなが一拍遅れてふわっと追いかけるように出現させる演出。ルビと本体を別レイヤーとして動かせるHTML標準のマークアップだからこそ可能な組み合わせ。", "useCase": "動画のオープニングテロップやLPのファーストビュー見出しで、難読な商品名・屋号にルビを添えつつ印象的に登場させたいとき。", "code": "@keyframes wj-rt-in{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }\nruby rt{ animation: wj-rt-in .5s .4s both; }", "tags": [ "CSS", "アニメーション", "ふりがな", "見出し", "印象的" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "typewriter", "ruby-overhang", "gradient-text", "blur-reveal-text" ] }, { "id": "canvas-measuretext", "num": "W-259", "name": "Canvas measureText / TextMetrics", "nameJa": "文字幅を測るmeasureText", "category": "text", "description": "ctx.measureText(text)は実際に描かずにその文字列の描画幅などをTextMetricsオブジェクトとして返す。widthのほか、actualBoundingBoxAscent/Descentで文字の実際の高さも取れるため、canvas上でテキストを中央揃えしたり、枠内に収まるようフォントサイズを自動調整したりする計算に使う。", "useCase": "canvas生成のOGP画像やバッジで、文字列の長さに応じて背景枠の幅を自動で合わせたいときに使う。", "code": "ctx.font = '24px sans-serif';\nconst m = ctx.measureText('WazaScout');\nconst w = m.width;\nconst h = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent;\nctx.fillRect(100 - w/2 - 8, 60 - h/2 - 4, w + 16, h + 8);\nctx.fillText('WazaScout', 100 - w/2, 60 + h/2);", "tags": [ "Canvas", "JavaScript", "テキスト", "文字幅", "測定" ], "support": "広く対応", "svg": "Wazametrics.width", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-ctx-filter", "canvas-getimagedata", "canvas-path2d", "offscreen-canvas-worker" ] }, { "id": "vertical-embed-override", "num": "W-260", "name": "Horizontal Islands in Vertical Text", "nameJa": "縦書き文書内の表・画像を横書きに戻す", "category": "layout", "description": "縦書きの記事内に表や画像・コードブロックを差し込むときは、その要素だけwriting-mode: horizontal-tbを指定して横書きに戻す。周囲は縦の流れのまま、埋め込んだ要素の中だけ通常の横組みで読める。", "useCase": "縦書きのエッセイ記事に、数値の表や図版キャプション、埋め込みツイートなど横書きのほうが読みやすい要素を挟みたいとき。", "code": ".wj-vert-article{\n writing-mode: vertical-rl;\n}\n.wj-vert-article table,\n.wj-vert-article img,\n.wj-vert-article pre{\n writing-mode: horizontal-tb;\n}", "tags": [ "CSS", "縦書き", "レイアウト", "日本語" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "text-orientation-upright", "logical-properties-vertical", "text-combine-upright", "font-feature-vert-vkrn" ] }, { "id": "logical-properties-vertical", "num": "W-261", "name": "Logical Properties for Vertical Writing", "nameJa": "縦書き対応のレイアウト設計（論理プロパティ）", "category": "layout", "description": "margin-inline-startやblock-sizeなどの論理プロパティは、writing-modeに応じて物理方向を自動で読み替える。縦書き（vertical-rl）ではinline軸が上下、block軸が左右に入れ替わるため、marginやwidthを物理方向（top/leftなど）で書き直さずに済む。", "useCase": "横書き用に組んだカードやボタンのCSSを、縦書きページでも margin-left や width の書き直しなしに使い回したいとき。", "code": ".wj-card{\n inline-size: 240px; /* 横書きではwidth、縦書きではheightに相当 */\n margin-block-start: 16px; /* 縦書きでは左マージンに相当 */\n}", "tags": [ "CSS", "縦書き", "レイアウト", "国際化" ], "support": "広く対応", "svg": "block-startinline-start縦書き時", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "vertical-embed-override", "text-orientation-upright", "vertical-scroll-snap", "text-combine-upright" ] }, { "id": "houdini-layout-animation-worklet", "num": "W-262", "name": "Layout Worklet / Animation Worklet Status", "nameJa": "Layout WorkletとAnimation Workletの現状", "category": "layout", "description": "CSS Houdiniにはこの2つも構想されている。Layout Worklet（registerLayout）はdisplay: layout(name)のように独自のレイアウトアルゴリズムをJSで定義できる仕組み、Animation Worklet（registerAnimator）はscrollTimelineなどメインスレッドと切り離した高性能なアニメーションを書ける仕組み。どちらもW3C Houdini Draftの段階で、Layout WorkletはMDNにも独立ページが無いほど実装が薄く、Chromeの実験的機能フラグを有効にしないと動かない。", "useCase": "現時点で本番のプロダクトに組み込む用途ではなく、「将来こうなる」を把握したうえでmasonryなどの独自レイアウトは今はCSS Grid Level 3のmasonry値やJSライブラリで代替する判断材料として使う。", "code": "// 有効化にはChromeの実験的フラグが必要（本番非推奨）\n// registerLayout('masonry-like', class { ... });\n// CSS: display: layout(masonry-like);\n\n// registerAnimator('scrollFade', class { ... });\n// CSS Animation Worklet も同様にドラフト段階", "tags": [ "CSS Houdini", "Layout Worklet", "Animation Worklet", "実験的" ], "support": "限定対応", "svg": "flagregisterLayout / registerAnimator", "useFor": [ "site" ], "weight": "脇役", "relatedIds": [ "houdini-paint-worklet", "css-registerproperty-js", "css-typed-om" ] }, { "id": "coordinate-grid-snap", "num": "W-263", "name": "Snap Coordinates to a Grid", "nameJa": "座標のグリッド吸着", "category": "layout", "description": "自由な位置の座標を、一定間隔(グリッド単位)の最も近い倍数に丸める処理。Math.round(値/単位)*単位という1行の式で、ノードの位置やサイズを見えない格子に揃えられる。図解では座標がバラバラだと余白が不揃いに見えるため、生成時点でこの処理を通しておくと整った印象になる。", "useCase": "図解やダイアグラムのノード配置、アイコンの整列など、複数の要素の位置を機械的に揃えて「そろっている」印象を作りたいときに使う。", "code": "function snap(value, unit = 20) {\n return Math.round(value / unit) * unit;\n}\n// snap(73, 20) -> 80\n// snap(58, 20) -> 60", "tags": [ "レイアウト", "図解", "グリッド", "座標計算", "そろう快感" ], "support": "広く対応", "svg": "73,5880,60", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "layered-hierarchy-layout", "polar-to-cartesian-layout", "aabb-overlap-detection", "grid-template-areas" ] }, { "id": "layered-hierarchy-layout", "num": "W-264", "name": "Layered Hierarchy Layout", "nameJa": "階層レイアウト（層ごとの配置）", "category": "layout", "description": "親子関係のあるノードを、上から下へ層(レイヤー)ごとにy座標を固定して並べる配置法。同じ層のノードは左端と右端を決め、その間をノード数で等分してx座標を求める。層をまたぐ辺はすべて上の層から下の層へ向かうという制約を守ると、線が絡み合わず読みやすい木構造やフローになる。", "useCase": "組織図、依存関係図、意思決定フローなど「誰が誰の下にいるか」がはっきりしている構造を、層ごとにきれいに整列させて描きたいときに使う。", "code": "// 層内でN個のノードを左端leftから右端rightまで等間隔に配置\nfunction layerX(i, n, left = 30, right = 210) {\n return n === 1 ? (left + right) / 2 : left + (i * (right - left)) / (n - 1);\n}\n// layerX(0, 3) -> 30, layerX(1, 3) -> 120, layerX(2, 3) -> 210\n// y座標は層ごとに固定値(topMargin + layerIndex * layerGap)を使う", "tags": [ "レイアウト", "図解", "組織図", "階層", "座標計算" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "coordinate-grid-snap", "polar-to-cartesian-layout", "aabb-overlap-detection", "vertical-embed-override" ] }, { "id": "polar-to-cartesian-layout", "num": "W-265", "name": "Polar-to-Cartesian Radial Layout", "nameJa": "放射配置（極座標→直交座標）", "category": "layout", "description": "中心の周りにN個のノードを均等な角度で配置する方法。角度をangle=-90°+i・360°/N(上を基準に時計回り)で求め、x=cx+r・cos(angle)、y=cy+r・sin(angle)で直交座標に変換する。極座標(角度と半径)で考えてから座標へ落とし込むことで、ノード数が変わっても同じ式で再配置できる。", "useCase": "中心ハブから複数の要素へ放射状に広がるダイアグラム、円環状のメニューやループ図で、ノードを等間隔に並べたいときに使う。", "code": "function polarNode(i, n, cx = 120, cy = 75, r = 55) {\n const angle = -Math.PI / 2 + i * ((2 * Math.PI) / n);\n return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];\n}\n// polarNode(0, 6) -> [120, 20]\n// polarNode(1, 6) -> [167.6, 47.5]", "tags": [ "レイアウト", "図解", "放射状", "ハブ&スポーク", "座標計算" ], "support": "広く対応", "svg": "", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "coordinate-grid-snap", "layered-hierarchy-layout", "aabb-overlap-detection", "connector-fan-attach" ] }, { "id": "aabb-overlap-detection", "num": "W-266", "name": "AABB Overlap Detection", "nameJa": "矩形の重なり判定", "category": "layout", "description": "回転していない矩形どうしが重なっているかを判定する最も基本的な方法。片方の左端が相手の右端より左、かつ右端が相手の左端より右、という条件をxとy両方の軸で確認し、4つの条件がすべて真なら重なっていると判定できる。座標を自動計算で決める図解で、ラベルや箱が意図せず重ならないかを事前にチェックするのに使える。", "useCase": "自動レイアウトで配置したノードやラベルどうしが重なっていないかを検証し、重なっていたら位置をずらす、といった自動配置ロジックの当たり判定に使う。", "code": "function isOverlapping(a, b) {\n return (\n a.x < b.x + b.width &&\n a.x + a.width > b.x &&\n a.y < b.y + b.height &&\n a.y + a.height > b.y\n );\n}\n// isOverlapping({x:150,y:30,width:50,height:40}, {x:175,y:50,width:50,height:40}) -> true", "tags": [ "レイアウト", "図解", "衝突判定", "自動配置" ], "support": "広く対応", "svg": "OK!重なりなし重なりあり", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "coordinate-grid-snap", "layered-hierarchy-layout", "polar-to-cartesian-layout", "vertical-embed-override" ] }, { "id": "canvas-path2d", "num": "W-267", "name": "Canvas Path2D", "nameJa": "再利用できるパス（Path2D）", "category": "shape", "description": "Path2Dは複雑な線や図形の輪郭を一度だけ組み立てて使い回せるオブジェクト。同じ形を何度も毎フレーム座標指定し直して描く代わりに、Path2Dを1個作っておきctx.fill(path)やctx.stroke(path)で使い回せるので、コードが整理され描画も軽くなる。SVGのpath dと同じ記法をnew Path2D('M...')で読み込むこともできる。", "useCase": "アイコンや星形など決まった形を画面内で何度も描画したいとき、同じ座標計算を繰り返さずに済ませたい場面で使う。", "code": "const star = new Path2D(\n 'M50 5 L61 38 L97 38 L68 59 L79 92 L50 71 L21 92 L32 59 L3 38 L39 38 Z'\n);\nctx.fillStyle = '#ffc857';\nctx.fill(star);\nctx.translate(120, 0);\nctx.fill(star);", "tags": [ "Canvas", "JavaScript", "Path2D", "図形", "再利用" ], "support": "広く対応", "svg": "1つのPath2Dを2回fill", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-ctx-filter", "canvas-getimagedata", "canvas-measuretext", "offscreen-canvas-worker" ] }, { "id": "canvas-svg-dom-tradeoff", "num": "W-268", "name": "Canvas vs SVG vs DOM", "nameJa": "Canvas・SVG・DOMの使い分けの判断軸", "category": "shape", "description": "3つとも画面に絵を出せるが性質が違う。DOM/SVGは1要素＝1オブジェクトとして残るため、個別にクリック判定やCSSアニメを当てやすく、画面拡大しても輪郭が滲まない（ベクター）が、要素数が数千に増えると描画・レイアウト計算が重くなる。Canvasは「絵の具で塗った跡」だけが残るビットマップで、要素という概念がないため大量描画に強い代わりに、1つ1つの図形にホバーやフォーカスを当てるには自分で当たり判定を書く必要がある。", "useCase": "数十個までの図形でクリックやアクセシビリティが要るならSVG／DOM、数百〜数万個の粒子やゲーム的な描画で個別操作が不要ならCanvasを選ぶ、という判断基準として使う。", "code": "// 目安\n// 図形が少なく、個別にクリック・aria属性が要る → SVG / DOM\n// 図形が多い、ピクセル単位の自由な描画が要る → Canvas\n// GPUで大量描画・シェーダー効果が要る → WebGL / WebGPU", "tags": [ "Canvas", "SVG", "DOM", "設計判断" ], "support": "広く対応", "svg": "DOMSVGCanvas", "useFor": [ "slide", "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-path2d", "canvas-ctx-filter", "svg-line-area-chart", "bar-chart-grid-vs-svg" ] }, { "id": "css-registerproperty-js", "num": "W-269", "name": "CSS.registerProperty()", "nameJa": "JSから動的に登録するカスタムプロパティ", "category": "motion", "description": "既存項目の「@propertyでカスタムプロパティをアニメ」がCSSファイルに書く静的な at-rule なのに対し、CSS.registerProperty()はJavaScriptから同じ登録を行う関数版。実行時の条件分岐で型（syntax）を変えたい場合や、コンポーネントのJS側で完結させたい場合に選ぶ。型付きで登録した変数はブラウザが数値やcolorとして補間できるようになり、無登録のカスタムプロパティでは不可能だった滑らかなトランジションが効くようになる。", "useCase": "JSで動的生成するコンポーネント（Web Componentsなど）の内部で、CSS変数のアニメーションを保証したいときに@propertyの代わりに使う。", "code": "CSS.registerProperty({\n name: '--angle',\n syntax: '',\n inherits: false,\n initialValue: '0deg'\n});\nel.style.setProperty('--angle', '0deg');\nel.style.transition = '--angle 1s ease';\nrequestAnimationFrame(() => el.style.setProperty('--angle', '360deg'));\n/* CSS: background: conic-gradient(from var(--angle), #8fe3d0, #ffc857); */", "tags": [ "CSS Houdini", "JavaScript", "カスタムプロパティ", "アニメーション" ], "support": "新しく普及中", "svg": "--angle: 0deg → 360deg", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-typed-om", "element-scoped-view-transition", "scroll-into-view-container", "houdini-layout-animation-worklet" ] }, { "id": "offscreen-canvas-worker", "num": "W-270", "name": "OffscreenCanvas + Worker", "nameJa": "ワーカーへ逃がすOffscreenCanvas", "category": "interact", "description": "canvas.transferControlToOffscreen()でcanvasの描画権をWeb Worker（メインスレッドとは別のJSスレッド）へ譲渡し、重い描画計算をUIスレッドの外で行う仕組み。メインスレッドはクリックやスクロールの処理に専念できるため、大量パーティクルや複雑なシェーダー処理をしても操作のカクつきが起きにくい。", "useCase": "背景アニメが重くてスクロールやボタン操作が一瞬固まる、というときに描画をワーカーへ逃がして体感速度を守りたい場面で使う。", "code": "// main.js\nconst offscreen = canvas.transferControlToOffscreen();\nconst worker = new Worker('render.js');\nworker.postMessage({ canvas: offscreen }, [offscreen]);\n\n// render.js (worker)\nonmessage = (e) => {\n const ctx = e.data.canvas.getContext('2d');\n (function tick(){\n ctx.clearRect(0,0,300,150);\n requestAnimationFrame(tick);\n })();\n};", "tags": [ "Canvas", "Worker", "JavaScript", "パフォーマンス", "スムーズ" ], "support": "広く対応", "svg": "mainworker", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-typed-om", "canvas-ctx-filter", "canvas-getimagedata", "canvas-measuretext" ] }, { "id": "css-typed-om", "num": "W-271", "name": "CSS Typed OM", "nameJa": "文字列を介さずCSS値を扱うTyped OM", "category": "interact", "description": "従来のel.style.width = '120px'のようなCSSOM操作は値が常に文字列で、毎回パースと単位変換のコストがかかっていた。CSS Typed OM（Typed Object Model）はel.attributeStyleMap.set('width', CSS.px(120))のように数値と単位を型付きオブジェクトとして扱い、加算・単位変換を文字列連結なしで行える。Firefoxの実装が一部インターフェースで未完成なため、現時点ではChromium系が主戦場。", "useCase": "canvasやWebGLと連携して毎フレームstyleを書き換えるような高頻度アニメーションで、文字列パースのオーバーヘッドを削りたいときに使う。", "code": "// 従来: 文字列の組み立てとパースが発生\nel.style.width = (el.style.width.replace('px','') * 1 + 10) + 'px';\n\n// Typed OM: 型付きの値を直接演算\nconst w = el.attributeStyleMap.get('width'); // CSSUnitValue\nel.attributeStyleMap.set('width', w.add(CSS.px(10)));", "tags": [ "CSS Houdini", "Typed OM", "JavaScript", "パフォーマンス" ], "support": "限定対応", "svg": "\"120px\"120px", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "css-registerproperty-js", "offscreen-canvas-worker", "youtube-facade", "navigation-api" ] }, { "id": "webgpu-status", "num": "W-272", "name": "WebGPU Status", "nameJa": "WebGPUの現状", "category": "depth", "description": "WebGPUはWebGLの後継として設計された低レベルGPU APIで、Direct3D 12・Metal・Vulkanなど現代のネイティブGPU APIに近い形でアクセスできる。描画だけでなく汎用計算（GPGPU）にも使え、navigator.gpu.requestAdapter()→requestDevice()という手順でGPUを取得する。2025年後半にChrome・Edge・Firefox・Safari全てで既定有効となり出そろったばかりの技術で、HTTPS必須（secure context限定）という制約もある。", "useCase": "WebGLでは重すぎる大量パーティクルや機械学習推論をブラウザ内で動かしたいとき。ただし対応が出そろってから日が浅いため、本番投入時はWebGLへのフォールバックを用意するのが安全。", "code": "if (!navigator.gpu) {\n // WebGLなど代替手段にフォールバック\n} else {\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n const ctx = canvas.getContext('webgpu');\n ctx.configure({ device, format: navigator.gpu.getPreferredCanvasFormat() });\n}", "tags": [ "WebGPU", "GPU", "GLSL", "先端" ], "support": "新しく普及中", "svg": "ChromeEdgeFirefoxSafari2025後半に既定有効が出そろい", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "webgl-fullscreen-shader", "ruby-overhang", "word-break-auto-phrase", "webgl-shader-noise-distortion" ] }, { "id": "lightweight-3d-modelviewer", "num": "W-273", "name": "Lightweight 3D with ", "nameJa": "軽量3D表示（）", "category": "depth", "description": "Googleが公開しているWeb Componentsライブラリで、と書くだけでglTF/GLBの3Dモデルを回転・ズーム操作つきで表示できる。内部ではThree.jsを使ってWebGLで描画し、camera-controlsやarで即AR表示にも対応する。フルスクラッチでthree.jsのシーン・カメラ・ライトを組むより、単発の商品ビューアなら圧倒的に少ないコードで済む。", "useCase": "ECサイトの商品を360度回転して見せたい、簡単な3Dビューアをフルスクラッチのthree.jsコードなしで埋め込みたいときに使う。", "code": "\n\n", "tags": [ "Web Components", "3D", "glTF", "WebGL", "軽量" ], "support": "広く対応", "svg": "<model-viewer src=\"model.glb\">", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "custom-elements-define", "shadow-dom-style-isolation", "slot-content-projection", "declarative-shadow-dom" ] }, { "id": "canvas-raf-loop", "num": "W-274", "name": "Canvas 2D Render Loop", "nameJa": "Canvasの描画ループ", "category": "background", "description": "canvasは1回描いたら終わりで、アニメさせるには「毎フレーム全部消して描き直す」のが基本形。requestAnimationFrame（略してrAF、ブラウザの描画タイミングに合わせて次フレームの処理を予約する仕組み）で自分自身を呼び直すループを作り、ループの先頭でclearRect（矩形範囲の塗りを消す命令）してから図形を描く。", "useCase": "パーティクルや波形などcanvasで動く背景・装飾を自作するときの土台になる。tabが非表示の間は自動で間引かれるため、CSSアニメより電力面で扱いやすい場合がある。", "code": "const c = document.querySelector('canvas');\nconst ctx = c.getContext('2d');\nlet x = 0;\nfunction tick(){\n ctx.clearRect(0, 0, c.width, c.height);\n x = (x + 2) % c.width;\n ctx.beginPath();\n ctx.arc(x, c.height/2, 10, 0, Math.PI*2);\n ctx.fill();\n requestAnimationFrame(tick);\n}\nrequestAnimationFrame(tick);", "tags": [ "Canvas", "JavaScript", "requestAnimationFrame", "背景", "ループ" ], "support": "広く対応", "svg": "clearRect → draw → rAF", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "particle-background", "canvas-ctx-filter", "canvas-dpr-scaling", "canvas-composite-blend" ] }, { "id": "canvas-dpr-scaling", "num": "W-275", "name": "Canvas High-DPI Scaling", "nameJa": "Canvasの高解像度(DPR)対応", "category": "background", "description": "canvasはwidth/height属性で決めたピクセル数をそのままCSSサイズに引き伸ばすため、何もしないとRetinaディスプレイでにじむ。window.devicePixelRatio（1論理pxに対する実ピクセル数）の分だけ内部解像度を大きく確保し、ctx.scale()で座標系を元に戻すことで、見た目のサイズは変えずに描画だけを高精細にする。", "useCase": "ロゴ・アイコン・グラフなど輪郭の鮮明さが重要なcanvas描画を、高DPI端末でもにじませずに出したいときに使う。", "code": "const dpr = window.devicePixelRatio || 1;\nconst rect = canvas.getBoundingClientRect();\ncanvas.width = rect.width * dpr;\ncanvas.height = rect.height * dpr;\ncanvas.style.width = rect.width + 'px';\ncanvas.style.height = rect.height + 'px';\nctx.scale(dpr, dpr);", "tags": [ "Canvas", "JavaScript", "devicePixelRatio", "高解像度", "くっきり" ], "support": "広く対応", "svg": "1x2x", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-ctx-filter", "canvas-raf-loop", "canvas-composite-blend", "canvas-getimagedata" ] }, { "id": "canvas-composite-blend", "num": "W-276", "name": "Canvas globalCompositeOperation", "nameJa": "Canvasの合成モード（globalCompositeOperation）", "category": "background", "description": "新しく描く図形を、すでに描かれている内容とどう混ぜ合わせるかを指定するプロパティ。source-over（上書き、既定）のほかmultiply（乗算で暗く重ねる）やscreen（加算的に明るく重ねる）、destination-out（重なった部分をくり抜く）などがあり、CSSのmix-blend-modeと同じ語彙を共有する。", "useCase": "光の粒が重なるほど明るくなるパーティクル演出や、円をくり抜いてスポットライト状の穴を開ける表現をcanvas側だけで完結させたいときに使う。", "code": "ctx.fillStyle = '#8fe3d0';\nctx.beginPath(); ctx.arc(90, 75, 40, 0, Math.PI*2); ctx.fill();\n\nctx.globalCompositeOperation = 'screen';\nctx.fillStyle = '#ffc857';\nctx.beginPath(); ctx.arc(130, 75, 40, 0, Math.PI*2); ctx.fill();\nctx.globalCompositeOperation = 'source-over';", "tags": [ "Canvas", "JavaScript", "合成", "ブレンド", "光" ], "support": "広く対応", "svg": "globalCompositeOperation = \"screen\"", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "canvas-ctx-filter", "canvas-raf-loop", "canvas-dpr-scaling", "canvas-getimagedata" ] }, { "id": "canvas-ctx-filter", "num": "W-277", "name": "Canvas 2D Context Filter", "nameJa": "Canvasのフィルター効果（ctx.filter）", "category": "background", "description": "ctx.filterはCSSのfilterプロパティと同じ構文（blur()やdrop-shadow()、sepia()など）をcanvasの描画にそのまま適用できるプロパティ。図形を描く前に指定しておくと、以後の描画にフィルターがかかった状態で焼き込まれる。ただしSafariは長らく未実装で、2026年時点でも主要3エンジンのうち1つが対応していない状態が続く。", "useCase": "canvasで描いた図形やテキストにぼかしや影をその場でかけたいとき。Safariを含めて確実に効かせたい場合はCSS filterや自前のfeGaussianBlur合成に切り替える必要がある。", "code": "ctx.filter = 'blur(4px)';\nctx.fillStyle = '#8fe3d0';\nctx.fillRect(60, 40, 80, 60);\n\nctx.filter = 'none';\nctx.fillStyle = '#ffc857';\nctx.fillRect(160, 40, 40, 60);", "tags": [ "Canvas", "JavaScript", "フィルター", "ぼかし" ], "support": "限定対応", "svg": "Chrome/FirefoxSafari 非対応", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "canvas-getimagedata", "canvas-raf-loop", "canvas-dpr-scaling", "canvas-composite-blend" ] }, { "id": "webgl-fullscreen-shader", "num": "W-278", "name": "WebGL Fullscreen Shader Background", "nameJa": "フルスクリーンのシェーダー背景", "category": "background", "description": "画面いっぱいの四角形（三角形2枚）だけをジオメトリとして用意し、色や模様はすべてフラグメントシェーダー（画面の1ピクセルごとに実行される色計算プログラム）側で生成する手法。頂点シェーダーは座標をそのまま渡すだけの最小構成にし、時間経過を表すuniform（JS側からシェーダーへ渡す変数）を毎フレーム更新して模様を動かす。", "useCase": "パーティクルやDOM要素を1つも使わず、GPU計算だけで滑らかに変化するヒーローセクションの背景を作りたいときに使う。", "code": "// 頂点シェーダー：全画面を覆う1枚の三角形を渡すだけ\nattribute vec2 position;\nvoid main(){ gl_Position = vec4(position, 0.0, 1.0); }\n\n// フラグメントシェーダー：ピクセルごとに色を計算\nprecision mediump float;\nuniform vec2 uResolution;\nuniform float uTime;\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uResolution;\n vec3 col = 0.5 + 0.5*cos(uTime + uv.xyx*6.0 + vec3(0,2,4));\n gl_FragColor = vec4(col, 1.0);\n}", "tags": [ "WebGL", "GLSL", "シェーダー", "背景", "GPU" ], "support": "広く対応", "svg": "gl_FragColor(uv, uTime)", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "webgl-shader-noise-distortion", "webgpu-status", "houdini-paint-worklet", "canvas-raf-loop" ] }, { "id": "webgl-shader-noise-distortion", "num": "W-279", "name": "Shader Noise & Distortion", "nameJa": "シェーダーによるノイズ・歪み表現", "category": "background", "description": "フラグメントシェーダーの中でsin/cosを組み合わせた擬似ノイズ関数を書き、UV座標（0〜1に正規化したピクセル位置）自体を時間で揺らしてからテクスチャや色を参照すると、水面や熱ゆらぎのような歪みになる。CSSのfeTurbulenceがピクセル単位のノイズ画像を事前生成するのに対し、こちらは毎フレームGPUで数式から直接計算する点が違う。", "useCase": "流体風の背景や、画像・映像に熱ゆらぎ／グリッチ的な歪みを重ねたいときに使う。粒子数を増やしても負荷が一定なのが強み。", "code": "precision mediump float;\nuniform float uTime;\nuniform vec2 uResolution;\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uResolution;\n uv.x += sin(uv.y * 10.0 + uTime) * 0.02;\n uv.y += cos(uv.x * 10.0 + uTime) * 0.02;\n float n = fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453);\n gl_FragColor = vec4(vec3(n), 1.0);\n}", "tags": [ "WebGL", "GLSL", "ノイズ", "歪み", "流体風" ], "support": "広く対応", "svg": "uv += sin/cos(uTime)", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "webgl-fullscreen-shader", "webgpu-status", "lightweight-3d-modelviewer", "turbulence-wobble" ] }, { "id": "houdini-paint-worklet", "num": "W-280", "name": "CSS Paint API (Paint Worklet)", "nameJa": "CSS Paint APIで背景を自前生成する", "category": "background", "description": "CSS Houdini（CSSのレンダリング過程をJSに開放する仕様群）の一部。JSでregisterPaint()を使い、canvasの2D描画命令にそっくりなAPIでbackground-image用の画像をその場で生成する。paint()関数として呼び出すとCSS変数の変化にも自動で追従し、通常のbackground-imageより動的な模様が作れる。Chromium系のみの実装で、FirefoxとSafariは未対応。", "useCase": "枠線や背景に、CSS変数で色を差し替えられる独自パターン（チェックや斜線など）を画像ファイルなしで持たせたいときに使う。非対応ブラウザ向けには通常の背景色をフォールバックとして必ず用意する。", "code": "// paint-worklet.js\nregisterPaint('stripes', class {\n static get inputProperties(){ return ['--stripe-color']; }\n paint(ctx, size, props){\n const c = props.get('--stripe-color').toString();\n ctx.fillStyle = c;\n for (let x = 0; x < size.width; x += 16) {\n ctx.fillRect(x, 0, 8, size.height);\n }\n }\n});\n// main.js\nCSS.paintWorklet.addModule('paint-worklet.js');\n/* CSS: background-image: paint(stripes); */", "tags": [ "CSS Houdini", "Paint Worklet", "背景", "実験的" ], "support": "限定対応", "svg": "background-image: paint(stripes)", "useFor": [ "lp", "site" ], "weight": "主役", "relatedIds": [ "houdini-layout-animation-worklet", "canvas-raf-loop", "webgl-fullscreen-shader", "css-registerproperty-js" ] }, { "id": "svg-sparkline", "num": "W-281", "name": "Hand-Coded Sparkline", "nameJa": "座標を手計算するミニ折れ線グラフ", "category": "component", "description": "スパークラインは軸も目盛りも持たない、文中や表のセルに収まる極小の折れ線グラフ。データの配列を「x: 等間隔に割り振る」「y: 値を反転して高さに変換する」という2つの計算だけでpolylineやpath用の座標列に変換できれば、ライブラリなしで自作できる。線の下を塗ればエリアチャート風に、終点にだけ丸を置けば「現在値」を強調できる。", "useCase": "ダッシュボードの数値カードやテーブルの1行に、直近の推移をひと目で添えたいときに使う。", "code": "// values=[70,90,65,105,85,120,100] を x:20-220, y:40-115 に変換\nconst pts = values.map((v,i) => {\n const x = 20 + i * (200 / (values.length - 1));\n const y = 115 - (v - min) / (max - min) * 75;\n return `${x},${y}`;\n}).join(' ');\n// ", "tags": [ "SVG", "スパークライン", "データ可視化", "ダッシュボード", "座標計算" ], "support": "広く対応", "svg": "直近7日間", "useFor": [ "slide", "lp", "site" ], "weight": "主役", "relatedIds": [ "svg-line-area-chart", "bar-chart-grid-vs-svg", "svg-gauge-meter", "circular-progress" ] }, { "id": "custom-elements-define", "num": "W-282", "name": "customElements.define()", "nameJa": "独自タグを定義するcustomElements.define", "category": "component", "description": "HTMLElementを継承したクラスを書き、customElements.define('my-button', MyButton)のように登録すると、という自作のHTMLタグがそのまま使えるようになる。connectedCallback（DOMに挿入された瞬間に呼ばれる）やattributeChangedCallback（監視対象の属性が変わった瞬間に呼ばれる）などのライフサイクルフックを使い、フレームワークなしで再利用可能な部品を作れる。", "useCase": "React/Vueなど特定フレームワークに縛られず、複数のプロジェクトやCMSへそのまま貼り付けて使えるUI部品（バッジ、カウントダウン、タブ等）を作りたいときに使う。", "code": "class HelloBadge extends HTMLElement {\n connectedCallback(){\n this.textContent = 'Hello, ' + (this.getAttribute('name') || 'world');\n }\n}\ncustomElements.define('hello-badge', HelloBadge);\n// HTML: ", "tags": [ "Web Components", "JavaScript", "カスタム要素", "部品化" ], "support": "広く対応", "svg": "class<my-tag>customElements.define()", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "shadow-dom-style-isolation", "slot-content-projection", "declarative-shadow-dom", "adopted-stylesheets" ] }, { "id": "shadow-dom-style-isolation", "num": "W-283", "name": "Shadow DOM Style Isolation", "nameJa": "Shadow DOMによるスタイルの隔離", "category": "component", "description": "element.attachShadow({mode:'open'})で作るshadow root（要素にぶら下がる独立したミニDOMツリー）の中に書いたCSSは外のページに漏れず、逆にページ側の汎用セレクタ（div{...}など）もshadow rootの中には届かない。mode: 'open'はJSのshadowRootプロパティから中身を覗けるが、'closed'にすると外部から一切参照できなくなる。", "useCase": "配布用ウィジェットや埋め込みスクリプトなど、設置先サイトの既存CSSと衝突させたくない部品を作るときに使う。", "code": "const host = document.createElement('div');\nconst root = host.attachShadow({ mode: 'open' });\nroot.innerHTML = `\n \n

ページ側のCSSの影響を受けない

\n`;\ndocument.body.appendChild(host);", "tags": [ "Web Components", "Shadow DOM", "スタイル隔離", "コンポーネント" ], "support": "広く対応", "svg": "page CSS: p { color: red }#shadow-rootp", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "slot-content-projection", "declarative-shadow-dom", "adopted-stylesheets", "host-part-slotted-styling" ] }, { "id": "slot-content-projection", "num": "W-284", "name": " Content Projection", "nameJa": "で外側のHTMLを差し込む", "category": "component", "description": "shadow root内にを置いておくと、その場所にカスタム要素タグの内側（light DOMと呼ばれる、利用者が書いたHTML）がそのまま差し込まれる。name属性を付けた名前付きslotを使えば、見出し用・本文用のように複数箇所へ振り分けて配置することもできる。", "useCase": "見た目の骨組みはコンポーネント側で固定しつつ、中身のテキストや画像だけ使う側に自由に書かせたいカードやモーダルを作るときに使う。", "code": "// shadow root側\nroot.innerHTML = `\n
\n \n \n
`;\n\n// 呼び出し側HTML\n// \n//

見出し

\n//

ここが既定のslotに入る本文

\n// ", "tags": [ "Web Components", "Shadow DOM", "slot", "コンポーネント" ], "support": "広く対応", "svg": "light DOM<slot>", "useFor": [ "lp", "site" ], "weight": "脇役", "relatedIds": [ "shadow-dom-style-isolation", "declarative-shadow-dom", "adopted-stylesheets", "host-part-slotted-styling" ] }, { "id": "declarative-shadow-dom", "num": "W-285", "name": "Declarative Shadow DOM", "nameJa": "宣言的Shadow DOM（サーバーサイド対応）", "category": "component", "description": "従来のShadow DOMはattachShadow()というJS呼び出しが必須で、JSが読み込まれるまで中身が表示されなかった。