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

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

〈電子書籍版に関する注意事項〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なりますので、ご購入前にお使いの端末にて「無料サンプル」をお試しください。

【コードをイチから書かなくてOK！ 超カンタンにWebサイトを動かす！】

Webサイト上で「動く」デザインパーツを集めたソースコード素材集。サンプルのソースコードをコピー＆ペーストすれば、そのまま使えます。

文字や画像がすぅーっと消えたり、ふわっ～と表れたり、要素が左右にスライドしたり……作るのが意外に難しく汎用性が高い「動く」パーツを豊富に収録しました。収録サンプルは完成データをダウンロードできます。

本書の構成は、まず基本形となるサンプルがあり、続くステップアップとしてカスタマイズ例を紹介する流れになっています。
基本形だけでも十分活用できますし、カスタマイズ例の部分は、ご自身でコードを変えてオリジナル要素をプラスする際のヒントとしても役立ちます。
7章構成で、ボタンアニメーションやテキストのエフェクトなどの簡単なものから、ナビゲーションメニューやコンテンツの今風の見せ方などのサイト全体に関するものまで収録。

ギャラリーやスライドショー、フォームやテーブル、SNSのアイコンなどいった細かなパーツのアイデアもまとめました。
Webサイトにちょっとした彩りを添えたいとき、動きを加えたいときなどに活用いただけます。

〈こんな方にオススメ〉
○Webサイトに今風の“動き”を取り入れたい方
○HTML・CSSのコーディング経験が浅い方
○ソースコードをイチから書く手間を減らしたい方

〈本書の章構成〉
■Chapter 1 ナビゲーション
■Chapter 2 ボタン
■Chapter 3 スライドショー／ギャラリー
■Chapter 4 背景／コンテンツ
■Chapter 5 テーブル／フォーム／リスト
■Chapter 6 テキスト
■Chapter 7 画像／動画／SNS

〈本書の特徴〉
○アニメーションなどの動きを手軽に取り入れられる
○コーディングにかかる時間と手間を減らせる
○基本形＋カスタマイズでバリエーションが広がる

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / インターネット
• 出版社: エムディエヌコーポレーション
• 電子版発売日: 2022年03月23日
• コンテンツ形式: EPUB
• サイズ(目安): 166MB

[ブクログ · ★★★★☆]

これ見たことある！ってものからこんな表現もできるんだ！っていうWebデザインがソース付きで説明されています。
ソースファイルで重要なとこは色付きで説明されているので単純にソースコード読むよりも効率が良い。
さらにこれがあるとよかったなぁというのはVanilla JSで書いて欲しかったところと、こんなの使うか？っていうトリッキーなものも結構あったのでもっと実用的なものが欲しかった。
ただ、jQueryは最近Vanillaに変換するサイトとかあるし、トリッキーなものも需要があるとこはあるだろうしということで星4。