COPY & PASTE CSS PARTS

コピペで使える
CSS素材集

ボタン、流れる文字、Contact Form 7のフォーム、チャット風の会話、メモ帳風のBOX、背景の模様。
見本を動かして、色や速さを変えて、HTMLとCSSをそのままコピーできます。

59素材 公開中

カテゴリから探す

BUTTON ボタン 押し込み・光る・矢印が進む・脈打つCTAなど 10 MARQUEE 流れる 大きな文字・2段・斜めリボン・ニュースティッカー 8 CONTACT FORM 7 フォーム（CF7） Contact Form 7 にそのまま使えるお問い合わせフォーム 5 CHAT チャット風 LINE風のトーク画面・吹き出しの会話・入力中の点々 6 BOX BOX・メモ タイトル付き枠・メモ帳・付箋・方眼紙・黒板 10 PATTERN 背景の模様 方眼・水玉・斜線・チェック・和柄・グラデーション 13 PAGE TOP トップへ戻る スクロールすると出てくる、ページの先頭へ戻るボタン 7

これから増やすカテゴリ

  • 見出し
  • 文字装飾
  • ヒーロー
  • セクション
  • 区切り
  • 動き
  • スライドショー
  • ページ切替
  • メニュー
  • ヘッダー
  • フッター
  • 表
  • エフェクト
  • きらきら
  • カード
  • タブ・アコーディオン
  • ローディング

使い方

  1. 見本で確かめる背景の明るさ、スマホ幅での見え方を切り替えて確認できます。
  2. 色や速さを変える調整欄を動かすと、見本とコピーされるコードの両方が変わります。
  3. コピーして貼るHTMLは本文に、CSSはスタイルシートに。「まとめてコピー」なら1つのHTMLとして貼れます。

クラス名はすべて cs- から始まるので、今のサイトのCSSとぶつかりにくくしてあります。動きのある素材は、端末で「視差効果を減らす」設定をしている人には動きを止めて表示します。