SCSS

技術

css 画像スライダー9選 — コピペで使えるカルーセル

通販サイトの商品写真や会社サイトのトップ画像で、指でなぞったりボタンを押したりすると次の一枚に切り替わる仕組みを画像スライダーと呼びます。ここで紹介するcss 画像スライダーはCSSだけ・JS不要で、9種類のやり方をそのままコピペできる形に

読む

css タブ切り替えアニメーションは、ラジオボタンの:checked状態やrole="tablist"ボタンだけでインジケーターが滑り、パネルの中身が入れ替わる仕組みです。9個のうち7個はCSSだけで動きますが、矢印キー操作が要る2個だ

css ドロワーは、画面の端に隠れたパネルがトリガー操作で滑り出したり、位置を変えずにその場で現れたりするナビゲーションUIです。この記事はtransformとopacityを軸に9種類の開き方を集め、うち01・03・08の3つは実際にin

トースト通知 css は、画面の隅に短く現れて自分で消えていく通知カードを、JavaScriptをほぼ使わずtransformとopacityだけで動かす手法です。この記事では9種類を実装し、コードは6〜25行の断片として載せています。まず

プログレスバー css アニメーションは、スクロールした量だけを手がかりに「今どこまで読んだか」を見せるCSSの部品です。CSSだけ・JS不要で、上部バー・円形バッジ・点ナビ・縦バー・文字塗り・数値・章ステップ・目次・残り時間の9種類を集め

css 下線アニメーションは、単語や文の下・背後に敷いた線や面を動かして、読む人の視線をその一語に止める技法です。今回はこの技法を9つ選び、それぞれ6〜25行のコードにまとめました。上のグリッドは表示された瞬間から自動で繰り返し動いていて

tailwind アニメーションは、tailwind.config.jsを使わずCSSの@themeブロックに--animate-変数と@keyframesを一緒に書くと、その名前がそのままユーティリティクラスになるTailwind v4の

css 背景アニメーション星のような検索でたどり着く人が本当に探しているのは、雪や星、雨、紙吹雪、泡、蛍、花びら、霧のように小さな粒を画面全体にばらまいて動かす背景の作り方です。span 1個をnth-childで何十回も繰り返し、位置・

css 3d アニメーションは、perspectiveとtransform-style: preserve-3dだけで奥行きを作るCSSの技法です。回転するキューブや円周上のカルーセル、ホバーで傾くカードなど9種類を選び、それぞれ一行でコピ

css アイコンアニメーションとは、再生ボタンや通知ベル、更新マークのような定番のインターフェースアイコンを、文字ではなく座標を持つSVGのpathとして描き、状態が変わるたびに動かす手法を指します。書体に頼らないぶん、フォントが変わって