購入前に目次をご確認ください
インプレス［コンピュータ・IT］ムック CSSとJavaScriptで作る動くUIアイデアレシピ
インプレス / 2025年04月15日 / 全319ページ
スクロールで現れる美しいアニメーション、Webサイトを彩る洗練されたUI。そんな「動くWebサイト」を、あなたの手でつくり出すためのアイデアが詰まった一冊です。現在のスタンダードであるCSSやJavaScriptを使った動くUIを詳細に解説し、実装の注意点も丁寧に説明しています。また、感性に頼らない、理論に基づいたデザインのプロセスも紹介しています。
目次
- 本書について
- はじめに
- 目次
- 本書の読み方
- 本書の使い方
- Chapter 1 動きのデザイン
- Lesson 1 動きのあるWebサイト
- Lesson 2 動きの必要性
- Lesson 3 動きによる印象の違い
- Lesson 4 どんな動きにしよう？
- Lesson 5 動きをデザインしよう
- Chapter 2 CSS・JavaScriptアニメーションの基礎
- Lesson 1 アニメーションのさまざまな実装方法
- Column Webサイト制作のためのエディター
- Lesson 2 CSS transitionアニメーションの基礎
- Lesson 3 CSS keyframesアニメーションの基礎
- Lesson 4 CSS keyframesアニメーションで指定できる値
- Lesson 5 JavaScriptアニメーションの基礎
- Lesson 6 JavaScriptで動きのきっかけを設定する方法
- Lesson 7 デベロッパーツールを使ってみよう
- 本書について
- はじめに
- 目次
- 本書の読み方
- 本書の使い方
- Chapter 1 動きのデザイン
- Lesson 1 動きのあるWebサイト
- Lesson 2 動きの必要性
- Lesson 3 動きによる印象の違い
- Lesson 4 どんな動きにしよう？
- Lesson 5 動きをデザインしよう
- Chapter 2 CSS・JavaScriptアニメーションの基礎
- Lesson 1 アニメーションのさまざまな実装方法
- Column Webサイト制作のためのエディター
- Lesson 2 CSS transitionアニメーションの基礎
- Lesson 3 CSS keyframesアニメーションの基礎
- Lesson 4 CSS keyframesアニメーションで指定できる値
- Lesson 5 JavaScriptアニメーションの基礎
- Lesson 6 JavaScriptで動きのきっかけを設定する方法
- Lesson 7 デベロッパーツールを使ってみよう
- ”Lesson 8 うまく動かないときの確認リスト”
- Chapter 3 印象に残るボタン
- Lesson 1 ボタンの役割
- Lesson 2 背景色をふわっと変える
- Lesson 3 背景が流れる
- Lesson 4 ボタンを押し込んだようなアクション
- Lesson 5 ラインが動く
- Lesson 6 矢印が変化する
- Lesson 7 キラキラ光る
- Lesson 8 くるくる回る
- Lesson 9 ポンポン弾む
- Lesson 10 波紋が広がる
- Chapter 4 画像の魅力を引き出すテクニック
- Lesson 1 画像の役割
- Lesson 2 色味を変える
- Lesson 3 画像をぼかす
- Lesson 4 ふわふわ動かす
- Lesson 5 ホバーで大きく表示
- Lesson 6 別の画像に切り替える
- Column 無料で利用できる写真素材Webサイト
- Lesson 7 自動で横に流れる
- Lesson 8 パラパラ漫画風
- Lesson 9 ふんわり表示
- Lesson 10 ゆっくり拡大していく
- Chapter 5 全体の雰囲気を決める背景・画面遷移
- Lesson 1 背景・画面遷移の役割
- Lesson 2 背景色を徐々に変える
- Lesson 3 背景画像を変える
- Lesson 4 背景に動画を配置する
- Lesson 5 粒子を散りばめる
- Lesson 6 ローディング画面
- Lesson 7 画面遷移のアニメーション
- Chapter 6 迷わないナビゲーションメニュー
- Lesson 1 ナビゲーションメニューの役割
- Lesson 2 ホバーで伸びるライン
- Lesson 3 ドロップダウンメニュー
- Lesson 4 フルスクリーンで表示するメニュー
- Lesson 5 クリックで開くスライドメニュー
- Lesson 6 リンク間を移動するライン
- Chapter 7 スムーズなスクロール
- Lesson 1 スクロールの役割
- Lesson 2 スクロールでページを操作しやすくする
- Lesson 3 スクロールでコンテンツを表示
- Column Intersection Observerとは？
- Lesson 4 スクロールによるテキスト効果
- Lesson 5 パララックス効果で遠近感を出す
- Lesson 6 スクロールで色を変える
- Chapter 8 制作効率を上げるライブラリー
- Lesson 1 ライブラリーとは
- Lesson 2 クラス指定だけでアニメーション「Animate.css」
- Lesson 3 画像や動画を拡大表示「Fancybox」
- Lesson 4 スクロールに合わせてアニメーション「AOS」
- Lesson 5 手書き風マーカー「Rough Notation」
- Lesson 6 カーソルに合わせて動く3Dテキスト「ztext.js」
- Lesson 7 タッチ操作のできるスライダー「Swiper」
- Lesson 8 シンプルなモーダルウィンドウ「SweetAlert2」
- Lesson 9 グラフを作る「Chart.js」
- Lesson 10 3Dアニメーションの背景「Vanta.js」
- Column ライブラリーとフレームワーク
- Column jQuaryとは
- 索引
- 著者プロフィール
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
