マウスカーソルを乗せると動くボタンの作り方を習った

今日のwebコーディング実習では、aタグ(リンクで使う)に対してCSSで装飾をすることにより「マウスカーソルが乗ると色が変わり、矢印アイコンが動く」という特殊効果を実装した。
CSSでこれだけ「動き」が作れるんだから、もう「プログラム言語」と思ってしまってもいい。イメージとしては昔のBASIC言語だ。

来週は、実在するサイトのスクショを見ながら「見た目を自力でHTMLとCSSで再現する」という実習をするらしい。文章と画像の入り組んだデザインなどをどうコードに置き換えていくか。

なお、「動くデザイン」については「コピペで使えるネタ帳」がある。
多分私が仕事でサイト制作をするなら、それを使うだろう。今はまだ買わない。

デザインのネタ帳 コピペで使える動くWebデザインパーツ | 矢野 みち子(KLEE), 五十嵐 小由利, 伊藤 麻奈美(KLEE), 棧敷 友香子, 錦織 幸知 |本 | 通販 | Amazon

対面で学ぶと、「やることの多さ」を思い知らされる。
独学で「教科書のソースコードを丸写しするだけ」だと、自分は何も考えなくても(タイプミスしない限り)サイトはまともに出来上がるので「簡単にできる」と錯覚してしまう。
プロは制作に数ヶ月かけているのだ。簡単なわけがないだろう。