30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」

 
30秒以内に理解できる有用なCSSスニペットのコレクション「30 Seconds of CSS」を紹介します。レイアウト・アニメーション・インタラクティビティ・その他とカテゴライズされ、それぞれシンプルなコードで表示されます。

30 Seconds of CSS

目的のスニペットをクリックするとHTML・CSSのシンプルな記述とプレビュー(DEMO)が表示されます。また英語ですが簡単な説明も記載されているので短時間でどのようなスニペットか理解することができます。

スニペット数は少ないようですが、基本的なコードから実用性の高いコードまで分かりやすくまとめてあるので、自分に合ったスニペットがあるかどうかチェックしてみてはいかがでしょうか。



  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • CSSとJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
RELATED POSTS
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
  • 指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
RECENT POSTS
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】無料で使えるフリー動画素材サイト10選
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 無料で使えるフリーアイコン素材サイト15選
PICKUP
  • CSSで作成する吹き出しとデザインのアイデア
  • 導入しておきたいWordPressのおすすめプラグイン
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア