HTMLやCSSのテクニックをリアルタイムで閲覧できる「The Code Player」

The Code Player

The Code Playerは、
HTML5やCSS3を使ってカッコイイ演出を作る様子を
リアルタイムで閲覧できるサイトです。

サイトにアクセスすると、完成品のサムネイルが並んでいます。
見たいものをクリックすると個別ページに遷移し、完成品を見ることができます。

完成品のサンプル

ここで「Play Walkthrough」をクリックすると、
サンプルを作成する過程の再生が始まります。
まっさらな状態から、HTML、CSS、JSを記述していく様子がリアルタイムで閲覧できます。

過程をアニメーションで閲覧できる

画面下部のコントローラで、
一時停止・再生、再生速度の変更も可能。
速すぎてついていけなくなったら、一時停止したり再生速度を落としてみたりしましょう。

一時停止してブラウザの開発ツールで確認してみると、
右側に表示されているのは、HTMLやCSSなどが実際に反映された状態のものみたいです。

先輩がコーディングしているのを、横から見てるようなイメージ。
一時停止はさしずめ、「ちょっと待った! 今のところもう1回見せてください!」ってお願いしているかのよう。

手順を文章で説明してくれるサイトは多いですが、
こういう感じで途中経過が目に見えると頭に入ってきやすいですね。

まだサンプル数が少ないのはベータ版だからなのかな。
もっとサンプルがどんどん増えていくと良いですねー。

The Code Player