- 520
- 収録パーツ
- 22
- カテゴリ（貨物棚）
- ¥0
- 商用OK・登録不要
- 0img
- 画像不使用・純CSS
INVENTORY
貨物棚から選ぶ
棚をクリックすると、そのカテゴリの全パーツへ。コードはすべて1クリックでコピーできます。
該当する貨物が見つかりませんでした。
CRG-0124点
ボタンBUTTONS — 押した感触まで設計したCTA・アクションボタン。
CRG-0222点
見出し装飾HEADINGS — 下線・マーカー・囲み。記事の骨格を立てる。
CRG-0323点
グラデーションGRADIENTS — 背景・文字・ボーダーに流し込む色の配合表。
CRG-0424点
カード・ボックスCARDS — 枠・影・付箋。情報を梱包する箱の型。
CRG-0524点
ローディングLOADERS — スピナー・ドット・スケルトン。待ち時間の所作。
CRG-0624点
背景パターンBACKGROUNDS — ドット・格子・ストライプ。画像なしの床材。
CRG-0723点
テキストFXTEXT FX — 光る・流れる・切り替わる。動く文字の見本帳。
CRG-0825点
フォーム部品FORMS — 入力欄・トグル・チェック。触って気持ちいい部品。
CRG-0923点
吹き出しBUBBLES — 会話・注釈・ツールチップ。しっぽ付きの箱。
CRG-1022点
ホバー演出HOVER FX — マウスが乗った0.3秒のマイクロインタラクション。
CRG-1123点
バッジ・タグBADGES — NEW・ステータス・カウント。小さくても働く札。
CRG-1222点
リスト装飾LISTS — チェック・番号・タイムライン。並べ方の見本。
CRG-1321点
区切り線DIVIDERS — セクションの継ぎ目に効く、hrのあしらい集。
CRG-1421点
アラート・注意書きALERTS — お知らせ・成功・警告・エラー。伝わる報せ方。
CRG-1521点
テーブル装飾TABLES — ストライプ・料金表・比較表。読める表の型。
CRG-1722点
ヒーロー演出・動く背景HERO MOTION — LPの冒頭に貼るだけで動き出す、JSなしのモーション背景と演出。
CRG-1621点
影・グラスSHADOWS — ガラスの質感とニューモーフィズム、影の調合表。
CRG-1838点
JS付きインタラクションJS INTERACTIVE — マウス追従・カウントアップ・モーダル。倉庫で唯一、JSを同梱した棚。
CRG-2029点
リキッドUILIQUID FX — ゼリーのように変形するスイッチやボタン。物理Spring+グーイの液体演出。
CRG-1923点
テロップ・登場エフェクトTELOP FX — 動画編集ソフトのテロップ風。擬音で選べる文字の登場演出。
CRG-2224点
アイコンアニメーションICON MOTION — ベルが鳴り、フォルダが開く。ホバーで命が宿るSVGラインアイコン。
CRG-2121点
フィードバック・状態遷移FEEDBACK FX — 成功・エラー・完了・空状態。行動の結果を有機的に伝えるUX演出。Lottie不要の純CSS。
HOW TO SHIP
3工程で出荷完了
- 01棚を開ける
欲しいパーツのカテゴリページを開きます。全パーツが動く状態で陳列されています。
- 02コピーする
CSS / HTML タブを確認して「コピー」を押すだけ。クリップボードに積み込まれます。
- 03貼って納品
自分のサイトに貼り付ければ完成。色・サイズはCSS変数から自由に調整できます。
CSS CARGOとは — コピペで使えるCSSパーツの倉庫
CSS CARGO（シーエスエスカーゴ）は、Web制作で頻出する装飾パーツを「貨物」として梱包した、コピー&ペーストで使えるHTML/CSSスニペット集です。世界のWebデザインで定番となったパターンやトレンドの表現を、オリジナル実装または許諾ライセンス（MIT/CC0）付きで収録。パーツごとに容量とライセンスを明記しています。
- LP・コーポレートサイト制作 — CTAボタンや見出し装飾を数分で組み込み、制作時間を短縮。
- ブログのカスタマイズ — 囲み枠・マーカー・吹き出しなど、記事を読みやすくする定番が揃います。
- コーディング学習 — 動く実物とコードを見比べて、CSSのテクニックを学べます。
よくある質問
CSS CARGOは無料で使えますか？
はい、すべてのパーツを無料で利用できます。会員登録やクレジット表記も不要です。
商用サイトでも利用できますか？
商用・個人を問わず利用可能です。企業サイト、LP、ブログ、クライアントワークにそのままお使いいただけます。
コピーしたコードはどうやって使いますか？
各パーツのCSSをスタイルシート（または style タグ）に、HTMLをページ内に貼り付けるだけで動きます。「JS付きインタラクション」カテゴリのパーツのみ、JSタブのコードを閉じbodyタグの直前に貼ってください。それ以外のカテゴリはJavaScript不要・全パーツ画像不使用です。
他のCSS配布サイトと何が違いますか？
全パーツにクラス接頭辞 cg- が付いており既存CSSと衝突しにくいこと、パーツごとに容量（GROSS WT.）とライセンス出典を明記していることが特徴です。
JavaScriptが必要なパーツはありますか？
全22カテゴリのうち「JS付きインタラクション」と「リキッドUI」の2カテゴリのみJavaScriptを使用します。該当パーツにはカード上に「+JS」の表示があり、それ以外の全パーツはCSSのみで動作します。
HTML・CSS・JSの3つともコピーが必要な場合はどうすればいいですか？
パーツカードにCSS / HTML / JSのタブが表示されている場合、3つとも該当箇所に貼り付けてください。CSSはstyleタグかスタイルシートに、HTMLは表示したい場所に、JSは閉じbodyタグの直前に配置します。