moatway library のスニペット集とは
moatway library のスニペット集は、Web 制作の現場で「あの動き、コピペで欲しい」となった瞬間にすぐ取り出せる、ボタン・カード・フォーム・モーダル・アニメーション・レイアウトなどの実装サンプル集です。すべての項目は 1 スニペット = 1 ページで個別に公開し、ライブプレビュー・HTML / CSS / JavaScript のコード切替・ワンクリックコピーまで用意しています。サンプルコードは moatway が自作したものを中心に、参考にした出典は「inspired by」として明示しています。
カテゴリと subcategory の使い分け
- UI コンポーネント — ボタン / カード / フォーム / モーダル / ナビ / タブ / アコーディオン / ツールチップなど、画面上の構成要素単位
- アニメーション — hover アニメ / loading（スピナー・スケルトン） / scroll 連動 / transition / グラデーション動き / SVG 描画など
- レイアウト — ヒーロー / グリッド / Flexbox / sticky-sidebar / masonry / 2 カラム記事レイアウトなど
- インタラクション — slider / drag & drop / parallax / cursor / smooth scroll / dark mode 切替など
- ユーティリティ — copy-button / show-password / form-validation / accordion (details) / tabs (CSS-only) などの「あると助かる」系
使い方（コピペの流れ）
- 上の検索・フィルタチップで目的の動きや要素を絞り込む
- 気になるカードをクリックして詳細ページへ
- プレビューで動作を確認し、HTML / CSS / JavaScript タブを切替えながらコピー
- 自分のプロジェクトに貼り、クラス名・色・余白を調整するだけ
サルワカ / copypet との違い
サルワカや copypet.jp のような国内コピペ集は「1 ページに数十〜数百個」を集約しているため、特定の動きを探すには長いページ内検索が必要になります。moatway library は 1 スニペットを 1 ページに切り出す運用にすることで、検索エンジンから直接「目的の実装サンプル」に着地できるようにしています。ページ内には動くプレビューを必ず置いてあり、貼る前に挙動を確認できる点も差別化ポイントです。
ライセンスと出典
本スニペット集は moatway が自作したコードを中心に公開しています。アイデアの元となった CodePen / 既存サイト等がある場合は inspired_by として明示し、商用・個人問わずコピー利用 OK としています。MIT / Apache ライセンス品を引用している場合のみ mit_licensed を明示します。サイト本体のソースコード一式・データセットの大量複製・ミラーサイト化は 利用規約で禁じていますのでご注意ください。