LP

用途

CSS 無限ループマーキー9選 — CSSだけ・JS不要

css 無限ループは、同じ内容を2セット並べたトラックをちょうど半分だけ動かし、継ぎ目や巻き戻りを見せずに帯を流し続けるCSSの実装法です。この記事ではマーキー(横に流れる帯)を9パターン選び、JavaScriptを使わずtransform

読む

css 画像ホバーエフェクトは、写真の上にカーソルを乗せた瞬間だけ拡大・変色・出現が起きる、CSSのtransformとtransitionだけで組める小さな仕掛けです。この記事では9種類を選び、それぞれ6〜25行のコードとして実装しま

ベントグリッドは、日本の弁当箱のように大きさの異なる区画を隙間なく組み合わせ、ランディングページ全体を一枚の格子に見せるレイアウト手法です。ヒーローから料金表まで、すべてのセクションが同じ角丸と影の強さの上に乗ります。

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

css モーダルは、ボタンを押した瞬間に画面の上に浮かぶ確認・選択用の小さなパネルのことで、CSS だけで開閉のアニメーションまで作れます。この記事では9種類を選び、下のグリッドは2秒ごとに自動で開閉するので、クリックはできず眺めるだけにな

スクロールアニメーション css は、要素が画面に入った量やページ全体の読了率を animation-timeline に渡し、JavaScript を1行も書かずに動かす仕組みです。この記事では9種類を選び、view() と scrol