CSS素材
- 【Neat CSS】
ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワーク。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単。MITライセンスで、個人でも商用プロジェクトでも無料で利用できる。レスポンシブ、ダークモードも対応。 - 【Loaders】
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーション。 - 【Design Gradients】
プロのデザイナーによってキュレーションされた、美しいCSSグラデーションのコード。さまざまなUIコンテンツやデジタルアートの背景にぴったりな線形グラデーション。 - 【Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ】
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介。 - 【CSSUI】
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリ。各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単。 - 【Uisual】
JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレート。テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインのため、カスタマイズも簡単。ダウンロードできるテンプレートは8種類あり、さまざまなプロジェクトですぐに利用できる。デザインが白黒なのは、簡単にカスタマイズできるようにしたため。画像の変更、フォントやコピー、背景色、グラデーション、ボックスシャドウなどを簡単に変更・追加できる。 - 【clay.css】
Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS。クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与える。 - 【Tailwind CSS】
ユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装する。 - 【UIverse】
Webサイトやスマホアプリでよく使用される、ボタン、カード、検索ボックス、チェックボックス、ローダーなど、HTMLとCSSで実装されたUI要素がオープンソースで利用できるUIverseを紹介します。 - 【CSSリセット】
2024年、現在の環境に適したCSSリセットのまとめ - 【CSS Ribbon Shapes】
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できる。 - 【CSS Loaders】
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できる。 - 【Loadership】
CSSで実装されたローダーをコピペで簡単に利用できるオンラインツール。CSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できる。 - 【CSS Tooltips & Speech Bubbles】
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のツールチップとスピーチバブルを実装できる。
JS素材
- 【ScrollMovie.js】
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリ。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力。動画みたいにするには、複数コマ分の画像が必要である。 - 【PushIn.js】
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScript。スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かける。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できる。 - 【simpleParallax.js】
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリ。実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できる。
