デザインのネタ帳 コピペで使える動くWebデザインパーツ

試し読み

デザインのネタ帳　コピペで使える動くWebデザインパーツ

矢野みち子　著/五十嵐小由利　著/伊藤麻奈美　著/棧敷友香子　著/錦織幸知　著

定価 3,080円
（本体 2,800円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入

電子版を買う

電子書籍版を購入
- Kindle
- 楽天kobo

発売日	：2022-03-18
仕様	：A5判／336P
ISBN	：978-4-295-20244-8

Webサイト上で「動く」デザインパーツを集めたソースコード素材集。サンプルのソースコードをコピー＆ペーストすれば、そのまま使えます。文字や画像がすぅっーと消えたり、ふわっ〜と表れたり、要素が左右にスライドしたり……作るのが意外に難しく汎用性が高い「動く」パーツを豊富に収録しました。収録サンプルは完成データをダウンロード配布。本書の構成は、まず基本形となるのサンプルがあり、続くステップアップとしてカスタマイズ例を紹介する流れになっています。基本形だけでも十分活用できますし、カスタマイズ例の部分は、ご自身でコードを変えてオリジナル要素をプラスする際のヒントとしても役立ちます。7章構成で、ボタンアニメーションやテキストのエフェクトなどの簡単なものから、ナビゲーションメニューやコンテンツの今風の見せ方などのサイト全体に関するものまで収録。ギャラリーやスライドショー、フォームやテーブル、SNSのアイコンなどいった細かなパーツのアイデアもまとめました。
Webサイトにちょっとした彩りを添えたいとき、動きを加えたいときなどに活用いただけます！

【ダウンロードURLについて】
本書のサンプルは購読者様に限り利用可能としているため、ダウンロードURLを非公開にしています。ダウンロードURLは本書の10ページに掲載しておりますので、10ページをご確認ください。

■ページ見本

------------------------------------------------------------
■Chapter 1　ナビゲーション
------------------------------------------------------------
01　スライドインで表示するナビゲーション
02　スッと表れるドロップダウンメニュー
03　階層のドロップダウンメニュー
04　CSSだけで作るシンプルなメニュー
05　フルスクリーンで表示されるメニュー
06　スクロールに追随するサイドメニュー
07　アコーディオンで開閉するメニュー
08　背景が下から上に切り替わるメニュー
09　ロールオーバーで下線が表示されるメニュー
10　マウスオーバーで色が変わるメニュー

------------------------------------------------------------
■Chapter 2　ボタン
------------------------------------------------------------
01　マウスオーバーで透明に変わるボタン
02　アニメーションで下線がスゥーと出現
03　背景がシュッと切り替わるボタン
04　背景がセンターから変化するボタン
05　グラデーションの色が変わるボタン
06　ボーダーの色が変わるボタン
07　アニメーションで動くボタン
08　クルクル回るローディングボタン
09　カーソルの動きが印象的なエフェクト
10　ページトップにスッと戻るボタン
11　矢印がスクロールを促すアニメーション
12　背景画像が変化するボタンアニメーション
13　クリックでURLをコピーするボタン

------------------------------------------------------------
■Chapter 3　スライドショー／ギャラリー
------------------------------------------------------------
01　シンプルなスライドショー
02　ロールオーバーで別画像をスライド表示
03　スクロールで画像をふんわりと表示
04　マウスカーソルに合わせて画像が拡大
05　多彩なエフェクトで背景画像が切り替わる
06　インジケーターが波紋状に動くアニメーション
07　サイズに応じて挙動が変わるスライドショー
08　前後の画像をチラ見せするスライドショー
09　指定フィルターで要素を絞り込む
10　無限に横スクロールするカルーセル
11　3D風の立体で回転するギャラリー

------------------------------------------------------------
■Chapter 4　背景／コンテンツ
------------------------------------------------------------
01　ページ全体をふんわりと表示させる
02　パララックス効果で奥行き感を演出
03　背景色が時間とともに変化する
04　コンテンツが左右からフェードインで表れる
05　コンテンツが上下からフェードインで表れる
06　タブの色がクリックでパッと切り替わる
07　ふわふわ動くカラフルなウェーブ
08　ポップアップするモーダルウィンドウ
09　コンテンツの一部を隠す「続きを読む」ボタン
10　要素の中で雪が降る
11　ゆっくりボケる背景画像

------------------------------------------------------------
■Chapter 5　テーブル／フォーム／リスト
------------------------------------------------------------
01　マウスオーバーで背景色が変わるテーブル
02　ソート機能がついたテーブル
03　テーブル表の見出し行を固定表示
04　アニメーションを使ったチェックボックス
05　トグル型のチェックボックス
06　画像が切り替わるチェックボックス
07　フォーカスアニメーションのついたフォーム
08　クリックで伸び縮みする検索フォーム
09　クリックで全画面表示する検索フォーム
10　ラベルが移動する入力フォーム
11　入力フォームのツールチップ表示
12　フェードインしながら表示するリスト
13　ちょっとリッチなラジオボタン
14　ちょっとリッチなセレクトボックス

------------------------------------------------------------
■Chapter 6　テキスト
------------------------------------------------------------
01　スライドインで出現するテキストアニメーション
02　フェードインで出現するテキストアニメーション
03　テキストが拡大・縮小するアニメーション
04　テキストがクルッと動くアニメーション
05　見出しテキストのラインアニメーション
06　テキストの背景が動くアニメーション
07　文字がクルクル変わるニュースティッカー
08　文字が左右から集まるアニメーション
09　マスクを使ったテキストアニメーション
10　文字がぴこぴこ動くアニメーション

------------------------------------------------------------
■Chapter 7　画像／動画／SNS
------------------------------------------------------------
01　SNSアイコンにツールチップを表示
02　＋ボタンをクリックでSNSアイコンが表れる
03　マウスオーバーで画像がキラリと光る
04　マウスオーバーで文字を出現させる
05　画像がゆらゆら動くアニメーションエフェクト
06　背景に動画を表示する
07　幅に応じて表示が変わるLightbox風ギャラリー

著者紹介