2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
こんにちは!仕事で使えそうな本を会社に持って来すぎてロッカーが本棚になりそうなコーディングユニットの小川です!
WEB制作(コーディング)の勉強をしていく中で、jQuery(javascript)やCSSアニメーションでサイトに動きを付けてみたいけれどどうやっていいかわからない、簡単な動きは付けられるけれどもっと色々な動きを付けてみたいと思うことはありませんか?
また、コーディングに慣れている人は難しい動きを作るのに時間を取って、よく使われる簡単な動きは時間を掛けずにササっと作れるようになりたい!と、思うことも多いと思います。
本屋さんで書籍を探してみても、入門書は数が多くどれにしたら良いかも迷ってしまいますよね…。
今回はそんな時にぜひ手に取ってみていただきたい、動くWebデザイン、jQuery の書き方について丁寧にまとめられている本の書評を書いてみました!
目次
今回ご紹介する本 「動くWebデザインアイディア帳 」です。
2021年の2月にソシム株式会社さんから出版されました。
1冊でもかなりボリュームがあり参考になるのですが、8月にはより現場で使える内容が書かれた「動くWebデザインアイディア帳 実践編」も出版されています!
今回はまず初心者の方に読んでいただきたい、最初に出版された方をご紹介させていただきます!
こちらの書籍はパーツごとにチャプターが分かれており、簡単に付けたい動きを見つけることができるような構成になっています。
期間限定でCHAPTER4以降の動きのサンプルを実際に確認できる書籍と連動したサイトも公開されています。
連動したサイトがあると、本と同じ動きを付けたいときに全部のコードを頑張って書かなくてもコピーして使うことができるので、初心者の方でもjQueryを触りやすい嬉しいポイントですね!
実際の動きについての説明に入る前のCHAPTER1〜3では書籍の読み方やWebページで動きを付ける時に最低限知っておきたいjQueryやCSSアニメーションの基礎がきちんと説明されています。
イラスト付きのわかりやすい説明に加え、実際に動きを取り入れている参考事例のWebサイトが紹介されているため、jQueryやCSSを使って動かすためにはどうしたら良いか、作成するデザインにはどんな動きを取り入れたら良いかを考えて学びながら読み進めることができます。
また、作ってみた動きがWebサイト上で動かない時にチェックしたい項目についても触れているため、基礎と合わせてjQueryの陥りやすいミスについても学ぶことができます!
期間限定の書籍と連動したサイトとは別に、書籍で紹介されている動きを実際のWebサイトに使ってみるとどんな風に見えるのかを確認することができる架空のサンプルサイトが10種類以上紹介されています。
女性向けエステのサイト、子供向け学習塾のサイト、堅実な企業サイトなど様々なパターンがあるため、自分の作成しようとしているサイトではどんな動きを取り入れたら良いかを実際の見え方からイメージすることができます!
また、書籍通りに書いてみたものの上手く動かない…という場合にはサンプルサイトで実際に動いているコードと自分の書いたコードを照らし合わせ、上手く動かない原因や書き間違えてしまっている部分を見つけることもできます。
動きに関する説明のあるCHAPTER4以降のページはチャプターごとに色分けがされています。
そのため、実際の紙の書籍を横から見るとこのようになっています。
今回はグローバルナビゲーションを作りたいから青色のページを探してみよう!といった紙の本ならではの探しやすい工夫がされています。
使い慣れてくると目次からページを確認して開くのではなく、色からすぐにページを開くことができるため個人的にはとても使いやすいです!
基礎知識の丁寧な説明やサンプルサイトがあるため、サイトを作ったことはあるけれどjQueryやCSSアニメーションを使って動きを付けたことがない、動きを付けることに苦手意識がある人にはまず手に取ってみてほしい本です!
また、よく使う動きの簡単な実装方法がしっかりとまとめられているため、コーディング初心者だけではなく実際にコーディング業務に当たっている人も手元にあるとふとした時に役立つ書籍です!
気になる方はぜひ下記リンクから本の詳細を見てみてください!
こちらの書籍もおすすめ!
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design