コピーして、
すぐ使える。
Webパーツの
お弁当箱。
グラデーション・見出し・ボタン・グラスモーフィズム…。そのまま貼れるHTML/CSSを、お弁当箱みたいにぎゅっと詰め込みました。気に入ったパーツを選んで、コピーするだけ。
16のお弁当箱から選ぶ
タイルをクリックすると、そのカテゴリのパーツ一覧へ。コードはすべてコピーできます。
該当するパーツが見つかりませんでした。
たった3ステップ
グラデ・ボタン・見出しなど、欲しいパーツのカテゴリを開きます。
気に入ったパーツの「コピー」ボタンを押すと、HTML/CSSがクリップボードへ。シャッフルで色や形のバリエーションも試せます。
自分のHTMLに貼り付けるだけ。色やサイズはあとから自由に調整できます。
AIコーディングと組み合わせる
コピペ素材は、バイブコーディングの指示材料としても使えます。パーツを言葉で説明する代わりに、このサイトを「共通言語」にしてください。
Claude CodeやCursorのように、Webページを読めるAIコーディングツールには、「parts/card.html の『チケット風』を適用して」のように、ページURLとパーツ名だけで指示できます。パーツ名は日本語で一意なので、そのまま指示語として機能します。
例：「このURLの『リボン（カード角）』を、商品カードに合わせて実装して」
AIがWebを読めない環境でも、各パーツの「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付ければ確実です。「ブランドカラーに合わせて調整して」「もう少し角丸を強くして」など、動くコードを出発点にすると手戻りが減ります。
AIが読めるかどうか分からないときは、こちらの「貼り付け型」が確実です。
※ AIが改変したコードを公開ページで使う前には、必ず表示と動作の確認を行ってください。特にフォームや外部サービスと連携する部分は、実際の環境でのテストをおすすめします。
人気のパーツを味見
Web BENTOとは？ — コピペで使えるHTML/CSSパーツ集
Web BENTO（ウェブベントー）は、Webサイト制作でよく使う装飾パーツを「お弁当箱」のように詰め込んだ、コピー&ペーストで使えるHTML/CSSスニペット集です。ボタン・見出し・グラデーション・カード・ローディングアニメーションなど、全16カテゴリ・192パーツ以上を収録しています。
すべてのパーツは画像を使わないピュアCSSで実装されており、表示が速く、色やサイズの調整も自由自在。クラス名には bnto- プレフィックスが付いているため、既存サイトのスタイルと衝突しにくい設計です。
こんな場面で活躍します
- LP・コーポレートサイト制作 — CTAボタンや見出し装飾をサッと組み込んで制作時間を短縮。
- ブログのカスタマイズ — 囲み枠・マーカー見出し・吹き出しなど、記事を読みやすくする定番パーツが揃っています。
- コーディング学習 — 動くサンプルとコードを見比べながら、CSSのテクニックを学べます。
よくある質問
Web BENTO CSSは無料で使えますか？
商用サイトでも利用できますか？
コピーしたコードはどうやって使いますか？
<style> タグ）に、HTMLタブのコードをページ内に貼り付けるだけで動作します。装飾やアニメーションはCSSだけで完結し、画像も使っていません（文字数カウンターなど一部、値の更新にJavaScriptを使うパーツは、そのパーツの説明に明記しています）。どんなパーツがありますか？
AIコーディングツールと組み合わせて使えますか？
WordPressに貼り付けたのに表示されません。
<style> を自動で除去・変換することがあります。次の順にお試しください。① 通常の段落（ビジュアルエディタ／段落ブロック）ではなく、ブロックエディタなら「カスタムHTML」ブロック、クラシックエディタなら「テキスト（コード）」タブにHTMLを貼ってください（段落に貼ると記号が変換され、レイアウトが崩れます）。
② CSS（
<style> の中身）は「外観 → カスタマイズ → 追加CSS」に貼ると、テーマ更新の影響を受けず確実です。③ キャッシュ系・最適化系プラグインをお使いの場合は、キャッシュを削除し、CSSの結合・圧縮（minify）を一時的にオフにしてお試しください。
④ 見た目が崩れる場合はテーマCSSの競合が考えられます（パーツのクラス名は
bnto- で始まり衝突しにくくしています）。