SCSS

技術

CSS 固定ヘッダー 9選 — CSSだけ・JS不要

css 固定ヘッダーは、スクロールしても画面上部に留まり続けるナビゲーションをCSSの position:sticky で作る手法です。この記事では隠す・影を付ける・色を反転するなど9種類の動きを選び、判定の仕組みごとに難易度順で並べました

読む

css パララックスは、スクロールする速度と背景や文字が動く速度をわざとずらし、奥行きを感じさせるCSSの表現です。この記事では9パターンを選び、animation-timelineによるスクロール駆動アニメーションだけで組み立てました。

マイクロインタラクション css は、ボタンを押す・保存する・タブを切り替える一つの操作に、画面がひと呼吸だけ反応して見せる小さなアニメーションです。この記事では9種類を選び、transitionと@keyframesだけで実装しました。グ

css ドロップダウンメニューは、クリックやホバーで隠れていた選択肢を高さや透明度の変化で見せる、CSSだけで動くナビゲーション部品です。この記事では9種類を選び、grid-template-rows・clip-path・popover属

css ローディングスピナーは、読み込み中であることをひと目で伝える、CSSだけで動く小さな部品です。この記事では9種類を選び、疑似要素とtransform、そして@propertyという仕組みだけで実装しました。格子の9つはiframe

css アコーディオンアニメーションは、クリックした項目だけが高さごと開閉するUI部品を、JavaScriptなしでCSSだけで動かす技術です。この記事では9種類を選び、interpolate-size と calc-size() とい

css ハンバーガーメニューアニメーションは、3本線のアイコンをクリックした瞬間に何が起こるかを決める短い動きです。この記事では9種類を選び、CSS の transform と opacity だけで実装しました（JS はクリックを受け

css ダークモード切り替えは、ページの配色を light と dark で入れ替えるトグルの動きを CSS だけで作る手法です。この記事では9種類を選び、アイコンの回転から light-dark() 関数まで、実装ごとにコードをそろえ

css ページ遷移アニメーションは、2枚の画面要素を opacity や transform、clip-path だけで重ねて、ライブラリなしにページ間の切り替えを表現する手法です。この記事では9種類を選び、グリッドではそれぞれ2秒ごとに

css スケルトンとは、本物のコンテンツが届く前に画面の形だけを灰色の板で先に見せておくローディング表現のことです。この記事ではシマーライン・カード・表・コンテナクエリまで9種類を選び、JavaScript を使わず SCSS だけで実装し