手を動かして覚えるUIアニメーション：CSSとJavaScriptを組み合わせる考え方

HTMLとCSSの基礎は身についた。でも「動き」を加えようとするといきなり止まる——「transition は CSS に書く？ JavaScript で書く？」「クリックでクラスを付け替えるのはわかるけど、どこに何を書けばいいんだ」というやつだ。

Mana 著『CSSとJavaScriptで作る動くUIアイデアレシピ』（インプレス、2025年）は、その詰まりどころを正面から扱うレシピ集だ。ボタン、画像、ナビゲーションメニュー、スクロールといった現場でよく出てくるUIパーツを題材に、CSSとJavaScriptをどう使い分けるかを順に見せていく。

1. CSSとJavaScriptの役割分担を最初に整理する

本書はまずここを片付ける。色・サイズ・位置の変化は CSS の transition や keyframes が担い、クリックやスクロールへの反応は JavaScript でクラスを付け外しして制御する。この分担さえ頭に入れば、「どこに書けばいいか」の迷いがかなり減る。

各章の構成も「基本仕様 → 応用展開 → カスタマイズ」の順で、一度動くものを作ってからアレンジを加えていく流れ。手を動かしながら読み進めやすい。

2. 実在するサイトのコードから「なぜその動きか」を確認する

制作会社が手がけた商業サイトの事例が掲載されている。プロダクション環境で動いているビジュアルとコードが対応しているため、「なぜこの動きが必要か」という設計の判断まで追える。

アニメーションはどこに入れてどこには入れないか——この感覚はチュートリアルだけでは身につきにくい。デザイナー目線の補足が随所に入っていて、「過剰な演出を避ける」という判断の根拠が実例とセットで示されている。

3. CodePenで「読みながら試す」

各パーツ解説にはCodePenへのQRコードと短縮URLが添えられている。ローカル環境を立ち上げずにパラメータを書き換えてすぐ確認できるため、読みながら実験しやすい。

Chapter 8ではAnimate.css、AOS（スクロール連動）、Fancybox（画像拡大）、Swiper（スライダー）などよく使われるライブラリの使い方を扱う。初期化設定や競合時の注意点も解説されているので、既存サイトの改修でライブラリを持ち込む場面でも役立つ。

DevBookPath のマップで確認する

この本の学習パス上の位置づけ・前後の読書順は、DevBookPath のグラフで辿れます。

フロントエンドの地図を見る

---

本記事のリンクには Amazon アソシエイト等の広告が含まれる場合があります。リンク経由の購入で運営者に紹介料が支払われることがあります。