実は、今あなたが見ているこのページは普通のブログ記事じゃないんです。
このページはHTMLファイルたった1つで作られています。CSSもJavaScriptも、画像さえも、すべてこの1つのファイルの中に入っています。外部のファイルやサーバーには一切頼っていない。こういう仕組みを静的サイトと呼びます。
出てくる用語の詳しい説明は別の記事でまとめたいと思います。今回は気楽に、眺めてもらえたら嬉しいです。
CSSアニメーション、SVGの図形、レイアウト技法、JavaScriptで動くUI。読み進めるだけで順番に体験できます。
（iPhoneの「視差効果を減らす」がONだとアニメーションが止まります。動きを楽しみたい方は「設定 → アクセシビリティ → 動作」から一時的にOFFにしてみてください）
では、さっそくいきましょう。
CSSアニメーション
では最初に紹介するのは、CSSだけで動くアニメーションです。JavaScriptは一切使っていません。CSSの@keyframesという仕組みだけで、これだけの動きが作れるんです。
（このデモは自動で動きます。見て楽しむ用です。）
（下のカードにマウスを乗せるか、タップしてみてください）
SVGグラフィックス
次はグラフィックスです。このページには画像ファイルが1つもありません。すべての図形はHTMLコードだけで描いています。
下のイラストも、テキストエディタで書いた座標と色の指定だけで出来ています。しかも動きます。
（HTMLに直接書いたコードで、こんな絵が描けます）
CSSレイアウト
ここまでの装飾は「見た目」の話でした。次は「配置」の話です。
CSS Gridを使うと、要素をまるでダッシュボードのように並べられます。しかもJavaScriptは一行も要りません。
（画面の幅を変えると、配置が変わります）
Gridは「エリアを決めて配置する」方式でした。もう1つ、Flexboxという方式もあります。こちらは「並べて、はみ出したら折り返す」という考え方です。
（アイテムが画面幅に合わせて自動的に折り返します）
Flexboxレイアウト
インタラクティブUI
ここまではCSSだけで実現してきました。でも、JavaScriptを使えばもっと自由になります。ボタンを押した瞬間に画面が変わる。そんな「操作→即反応」の体験を作れるんです。
（ボタンを押すと、表示エリアの色・形・テキストが即座に変わります）
生成アート
ボタンで「操作→反応」の仕組みはわかりました。次はもう少し自由に、画面に触れるだけで映像が生まれる体験を作ってみます。
Canvas APIという機能を使うと、ブラウザの中にピクセル単位で絵を描けます。ここでは毎回異なるパターンのパーティクルが生成されます。ページを開くたびに違う絵が出るのも、この仕組みのおかげです。
（画面内をクリックまたはタップすると、パーティクルが飛び出します）
まとめ
粒が画面中を飛び回るところまで来ました。ここで振り返ってみます。この記事では、HTMLファイル1つだけで以下のことをやりました。
- 自動で動くアニメーション
- 触ると変化するカード
- コードだけで描いた図形と動くイラスト
- 画面幅に合わせて並び替わるレイアウト
- ボタンを押すと見た目が変わる仕掛け
- クリックで粒が飛び出すお絵描き
ブラウザが持っている機能だけで、ここまで表現できるんです。特別なツールや環境がなくても始められる。テキストエディタとブラウザさえあれば、様々なWebページを作成することができます。