Collections
目的から探す
用途の入口から辿れます。中身は、プレビューしながらコピーできる既存のCSS・UIカタログです。
まず「動くCSS / 操作できるUI / 静的パーツ」で絞ると探しやすいです
© DDP.INC · 掲載コードは独自実装です
よくある質問（FAQ）
CSS初心者でも使えますか？
はい。まずは「動くCSS」のフェードインやホバーをプレビューで見て、コピーして自分のHTMLに貼るだけで学べます。分類の導入文とカードの「解説」で、使う場面も短く説明しています。
実装前の確認用（コーダー向け）にも使えますか？
使えます。デザインの動きがCSSだけで再現できるか、ホバーや開閉の感触はどうかを、プレビューで先に確認してから実装に入れます。ライブラリを増やせない案件の差分確認にも向いています。
ライブラリを丸ごと入れる必要がありますか？
不要です。このページは日本語で探しやすく、プレビューしながら必要なCSSだけコピペする学習・実装向けUI集です。依存を増やさず、差分の小さい組み込みができます。
JavaScriptは必要ですか？
登場・ループ・ホバーなど多くの動くCSSはCSSだけで動作します。ハンバーガー、星評価、ドロップダウンはチェックボックスや details だけで動きます。タブやモーダル、「続きを読む」、数量ステッパー、パスワード表示、ビフォーアフターは、状態切替にごく少量のJSが必要な場合があります。
勉強の順番のおすすめは？
①フェードイン／フェードアップ → ②ホバー（リフト） → ③静的グラデーション（文字・枠） → ④ローディング → ⑤続きを読む・タブ、の順がわかりやすいです。動くグラデや3D、無限ループは後回しにすると、学習コストとサイトのうるささを抑えられます。
商用サイトに使えますか？
はい。掲載コードは独自実装のサンプルです。プロジェクトのライセンス方針に合わせてご利用ください。
PageSpeed（表示速度）は落ちませんか？
コピーして自分のサイトに入れる分は、transform / opacity の動きと静的なグラデーションが軽いです。動くグラデ、filter、mask、無限ループは必要な箇所だけにしてください。このカタログはプレビュー用に件数が多いので、全件を埋め込まず、使うカードだけ持ち帰るのが前提です。
スクロールで出したい場合は？
IntersectionObserver で要素が見えたときにクラスを付与すると、登場系アニメをスクロール連動にできます。学習では「見えるタイミングでclassを足す」と覚えると理解しやすいです。
動きをOFFにできますか？
@media (prefers-reduced-motion: reduce) で animation / transition を無効化できます。アクセシビリティ対応としても重要です。
Webパーツと静的パーツの違いは？
Webパーツは、見出し・ボタン・フォームなど部品カテゴリで辿る一覧です。静的パーツ（見た目）は「動かない見た目サンプル」として分類したグループです。グラデーションは静的パーツのタグにあり、検索欄に「グラデーション」と入れても見つかります。
お気に入りは会員登録が必要ですか？
不要です。ハートで追加すると、このブラウザ内に保存されます。別端末や別ブラウザには引き継がれません。需要が増えたらアカウント連携を足す想定です。
グラデーションはどこにありますか？
静的パーツの「グラデーション」タグ、または検索「グラデーション」「グラデ」です。文字・枠・繰り返し・透明フェードなど、手法別に分かれています。動くグラデは負荷が上がりやすいので、案件では静的から選ぶのが安全です。
実装前チェックから、
学習サポートまで。
ページの使い方だけでなく、制作・実装の相談も受けています。目的に合わせて選んでください。
- 実装前チェックデザインの動きがCSSだけで足りるか、軽量に組めるかを事前確認
- 学習サポートオンラインで、必要な動きだけ身につける個別サポート
- 教材・研修化社内向け教材、コーダー研修、スクール教材への展開
- サイト制作・改善LP／コーポレートへの組み込み、PageSpeedを意識した実装
オンライン対応 · 制作案件との組み合わせ可