サマリ
動くWebデザインアイデア帳のコードを試してみました。
背景
自分でHTMLやCSSを書いてWebページ作りたいと思って早数年、、
気になっていた動くWebデザインアイデア帳さんのコードを
ついに使わせていただくことにしました。
ゴール
サンプルコードをローカル環境にコピーし、ブラウザで動作することを確認する。
対象読者
- かっこいいWebページを作りたいけど実装方法がわからない人
- とにかくできたという経験を積みたい人
前提
必須：ブラウザ、テキストエディタ
推奨：基本的なHTML,CSS,Javascriptの知識
環境
- ホストOS：Window10 Home
- ブラウザ：Google Chromeバージョン: 127.0.6533.120（Official Build） （64 ビット）
そもそも
そもそも動くWebデザインアイデア帳とは、
「動くWebデザインアイデア帳」は、デジタルハリウッドSTUDIO 講師の久保田涼子と杉山彰啓がjQueryやCSSアニメーションをはじめたばかりの方へ向けて、近年のウェブサイトで利用されている基本的な動きをまとめたサイトです。
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
「JavaScript の本を購入してみたが、実際のサイトにどう組みこめばいいか具体的なイメージがわかない」
「動きの原理を最低限理解して、とにかく早く実務にいかしたい」
スクールで教えていると、このような声をたくさんいただきます。
「必要な情報がひとつにまとまっていて、講師が受講生さんに教えるために便利なサイトがあればいいな」という気持ちでつくりました。
1 つの動きを実現する方法は様々ありますが、なるべくわかりやすい方法を選んでいます。
サイトを利用して「動いた！嬉しい！」という気持ちを、
その後のさらなる動きの仕組みへの探求心につなげて頂ければ幸いです。
（公式ページより引用）
めちゃくちゃいいサイトすぎます…！
ただ、なんと本日（2024/8/31）に一般公開は終了し、
以降は書籍購入すれば見られるということで、
たまたま一般公開最終日に滑り込むことに成功（？）しました。
また書籍は購入したいと思います。
試してみた
手順は、公式ページから好きな機能・デザインのページに遷移し、
そのコードを自分の環境で試す（html,css,javascriptのファイルを作ってコピペする）だけです。
利用規約でも商用・非商用にかかわらず基本的には使用してよいとのことであまりにも良心的すぎます。。
（詳細は公式ページを参照ください）
機能と
印象で
分かれていて、自分がやってみたいものを選択することでコードがあるページに遷移できます。
（すごすぎる。。
ということで、さっそく試してみます。
プログレスバー
おお、表示できた…！
サンプルコードについて、以下のようにと書いている部分も動くWebデザインアイデア帳のソースで書かれていますが
（デモで動くようにだと思いますが）
もちろんこのままでも動くWebデザインアイデア帳のリソースにアクセスしに行くので動きますが
（8/31以降はできないかもしれません）
今回この部分を自分のローカルファイルのパスに書き換えました。
ハンバーガーメニュー
おぉ…！あの憧れのハンバーガーメニューがローカル環境で…（感動しすぎ
当たり前ですがコピペするだけなので簡単にできます。
液体シェイプ
画像なのでわかりませんが、黄色い丸の形がうねうねと変わります。
これHTMLとCSSだけなんですね、すごい…！
波打つ
こんな感じの波打つ動きも簡単に表現できました。
結果
4つのパターンを試して実際に動かすことが出来ました。
まとめ
薄っぺらい内容になってしまいましたが
まずは自分の環境で動くということの楽しさを実感できましたので良しとします。（おい
最近は生成AIの普及により自動でコード生成もできるようになってきていますが、
自分でやる楽しさや仕組みを理解するということも大事かと思うので、
引き続き利用させていただきながら勉強していきたいと思います。