コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

cssデザインサンプル集

サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLとCSSのコピペだけで使えるものです(いわゆる「スニペット」というものですね)。
サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に是非ご活用ください。

1. ボタン

ボタンデザイン100

コピペで使えるボタンデザイン集です。シンプル、フラット、立体的、円形のものなど、かなりのバリエーション数を用意しました。気に入ったCSSを追加しておけば、記事内にHTMLテンプレを書くだけで好きなデザインのボタンが表示できるようになります。

2. リスト(箇条書き)

リストデザイン例

こちらは箇条書きです。カラフルで華やかなもの、ポチ代わりにユニークなアイコンを使ったものなどなどたくさん作ってみました。きっと「おしゃれ」だと思えるリストデザインが見つかるはず。

3. 見出し

見出しデザインのサンプル

反響の大きかった見出しデザインのサンプル集です。こちらも68個という膨大な数を用意したので、きっとお気に入りのものが見つかるはずです。

4. ボックスデザイン

ボックスデザイン

こちらの記事では、四角いボックス(囲み枠)のデザインをたくさん作りました。画面の上に紙が置かれたようなものや、グラーデーションを使ったものなどユニークなサンプルも含まれています。記事中の重要な部分、あるいは補足事項をまとめるのにご活用ください。

5. リボン

リボンデザイン

リボンデザイン

ブログやWebサイトにアクセントを加える「リボン」のサンプル集です。デザインを華やかに見せたいとき、目立たせたい文字があるとき、新着記事につける「NEW」というラベルをつけたいときなどに活用するのが良いかと思います。

6. 引用ボックス

引用デザイン

こちらの記事では、ググってもあまり見つからない引用(blockquote)のデザインを30個紹介しています。比較的シンプルで使いやすいものが揃っているのではないかと思います。

7. ウォシュレットのデザイン

ウォシュレットボタン

こちらの記事では、リアルなウォシュレットボタンをWebサイトやブログに表示させる方法を紹介しています。ボタンに連動して動くお兄さんのサンプル付き。

サルワカくんの顔(通常)
サルワカくん

今後も「ふきだし」や「ぱんくずリスト」「タブメニュー」などなど追加していく予定です。お楽しみに!

サルワカ