【無料で読める】HTML5+CSS3レスポンシブアニメーション for PC，スマートフォン＆タブレットサイト

本書は前半部分はW3C（World Wide Web Consortium：Web技術標準化団体）世界標準仕様であるHTML5+CSS3アニメーションの入門的な内容を説明していますが、後半部分及び別冊では、ネットで調べても分からない内容やW3C世界標準仕様ではアニメーション不可とされているプロパティをアニメーションさせる裏技などを紹介しています。例えば、
●transformプロパティのMatrix2D、Matrix3D関数の使い方やMatrixの合成の方法
●W3CのCSS3仕様ではグラデーションプロパティはアニメーションは不可となっていますが、アニメーションさせる裏技
●3D表示に奥行きを作り出すperspectiveプロパティの詳細な説明と使用例
●画像の裏側に別の画像を表示するbackface-visibilityプロパティ
●ボタンをクリックしたりhoverしてアニメーションを始動する方法
●複数のアニメーションを連続して実行させる方法
など。

サンプルのHTML5とCSS3は本書巻頭に記載のURLから無料でダウンロードできます。サンプルをそのまま使っていただいてもよいですし、改良して使っていただいてもかまいません。

W3C世界標準仕様のHTML5+CSS3アニメーションを作るためには、W3C世界標準仕様のHTML5文法とCSS3文法で記述します。
世界標準仕様のHTML5+CSS3アニメーションの描画エンジンをGoogle Chrome、Firefox、Microsoft Edge、Apple Safariなどのブラウザが実装済みです。あとはHTML5とCSS3を使ってアニメーションを書いてやるだけです。

HTML5+CSS3アニメーションは簡単に作れます。ブログやホームページを作る時に使うHTMLとCSSが書けるエディタソフト（無料のエディタソフトで可）だけあれば、簡単にHTML5+CSS3アニメーションが作れるのです。この本で紹介しているようにかなり繊細で高度なアニメーションを作ることができます。

また最近は、iPhoneやAndroidスマートフォン、iPadやAndroidタブレットなどが急速に普及し、それに対応して、どんな機種でもWebページを見やすくきれいに表示する、「レスポンシブWeb」が一般的になってきました。

それなら、Webのブログやホームページで動かすアニメーションだってレスポンシブでなければならないはず。そんな思いから生まれたのが本書です。
アニメーションのサイズが画面サイズに合わせて自動的に変わるのです。
そんなことできるの？
その疑問に対する答えがこの本の中に書かれているのです。

このような本はまだ世界で誰も書いていないので（特にネットで調べても分からない内容やW3C世界標準仕様ではアニメーション不可とされているプロパティをアニメーションさせる裏技など）、試行錯誤しながらその結果を解説しています。

本書の中にはベクトルや行列、三角関数、物理法則なども出てきますが、高校で習ったことを思い出していただければ事足りる程度の内容です。またHTML5+CSS3アニメーションの仕様で、数式などを使うのはほんの一部分だけです（matrix2D関数やmatrix3D関数の仕様ぐらいのものです）。
私は文系の人間ですが、この本を書くにあたって、関係する数学や物理を初めて真剣に調べてみて、決して難しいものではないことが分かりました。文系人間の私でも理解できたのですから大丈夫です。

サンプルのHTML5とCSS3は自由に使用していただいてかまいませんが、使用方法を間違えたことによってシステムやプログラム、Webなどに対する不都合やトラブルが発生しても、当方は一切関知しませんので、自らの責任で使用してください。

本書に収録し切れなかったHTML5+CSS3アニメーションやその他技術情報については、別冊にまとめましたので、本書と合わせてご覧いただければ、ありがたいです。