コピーして、
すぐ使える。
動くパーツの
お弁当箱。
モーダル・タブ・トースト・スクロール演出…。HTML/CSS/JSを「全部コピー」して1回貼るだけで動く、バニラJavaScriptのUIパーツをぎゅっと詰め込みました。依存ライブラリはゼロで、設定コードも不要です。
15のお弁当箱から選ぶ
タイルをクリックすると、そのカテゴリのパーツ一覧へ移動します。プレビューは実際に動き、コードはすべてコピーできます。
該当するパーツが見つかりませんでした。
たった3ステップ
モーダル・タブ・トーストなど、欲しい動きのカテゴリを開きます。プレビューは実際にクリックして動きを確かめられます。
「全部コピー」ボタンを押すと、HTML・CSS・JavaScriptがひとつの自己完結ブロックになってクリップボードへコピーされます。3回に分けて貼る必要はなく、1回のペーストで完了します。
自分のHTMLに貼り付けるだけです。data属性で自動初期化されるので、設定コードは要りません。色や速さはあとから自由に調整できます。
💡 ヒント: まず試すなら「全部コピー」で十分です。本番サイトに組み込むときは、CSSはスタイルシートへ・JSは共通ファイルへと「分けて貼る」と管理がしやすくなります（詳しくは各パーツページの解説へ）。
AIコーディングと組み合わせる
コピペ素材は、バイブコーディングの指示材料としても使えます。パーツを言葉で説明する代わりに、このサイトを「共通言語」にしてください。
Claude CodeやCursorのように、Webページを読めるAIコーディングツールには、「parts/modal.html の『ボトムシート』をこのサイトに適用して」のように、ページURLとパーツ名だけで指示できます。パーツ名は日本語で一意なので、そのまま指示語として機能します。
例：「このURLの『時間差ポップアップ』を、うちのサイトのトーンに合わせて実装して」
AIがWebを読めない環境でも、「全部コピー」で取得したHTML・CSS・JavaScriptの自己完結ブロックをチャットに貼り付ければ確実です。「ブランドカラーに合わせて調整して」「Reactコンポーネントに書き換えて」など、動くコードを出発点にすると手戻りが減ります。
AIが読めるかどうか分からないときは、こちらの「貼り付け型」が確実です。
※ AIが改変したコードを公開ページで使う前には、必ず表示と動作の確認を行ってください。特にフォームや外部サービスと連携する部分は、実際の環境でのテストをおすすめします。
実は、このページもJSでできている。
いま見ているこのトップページでも、当サイトのパーツと同じ仕組みのJavaScriptがあちこちで動いています。たとえば——読了プログレスバー
🍱 Web BENTO JS — このトーストも parts/toast.html と同じ仕組みです↟ 右下の「トップへ戻る」600pxスクロールで出現します → スクロールUI ⌕ タイルの検索・お気に入り絞り込みとlocalStorage保存 → 実用スクリプト
ダーク切替（localStorage保存）や、この見出し横のタイプライターもぜんぶ収録パーツと同じ考え方です。このサイト自体が動くサンプルです。
人気のパーツを味見
Web BENTO JSとは？ — コピペで動くJavaScript UIパーツ集
Web BENTO JS（ウェブベントー ジェイエス）は、Webサイトでよく使う「動き」のあるUIパーツを「お弁当箱」のように詰め込んだ、コピー&ペーストだけで動くJavaScriptスニペット集です。モーダル・タブ・アコーディオン・トースト通知・スクロール演出など、全15カテゴリ・180パーツ以上を収録しています。
すべてのパーツは依存ライブラリゼロのバニラJavaScriptで実装されています。jQueryやフレームワークの読み込みは一切不要で、data-bnto-* 属性による自動初期化式のため、貼り付けた瞬間から動きます。初期化済みの要素はスキップされるので、複数設置してもコードを2回貼っても壊れません。
各パーツの「全部コピー」ボタンを押せば、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされ、1回の貼り付けで完成します。クラス名には bnto- プレフィックスが付いているため、既存サイトのスタイルとも衝突しにくい設計です。
こんな場面で活躍します
- LP・コーポレートサイト制作 — モーダルやタブ、スクロール出現アニメを数分で組み込んで、制作時間を短縮できます。
- jQuery卒業・軽量化 — ライブラリに頼っていたUIを、依存ゼロのバニラJSに置き換えられます。
- JavaScript学習 — 実際に動くサンプルとコードを見比べながら、DOM操作やイベント処理の定石を学べます。
よくある質問
コピーしたコードはそのまま動きますか？
jQueryなどのライブラリは必要ですか？
商用サイトでも無料で使えますか？
どんなパーツがありますか？
AIコーディングツールと組み合わせて使えますか？
WordPressに貼り付けたのに表示・動作しません。
<style> や <script> を自動で除去・変換することがあります。次の順にお試しください。① 通常の段落ではなく、ブロックエディタなら「カスタムHTML」ブロック、クラシックエディタなら「テキスト（コード）」タブに貼ってください（段落に貼ると記号が変換され、レイアウトが崩れます）。
② HTMLとCSSは表示されるのにJavaScriptだけ動かない場合は、WordPressが
<script> を削除している可能性が高いため、WPCodeなどのコードスニペット用プラグインを使うか、テーマの適切な位置に読み込ませてください。③ キャッシュ系・最適化系プラグインをお使いの場合は、キャッシュを削除し、対象ページでJS/CSSの結合・圧縮（minify）を一時的にオフにしてお試しください。
④ 見た目が崩れる場合はテーマCSSの競合が考えられます（パーツのクラス名は
bnto- で始まり衝突しにくくしています）。解決しない場合は、ブラウザの検証ツール（F12）のコンソールにエラーが出ていないかもご確認ください。