[B! library][css] usako1124のブックマーク

【React】daisyUIを触ってみた！かなり楽しいw

daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。なぜ興味を持ったか最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。特に機能（ロジック）面の実装においては思うところが色々あって、慣れていないときにあらゆるコンポ

usako1124 2024/01/11

リンク

daisyUI — Tailwind CSS Components ( version 4 update is here )

daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever. don't re-invent the wheel every time In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.

usako1124 2024/01/11

リンク

【slick】ロード時に一瞬縦並びになるのをCSSで解決する

ページのメインビジュアルとしてもおなじみのスライダー（カルーセル）。 jQueryのプラグインも数多くありますが、グランフェアズでよく使っているレスポンシブ対応のスライダープラグイン、「slick」についての備忘録をお届けします。 slickの公式サイトはこちら。当記事では基本の設置方法は割愛しています。公式サイトの「get it now」からダウンロードして、「demos」を参考に好きなスライダーを作ってみましょう。 slick – the last carousel you’ll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! ロード時に一瞬縦並びに

usako1124 2022/07/08

リンク

[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。 basicScrollの特徴他のスクリプトへの依存はゼロ CommonJSとAMDのサポートシンプルなJavaScript API ブ