What is PETA CSS?
Web サイトでよく使う UI パーツを、コピー＆ペーストですぐ使える形で公開しているスニペット集です。
PETA CSS とは
特定のフレームワークに縛られず、HTML / CSS / JavaScript をそのままコピーして、どんなプロジェクトにも取り込めます。Google Fonts や Embla Carousel などが必要なスニペットもありますが、依存関係は各スニペットに記載しています。
スニペットの特徴
- 特定のフレームワークやビルド環境がなくても使える
- HTML / CSS / JavaScript を分けて公開しているので、必要なコードだけ取り出せる
- Preview タブで見た目を確認してからコピーでき、別タブで開くこともできる
- CSS 機能を自動検出し、対応ブラウザをバッジで表示
使い方
スニペットの HTML / CSS（必要なら JS）をコピーし、自分のプロジェクトに貼り付けて使います。
カード右上の「プロンプトをコピー」を押すと、見た目と挙動を別プロジェクト向けに実装させるための指示文がクリップボードに入ります。Cursor など、別リポジトリの AI チャットに貼り付けて使えます。
CSS には /* reset */
と書かれたセクションが含まれています。スニペット単体でも見た目が崩れないよう、要素のデフォルトスタイルを打ち消すためのものです。プロジェクトにリセット
CSS や、同等のベーススタイルが既にある場合は、このセクションを削除してかまいません。
